하수하따 록기장

[Flutter] Stateful 위젯이 두 개의 클래스로 나눠진 이유

Flutter 앱을 구성하는 위젯은 Stateful 위젯과 Stateless 위젯으로 구분할 수 있다. 이렇게 구분하는 이유는 효율적인 상태 갱신을 위해서이다. 예를 들어 도움말 페이지는 사용자에 의해 화면이 바뀔 내용이 거의 없이 정적으로 화면을 보여주면 된다. 이런 경우 StatelessWidget 클래스를 상속받아서 위젯을 만든다. 하지만 마이페이지에서 이름을 변경하면 변경된 이름으로 화면이 갱신되어야 할 것이다. 이런 경우 StatefulWiddget을 상속받아서 만든다. 앱이 위젯의 상태를 감시하고 있다가 위젯이 특정 상태가 되면 알맞은 처리를 수행해야 한다. 상태가 연결된 동적인 위젯이 StatefulWidget이다. Stateful 위젯은 계속 상태를 지켜봐야하므로 그만큼 메모리나 CPU 등..

마이페이지 화면에서 사용자 닉네임이 표시되고, 이를 변경가능하게 구현하려고 함.이름 옆에 edit Icon을 넣고 edit Icon을 누르면 텍스트로 표시되었던 사용자 이름이 TextField로 편집가능하게 구현하고 싶음대충 이런 느낌! 톱니바퀴 아이콘을 아직 안빼서 위젯들이 좀 겹쳤지만아래와 같이 코드 구현IconButton( onPressed: () { isEditing.value = true; print(isEditing);},edit Icon을 눌렀을 때 isEditing bool 변수 값이 바뀌게 함if (isEditing.value) SizedBox( width: 150, child: TextField( controller: usernameController, ..

앱 개발 프로젝트 중 프로필 설정 UI를 구성해야 하는데, 유튜브에 좋은 샘플이 있어서 따라해봤다. 하지만 유튜브 영상을 보면서 했을 때 마냥 코드만 따라치게 되는 경향이 있다. 뼈대가 없으면 스스로 구현하기 어려워지므로 유튜브에서 구성한 UI의 코드를 리뷰해보고 뜯어본 다음 내 앱에 맞게 변형하는 작업까지 기록해보려 한다. 왜 이 위젯을 사용해서 왜 이렇게 레이아웃을 구성했는지 초점을 두어 분석해보려고 한다.내가 본 유튜브 영상은 아래 링크이다. 맨 아래에 전체 코드가 있다.https://www.youtube.com/watch?v=AS183vv0xxU  📍 GestureDetector 위젯GestureDetector는 사용자의 제스처(클릭, 더블클릭, 오래 누르기, 드래그 등)를 감지하는 위젯이다. ..

앱바를 투명하게 만들고 body 위에 겹치게 하면, body안의 위젯들과 앱바가 겹치는 문제가 발생한다.(아래 시뮬레이터 캡쳐사진의 왼쪽 사진 참고) 이를 해결하기 위해 SafeArea를 body안의 위젯에 씌워주면, app bar의 그림자 효과가 다시 보이는 문제가 발생한다. (아래 시뮬레이터 캡쳐사진의 가운데 사진 참고) 구글링해보니 StackOverflow에 같은 질문도 있었다. https://stackoverflow.com/questions/68979682/how-to-set-flutter-appbar-transparent-without-the-status-bar How to set Flutter AppBar Transparent without the Status bar I tried to set..

table_calendar 패키지를 사용해서 Calendar를 구현하기 위해, 개발자의 깃헙 베이직 코드를 뜯어보자. ✔ Table Calendar 패키지 설치 table_calendar는 터미널에 아래 명령어를 입력하여 사용할 수 있다. 패키지가 잘 설치되면 pubspec.yaml 파일에 dependencies가 추가될 것이다. flutter pub add table_calendar ✔ Table Calendar 예제 코드 개발자의 Github에서 baisic_example.dart 파일이 있는 링크는 아래와 같다. table_calendar/example/lib/pages/basics_example.dart at master · aleksanderwozniak/table_calendar Highly ..

flutter로 프로젝트를 수행하면서 제일 어려웠던 부분은 상태관리였던 것 같다. 잘모르기도 했고 중요한 부분이라 이와 관련한 이슈가 계속 생겨났다. 그 중 하나를 기록해보려고 한다. 이 이슈는 같이 프론트를 맡았던 친구의 도움으로 해결할 수 있었다. 문제점 설정화면에서 캐릭터 변경하기 아이콘을 누르면 캐릭터 변경하기 모달이 나온다. 변경 후 '저장하기'를 누르면, 모달이 닫히고 다시 설정페이지가 보이게 되는데, 이때 화면갱신이 되어있지 않았다. 따라서 변경된 캐릭터가 아니라 여전히 기존 캐릭터로 프로필이 보이는 문제가 있었다. 문제원인 플러터에서 특정 작업을 수행한 뒤 화면을 갱신하려면 직접 setState를 호출해서 다시 위젯을 rebuild해야한다. setState 메서드는 데이터가 변경되었음을 프..