플러터(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? #

1. Flutter의 State
2. StatelessWidget
3. StatefulWidget
4. 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...