프론트엔드 개발자의 TIL #010

TIL #010

191113 수

 

---

오늘 배운 점

<Flutter>

1. 로딩 위젯 만들기

• 로고를 넣은 로딩 위젯을 별도의 파일로 만들어서  import하는 방식으로 사용할 예정이다.

//Reusable Loading Widgets

Container circularProgress() {//중앙에 회전하는 원
	return Container(
    	alignment: Alignment.center,
        padding: EdgeInsets.only(top: 10.0),
        child: CircularprogressIndicator(
        	valueColor: AlwaysStoppedAnimation(Colors.purple),
        ),
    );
}

Container linearProgress() {//상단에 수평선 로딩
	return Container(
    	padding: EdgeInsets.only(bottom: 10.0),
        child: LinearProgressIndicator(
        	valueColor: AlwaysStoppedAnimation(Colors.purple)
        ),
    );
}

2. 팔로잉/팔로워 관련 프로필 버튼

• Firebase 데이터베이스를 활용하여 어떻게 팔로우 기능/버튼을 처리하는지 대략적으로 알아봤다. (깔ㅡ끔코드)

final String currentUserId = currentUser?.id; //firebase 사용자 ID
bool isFollowing = false;

Container buildButton({String text, Function function}) {
	return Container(
    	padding: EdgeInsets.only(top:2.0),
        child: FlatButton(
        	onPressed: function,
            child: Container(
            	width: 250.0,
                height: 27.0,
                child: Text(
                	text,
                    style: TextStyle(
                    	color: isFollowing ? Colors.black : Colors.white,
                        fontWeight: FontWeight.bold,
                    ),
                ),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                	color: isFollowing ? Colors.white : Colors.blue,
                    border: Border.all(
                    	color: isFollowing? Colors.grey : Colors.blue,
                    ),
                    borderRadius: BorderRadius.circular(5.0),
                ),
            ),
        ),
    );
}

buildProfileButton() {
	bool isProfileOwner = currentUserId == widget.profileId;
    if (isProfileOwner) {
    	return buildButton(text: "Edit Profile", function: editProfile);
    } else if (isFollowing) {
    	return buildButton(text: "Unfollow", function: handleUnfollowUser);
    } else if (!isFollowing) {
    	return buildButton(text: "Follow", function: handleFollowUser);
    }
}

handleUnfollowUser() {

}

handleFollowUser() {
	setState(() {
    	isFollowing = true;
    });
    //auth user가 다른 user의 follower가 되도록 함
    followersRef
    	.document(widget.profileId)
        .collection('userFollowers')
        .document(currentUserId)
        .setData({});
    //해당 user를 내 following 목록에 업데이트함
    followingRef
    	.document(currentUserId)
        .collection('userFollowing')
        .document(widget.profileId)
        .setData({});
    //해당 user의 알림에 새로운 follower에 대한 알림을 업데이트함
}

3. 스토어탭에 carousel_slider를 활용한 autoplay banner 구현에 성공했다.

4. 반면 간단한 팔로워/팔로잉 목록 구현은 FutureBuilder를 제대로 활용하지 못해 type error가 생기다가 다음에 연동하는 것으로 미뤄졌다. 이후에 실수를 깨닫고 다시 고쳐봤는데, 다음에 서버 연동해볼 때 바로 코드 실행이 제대로 됐으면 좋겠다!

---

내일 배울 점

1. 카테고리 버튼들 구현

2. 네트워크 및 컴퓨터구조 공부

3. 경제경영자료분석 공부

---

- 과제폭풍이 다가온다^0^