반응형

Mobile/Flutter 6

[Flutter] Dive into Flutter State Management. UI = f(state).

IntroduceFlutter의 State앱 상태가 변경되면 사용자 인터페이스가 다시 그려진다.setState로 Widget의 state를 변경하며, 그때마다 Layer Tree를 다시 만든다.[공식 문서 기준] 언제든지 UI를 재구축하기 위해 필요한 모든 데이터 집합.widget.setText()와 같이 UI 자체를 반드시 변경할 필요 없으며, 상태를 변경하면 UI가 처음부터 다시 만들어진다.Ephemeral(Local) state Ephemeral state(UI state or local state)는 단일 위젯에 포함할 수 있는 상태이다. 예) PageView 안에 현재 페이지 예) BottomNavigationBar에서 현재 선택된 탭 이러한 상태는 위젯 트리의 다른 부분에 접근할 일이 거의 없..

Mobile/Flutter 2022.12.02

[Flutter] Dive into StatefulWidget. Flutter Widget Library.

Introduce 상태 변경이 가능한 위젯이다. 상태란, 위젯이 완성될 때 동기적으로 읽을 수 있는 정보이며, 위젯의 수명 동안 변경될 수 있는 정보이다. StatefulWidget의 상태 변경은 setState()를 이용해서 변경이 가능하다. StatefulWidget 인스턴스 자제는 Immutable이며, createState 메서드에 의해 생성된 State 객체에 변경 가능한 상태를 저장한다. class ItemCounter extends StatefulWidget { final String name; ItemCounter({this.name}); @override _ItemCounterState createState() => _ItemCounterState(); } class _ItemCounte..

Mobile/Flutter 2022.11.26

[Flutter] Dive into StatelessWidget. Flutter Widget Library.

Introduce 변경할 수 있는 상태가 필요하지 않은 화면을 구성할 때 사용하는 위젯 클래스. build() 메서드가 호출되면 화면에 Widget을 그린다. class GreenFrog extends StatelessWidget { const GreenFrog({ super.key }); @override Widget build(BuildContext context) { return Container(color: const Color(0xFF2DBD3A)); } } build() 메서드가 호출되는 경우는 세 가지이다. Widget이 Widget Tree에 삽입되는 경우. Configuration Change가 발생한 경우. InheritedWidget의 변경 사항이 발생한 경우. Widget Tree ..

Mobile/Flutter 2022.11.24

[Flutter] 화면 이동하기

안녕하세요 골드입니다. 오늘은 flutter에서 navigator 클래스를 활용하여 간단하게 화면 이동하는 법에 대해 글을 작성하도록 하겠습니다. Android에서 화면 이동은 Intent 객체를 활용하였습니다. Flutter는 이와 다르게 Navigator 클래스의 push() pop()을 메서드를 사용합니다. 새로운 화면으로 이동할 때는 push() 다시 돌아올 때는 pop()을 사용합니다. 자료구조의 stack과 똑같습니다. 1. routes 설정하기 flutter에서 route는 경로라는 뜻입니다. 각 페이지에 이름을 지정하고 해당 이름에 알 맞은 페이지를 지정해놓으면 경로가 됩니다. 그럼 설정해보겠습니다. RouteDemo()라는 클래스를 만들었습니다. 앱이 실행될때 실행되도록 runApp에 넣..

Mobile/Flutter 2020.05.01

[Flutter] Listview 위젯 사용하기

안녕하세요 골드입니다. 오늘은 Flutter에서 Listview를 사용하는 방법에 대해서 글을 작성하도록 하겠습니다. 저는 작성한 리스트를 리스트뷰로 보여주도록 하겠습니다. 1. List 생성 먼저 material design을 위한 패키지를 import합니다. 앞으로 자주 import할 녀석입니다. material design을 사용하도록 도와줍니다. 다음으로 main 함수를 작성합니다. flutter의 main 함수입니다. 앱을 실행하면 가장 먼저 실행되는 함수입니다. 람다식으로 표현되어 있고 runApp() 안에 들어있는 메서드를 실행합니다. 두 가지 변수를 선언했습니다. 하나는 String 변수로 title을 지정하기 위해 선언했습니다. 다른 하나는 List 형식의 변수입니다. dart에서 Lis..

Mobile/Flutter 2020.04.25

[Flutter] Window에서 Flutter 개발 환경 설정하기 (toolchain 오류 해결하기)

안녕하세요 골드입니다. 오늘은 Flutter를 위한 개발환경을 설정하는 방법에 대해서 알아보도록 하겠습니다. https://flutter-ko.dev/ Flutter - 가장 빠른 아름다운 네이티브 앱 Flutter(플러터)는 하나의 코드베이스로 모바일, 웹, 데스크톱에서 네이티브로 컴파일 되는 구글의 아름다운 UI 툴킷입니다. Flutter는 기존 코드와 함께 동작하고, 전세계 개발자와 조직에 쓰이고 있으며, 무료 오픈 소스입니다. flutter-ko.dev 1. Flutter SDK 다운로드 Flutter 공식 홈페이지에 접속하여 시작하기를 클릭합니다. Window 운영체제를 선택하고 SDK를 다운받습니다. Flutter SDK를 다운받고 원하는 위치에 설치합니다. (2번 참조) (저는 문서에 넣었습..

Mobile/Flutter 2020.04.24