Flutter - 코딩마스터하기|추가강의

코멘트 맨 아래로 자동 스크롤하는 방법

코멘트 창을 열어서 댓글을 달면 현재 보이는 상태에서 새로 생성되서 안 보이는 밑에 쌓이는 것을 볼 수 있다. 맨 밑인 최신으로 이동되지 않는데 이 부분을 수정을 해보자. statefulWidget에서 setState는 되지만 여기선 stateless이므로 할 수 있는 방법을 써보자. 우선 comment_screen에서 ListView.separated에 reverse옵션을 true로 해준다. 이렇게 실행하면 가장 최신이 위로 올라가게 되는데 코멘트를 불러오는 comment_network.repository로 가서 orderby부분의 descending를 true로 바꿔준 뒤 재실행하고 코멘트를 달면 방금 단 댓글이 보이는 것을 알 수 있다.

 

로그아웃을 깔끔하게!

페이스북을 로그인한 후 팔로우를 해보면 내 username이 로그가 남는데 이때 로그아웃하고 이메일 로그인을 한 뒤에 팔로우를 해서 userModel의 username을 보면 그 전 상태가 남아있다. clear가 잘 안 되는 것을 볼 수 있다. user_model_state에서 clear()을 할때 cancel을 해주는데 이게 Future이다. 근데 코드상으로 보면 await가 없다. 그래서 이걸 cancel 해주기 전에 null로 만들어서 에러가 난것이다. 그래서 clear() async{}로 해주고 _currentStreamSub.cancel(); 앞에 await를 달아주면된다. 그리고 또 이상한 부분이 있는데 firebas_auth_state.dart에서 signOut()에서 _firebaseAuth.signOut이 시도중에 _facebokkLogin이 연결이 되있으면 잘 안되는 것으로 보인다. 그래서 이 두 개 위치를 바꾸면 된다.

 

카메라 라이브러리 업데이트

카메라 플러그인을 camera: ^0.5.8+2 에서 camera: ^0.7.0+4 로 업데이트 해주자. 그러면 path가 필요 없어지고 XFile로 바꿔주라는 부분이 나오는데, take_photo.dart로 가서 _attemptTakePhoto()로 간다. 그러면 await cameraState.controller.takePicture(path); 부분이 있는데, path를 지워주고 XFile pictureTaken = await cameraState.controller.takePicture(); 로 변경 해준다. 그리고 하단에 File imageFile = File(path); 를 File imageFile = File(pictureTaken.path);로 변경해주기만 하면 똑같이 작동한다. 기존 path를 가져오는 부분은 삭제해 주면 된다. 다시 잘 작동하는 것을 볼 수 있다.

---

XFile pictureTaken = await cameraState.controller.takePicture();

File imageFile = File(pictureTaken.path);

---

FlatButton을 TextButton으로 (Flutter 2.0)

기존 FlatButton이 Flutter 2.0이 되면서 비선호가 되고 TextButton을 사용하기를 원함. 그래서 한가지만 예시로 바꿔보려고함. auth_screen에서 하단 버튼 바뀌는 부분인데 TextButton으로 바꿔주면 shape를 못쓰게 됨. 다른 방법도 있겠지만 여기서는 Container에 decoration을 넣어줌. decoration을 생성하면 Container의 color은 decoration으로 옮겨 줘야함. 아니면 에러가 남. 그리고 border옵션에 shape것을 그대로 복사해서 넣어주면됨. 그러면 기존과 똑같이 됨.

---

child: Container(
  // color: Colors.white, decoration 생성시 decoration 안으로 넣어야함. 안그러면 에러
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border(
      top: BorderSide(
        color: Colors.grey,
        width: 1,
      ),
    ),
  ),
  child: TextButton(
    onPressed: () {
      //이 하단의 코드가 문제점은 기존걸 변경시켜주는게 아닌 새로 생성해주는것임.
      if (selectedForm == 0) {
        setState(() {
          selectedForm = 1;
        });
      } else {
        setState(() {
          selectedForm = 0;
        });
      }
    },
    child: RichText(
      text: TextSpan(
          text: (selectedForm == 0)
              ? 'Already have an account? '
              : "Don't have an account",
          style: TextStyle(color: Colors.grey),
          children: [
            TextSpan(
              text: (selectedForm == 0) ? 'Sign In' : 'Sign Up',
              style: TextStyle(
                  color: Colors.blue,
                  fontWeight: FontWeight.bold),
            ),
          ]),
    ),
  ),
),

---

현재 2021/11/23 일자로 강의 끝!