Flutter
state
#
Find similar titles
Structured data
- Category
- Programming
Table of Contents
플러터(Flutter) #
플러터란 #
- Flutter 개요 : http://www.incodom.kr/Flutter
- Flutter 설치 : http://www.incodom.kr/Flutter/setting
- Flutter FCM(알림메세지) : http://www.incodom.kr/Flutter/FCM
- Flutter http(서버사용) : http://www.incodom.kr/Flutter/http
- Flutter compute : http://www.incodom.kr/Flutter/Compute
- Flutter 소셜 로그인 구현 - 카카오 : http://www.incodom.kr/flutter_%EC%86%8C%EC%85%9C_%EB%A1%9C%EA%B7%B8%EC%9D%B8_%EA%B5%AC%ED%98%84_-_%EC%B9%B4%EC%B9%B4%EC%98%A4
- Flutter 앱 접근 권한 설정 : https://www.incodom.kr/flutter%20%EC%95%B1%20%EC%A0%91%EA%B7%BC%20%EA%B6%8C%ED%95%9C%20%EC%84%A4%EC%A0%95
State? #
- Flutter의 State
- StatelessWidget
- StatefulWidget
- Scaffold
Flutter의 State #
State란? #
- Flutter에서는 모든 것이 Widget으로 시작한다. Widget들을 컨트롤 해주고 어플리케이션을 만들어 나갈 때 State(상태)를 사용한다. 또한 Widget에는 Image, Icon, Text, Row, Column, Padding ... 등 모두 속한다. 이러한 Widget들은 StatelessWidget과 StatefulWidget을 상속 받아 만들 수 있다.
StatelessWidget #
- StatelessWidget은 단 한번 만 Build되며, 한번 그려진 화면은 계속 유지되면서 성능 상 장점이 생긴다.
StatefulWidget #
- StatefulWidget은 state를 포함하여, setState가 발생할 때마다 다시 재 Build를 한다. 즉, 동적 화면을 구성하기 위해선 StatefulWidget을 사용해야 한다.
StatelessWidget #
생성방법 #
-
우선 프로젝트까지 생성되어 있으며 상단에 아래의 코드만 남긴다.
void main() { runApp(MaterialApp( home: MyApp(), )); }
다음과 같이 코드를 남겨 놓았으면 하단에 ' st ' 이라는 문구를 작성해서 오버라이딩(자동생성) 시킬 수 있다.
해당 StatelessWidget은 앞서 말한대로 한 번만 그려주게 된다. StateWidget들은 lifeCycle이라는 것이 존재하는데 생명주기라고 한다.
-
- lifeCycle
- 소스 내에서 실행되는 순서를 말한다.
StatelessWidget은 비교적 단순하여 그려주기만 하여 생명주기가 별도로 없다. 하지만 동적으로 화면을 변동하기 위해선 코드 내에서 State를 조절해주어야 한다. 해당 위젯은 StatefulWidget이다.
StatefulWidget #
생성방법 #
- 마찬가지로 오버라이딩(자동생성)을 시켜줄 수 있다.
생명주기 #
- StatefulWidget은 비교적 복잡하게 구성되어 있다.
코드 상으로는 다음과 같다.
각 각의 print문으로 코드 실행 순서 결과를 확인해보면 다음과 같다.
확인해보면 처음 시작되는 함수로는 initState()와 build()가 있다는 것을 알 수 있다.
Scaffold #
- 앱을 그리기 위한 가장 기초적인 API를 제공해준다. 포함된 것으로는 상단바, 바디, 스낵바, 하단 시트 등 다양하게 지원을 해준다. 이것을 이용하면 기본적인 앱을 구성할 수 있게 된다.
Scaffold의 구성요소를 간단하게 이미지화 하면 다음과 같다.
이것을 앱으로 만들어보면 다음과 같다.
코드는 다음과 같다.
이를 활용하면 이미지를 구성하는 기초는 끝난다. 추가적으로 단축키를 활용하면 작업의 효율성을 높힐 수 있을 것이다.
Flutter 단축키 참고 사이트 #
https://codeprinter.tistory.com/4
참고문헌 #
Flutter 공식 사이트 : [https://flutter.dev/]
Suggested Pages #
- 0.025 Android
- 0.025 iOS
- More suggestions...