전체 글 (14) 썸네일형 리스트형 공부하다 배운 Flutter 꿀팁 무작정 적어두기 (7) ###### 다크모드 설정 방법 ###### 1. main.dart에서 MaterialApp 위젯 내에 themeMode를 세팅한다. themeMode 속성값은 dark, light, system이 있고 system은 앱이 실행되는 기기의 환경에 맞춰 라이트모드, 다크모드를 설정하는 앱이다. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'TikTok Clone', themeMode: ThemeMode.system, 2. theme 속성에 light모드의 theme 정보와 dark모드의 darkTheme 정보를 세팅한다. 여기서 brightness 속성값을 .. 공부하다 배운 Flutter 꿀팁 무작정 적어두기 (6) video_player의 경우 버전이 낮으면 init 시에 에러발생함 GridView를 쓸 때는 children으로 하는 게 아니라 ListView처럼 builder로 하는 게 낫다. gridDelegate는 컨트롤러라기보다는 GridView를 구성하는 데에 도움을 주는 헬퍼 정도.. FadeInImage는 넘치는 텍스트를 다 보이게 하고싶으면, expanded 위젯을 활용 키보드가 실행된다거나 하는 이유로 화면이 resize되는 이슈를 줄이기 위한 방법 -> Scaffold 속성 중 resizeToAvoidBottomInset을 False로 세팅 여러개의 리스트를 보여주기 위한 여러가지 방법 GridView, ListTile! Material Design의 세팅값들이 자동으로 적용되는 게 싫은 경우, .. 공부하다 배운 Flutter 꿀팁 무작정 적어두기 (5) - 동영상 플레이어 만들기 1. 로컬 이미지나 영상을 사용하려면, pubspec.yaml에서 경로를 명시해줘야 한다. 아래와 같이! assets: - assets/videos/video1.mp4 2. 비디오를 실행하기 위한 패키지와, visibility에 따른 함수를 콜백할 패키지를 추가해준다. video_player: 2.7.2 visibility_detector: 0.3.3 3. 먼저 타임라인 페이지에 리스트뷰처럼 여러페이지를 한 화면에서 책 넘기듯 볼 수 있는 PageView 위젯을 생성, 컨트롤러 세팅, 스크롤 방향을 수직으로 세팅. 페이지가 바뀔 때 실행될 함수 세팅, 아이템 개수 세팅, 빌드 함수 세팅 @override Widget build(BuildContext context) { return PageView.bui.. 공부하다 배운 Flutter 꿀팁 무작정 적어두기 (4) Navigator.of(context).push의 경우 이전에 있던 모든 화면 위에 새 창을 띄우는 식. 그래서 뒤로가기를 통해 이전 화면으로 갈 수가 있음. 그런데 굳이 돌아가지 않아도 되는 화면들이 있음. 예를 들면 회원가입 완료 후 메인화면에 들어가게 되면, 회원가입 하던 화면은 돌아갈 수 없게 처리가 돼야 함! -> 이런 케이스엔 이전 화면을 삭제해버리면 됨 -> Navigator.of(context).push 대신, Navigator.of(context).pushAndRemoveUntil 함수를 사용! 라우트 개수를 설정하고 return 값으로 false를 주면 이전 라우트를 삭제함 하단부 내비게이션 바로 스크린 이동 세팅하는 방법 - Scaffold에서 bottomNavigationBar 속성.. 공부하다 배운 Flutter 꿀팁 무작정 적어두기 (3) Wrap 위젯 안의 children은 기본적으로 수평으로 배치되고, 넘치면 자동으로 다음 줄로 넘어간다. SingleChildScrollView 위젯을 Scrollbar 위젯으로 감싸면 스크롤할 때만 스크롤바가 나옴! Scaffold를 DefaultTabController 위젯으로 감싸면 온보딩 탭 기능을 구현할 수 있음 DefaultTabController( TabBarView( children: [ ] ) ) TabPageSelector()를 세팅하면 탭 셀렉터 아이콘이 뜸 화면을 넘기는 swipe를 GestureDetector에서는 pan이라고 함. GestureDectector 속성 중 onPanUpdate와 onPanEnd 속성을 이용해 스와이프시 작동하는 메소드를 세팅할 수 있음. 1. 먼저 .. 공부하다 배운 Flutter 꿀팁 무작정 적어두기 (2) Flutter에서 Private으로 생성하고 싶으면 메소드명 앞에 언더바('_')를 붙여준다. 라이프사이클과 관련된 build, init, dispose 같은 메소드 앞에는 언더바를 안 붙이지만 그외 나머지 메소드, 프로퍼티를 선언할 때는 언더바를 붙이는 게 좋다. AnimatedContainer(duration : Duration(milliseconds, N)) 위젯을 이용하면, 컨테이너에 어떤 변화가 있을 때 지정한 Duration만큼의 속도로 변화하게 된다. ex) 유저명을 작성하면 회원가입 버튼이 활성화되는 경우 근데 이때 child 속성의 Text 같은 것들에까지 애니메이션이 적용되지는 않음. 그래서 Text의 경우에는 AnimatedDefaultTextStyle 위젯을 적용해줌. 아래와 같은 .. 공부하다 배운 Flutter 꿀팁 무작정 적어두기 (1) Flexible : UI 비율에 기반해서 유연하게 위젯 생성. 하나의 박스가 얼마나 공간을 차지할지 비율을 결정할 수 있음 Widget build(BuildContext context)에서 context는 메인의 MaterialApp을 통해 선언한 ThemeData를 가져올 수 있다. 그래서 Theme.of(context).~ 형태로 테마를 통일할 수가 있음 이상하게 중앙에 배치된 위젯은 Row 위젯으로 감싸주는 방식으로 왼쪽으로 뺄 수가 있고, Expanded 위젯으로 컨테이너를 감싸서 비는 부분을 채울 수 있다. Timer.periodic("duration", (timer) { "function"}) -> 매 duration마다 function을 실행하게 해주는 메소드 Future는 언젠가 발생할 일.. StatefulWidget의 라이프 사이클 (노마드 코더님의 무료 강의에서 기억하고 싶은 것들을 기록한 내용입니다. 광고, 홍보 아니고 강의 내용 정말 좋아서 Flutter랑 Dart 입문하시는 분들께 강력 추천!) 우선 위젯 클래스에는 StatelessWidget과 StatefulWidget이 있음. StatelessWidget은 데이터가 고정돼 있어서 UI를 있는 그대로 반영하는 위젯이라면, StatefulWidget은 여러 상호작용을 통해 데이터가 변할 때 사용하는 위젯. StatefulWidget에서는 아주 많은 메소드들이 실행되고 이런 과정 속에서 라이프사이클이 반복됨 1. initState 메소드 : initState에서 우리는 변수를 초기화하고 API 업데이트를 구독한다거나 할 수 있음. initState는 build 이전에 실행되고.. 이전 1 2 다음