Programming-[CrossPlatform]/Flutter (34) 썸네일형 리스트형 Flutter Provider: 4. GetX - Reactive State manager Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.https://www.youtube.com/@codingchef 코딩셰프향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다!www.youtube.com Reactive State Manager 개념 앞서 배운 GetBuilder와는 다르게 Stream을 다루는 방식이다. GetX, Obx 등을 사용하는데, Stream을 다루므로 GetBuilder 보다는 무거운 방식이다. 대신 update() 메서드를 호출하지 않더라도 자동으로 UI를 업데이트해준다는 장점이 있다. RxReactiveX의 줄임말이며 어떤 데이터의 흐름을 '관찰' 하는데.. Flutter Provider: 3. GetX - Simple State Manager Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.https://www.youtube.com/@codingchef 코딩셰프향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다!www.youtube.com 1. Getx 설치 및 기초 예제 getx는 state management를 제공하고 플러터의 문법을 훨씬 간결하게 표현해주어 인기가 많다. 설치는 getx가 아닌 get으로 명명하여 설치한다. $ flutter pub add get state management를 하는 방법을 실습해본다. controller 클래스 생성어떤 값을 변화시키고 그 값을 추적하기 위한 controller.. Flutter Provider: 2. ChangeNotifierProvider, MultiProvider Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.https://www.youtube.com/@codingchef 코딩셰프향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다!www.youtube.com ChangeNotifier어떤 데이터를 담을지에 대한 클래스에 근거해서 provider들을 만든다. 지난 글에서 Provider.of(context)를 사용한 것처럼 FishModel이 변화하는 데이터로 지정된다. 이 변화하는 데이터를 추적하는 역할을 ChangeNotifier가 한다. 아래처럼 with 구문을 통해 mixin으로 FishModel에 ChangeNotifier를 추가.. Flutter Provider: 1. Provider와 State management Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.https://www.youtube.com/@codingchef 코딩셰프향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다!www.youtube.com 1. State Managementstate: UI에 변화가 생기도록 영향을 미치는 데이터 데이터에는 앱 수준의 데이터, 위젯 수준의 데이터가 있다.앱 수준은 로그인 등 전체 앱에 영향을 미치는 데이터, 위젯 수준은 해당 위젯에만 영향을 미치는 데이터를 의미한다. 플러터는 기본적으로 state가 변하면 hot reload를 하여 화면을 갱신한다.그리고 이를 위해 setState() 메.. [작성중][제철음식 알리미] bottomNavBar, didChangeDependencies, pageController 제철음식 알리미 앱을 제작하며 학습했던 내용들을 정리한다. 1. BottomNavBar bottomNavBar 요소를 통해서 페이지를 이동할 수 있도록 했다. Scaffold 내부에 bottomNavigationBar 인자로 아래와 같이 BottomNavBar를 추가했다.bottomNavigationBar: BottomNavBar( selectedIndex: _selectedIndex, onItemTapped: _onItemTapped,) 여기서 _selectedIndex, _onItemTapped를 통해 현재 선택된 index 값과 홈 또는 검색 아이콘이 클릭되었을 때의 행동을 정의한다. selectedIndex 값은 홈페이지의 index 값을 0, 검색 페이지의 index 값을 1로 두었다. 그.. [제철음식 알리미] ValueListenableBuilder, ValueNotifier 제철음식 알리미 앱을 제작하며 학습했던 내용들을 정리한다. 1. ValueNotifier제철음식 알리미는 아래와 같이 MonthSlider와 PageView로 구성되어있다. 여기서 아래 애니메이션과 같이, 두 개의 다른 요소가 서로 상호작용하며 바뀌는 월 정보를 추적해야한다. PageView를 좌우로 스와이프해도 MonthSlider의 월 정보가 바뀌어야하고, MonthSlider의 화살표를 누르더라도 PageView의 내용이 변경되어야한다. 이를 위해 현재 선택된 month 정보를 selectedMonth라는 변수로 두고 ValueNotifier로 등록했다. class _HomeViewState extends State { final ValueNotifier selectedMonth = .. [제철음식 알리미] 2. 화면 요소: Flexible, Expanded, Positioned 제철음식 알리미 앱을 제작하며 학습했던 내용들을 정리한다. 1. Stack과 Positioned 이전 글에서 플러터의 화면 요소들은 기본적으로 Stack으로 쌓인다는 것을 공부했다. 그리고 Stack 요소 자체를 추가하여 화면을 구성할 수도 있다. 예를 들어 아래의 화면처럼 음식의 목록 화면이 존재하고, 음식 목록 화면의 스크롤 여부와는 별개로 그 위쪽에 겹치도록 광고 화면을 구성하고 싶을 수 있다. 이럴 때 화면의 아래에서부터 위로 쌓아나가는 Stack과 고정된 위치를 지정할 수 있는 Postioned 요소를 사용하면 된다.return Stack(children: [ Builder(builder: (context) { return Container( ... 음식 목록 화면에 사용된 C.. [제철음식 알리미] 1. 화면구성: Stack, Navigator, PageView 제철음식 알리미 앱을 제작하며 학습했던 내용들을 정리한다. 1. Stack 플러터의 화면은 기본적으로 Stack으로 구성되어있다. Stack에 페이지를 한 겹씩 쌓아나가는 구조이다. 화면 전환을 할 때 Stack에 페이지들을 쌓을 수도 있지만 이전 stack을 없애고 새로운 stack만 존재하도록 할 수 있다. 그리고 뒤로가기를 누르면 하나의 Stack을 제거하는 구조이다. 1.1 페이지 스택 쌓기 원리 이해제철음식 알리미에서는 홈, 검색 페이지가 있다. 페이지 전환 시 스택과 관련된 로직은 아래와 같다. 앱에 접속하면 홈 페이지 스택이 쌓인다.검색 버튼을 누르면 검색 페이지 스택이 추가로 쌓인다.이 상태에서 뒤로 가기를 누르면, 검색 페이지 스택이 제거되면서 이전 홈 페이지 스택으로 돌아간다.홈 페이.. 이전 1 2 3 4 5 다음
