[Flutter] 프로젝트 구조 알아보기

Flutter UI

• 모든 것은 widget
• 공식 문서를 참조하면 편하게 학습할 수 있다.
• Widget
  • 구성 및 상태가 주어질 때 화면에 보여지는 view가 어떤 모습이어야하는지를 기술
  • 위젯은 용도에 따라 상태 저장 (Stateful) 또는 상태 비저장(Stateless)으로 구분
  • StatefulWidget
    • 사용자가 위젯과 상호작용할 때 위젯의 상태가 변경되면 stateful 위젯
    • 위젯의 수명동안 변경될 수 있는 상태를 유지
      • StatefulWidget 클래스가 State 클래스의 인스턴스를 생성
      • StatefulWidget 클래스 그 자체는 변경 불가능
      • State 클래스가 위젯의 수명동안 상태를 유지
    • 동적으로 변화함
    • 수신된 데이터에 따라 변경됨
    • 위젯의 상태는 상태 객체(State Object)에 저장
    • 위젯 상태 변경 시 setState() 호출해 프레임 워크에 위젯을 다시 그리도록 지시
    • 예) 체크박스, 라디오 버튼, 슬라이더, 텍스트 필드 등
  • StatelessWidget
    • 사용자가 위젯과 상호작용할 때 위젯의 상태가 변경되지 않으면 stateless 위젯
    • build() 메소드에서 화면에서 보여줄 위젯을 리턴
    • build()는 한번만 호출됨
    • 예) 아이콘, 아이콘 버튼, 텍스트 등

프로젝트 생성

New Flutter Project 선택

 

Flutter 선택

 

프로젝트에 관한 설정을 선택 및 기입

 

프로젝트 구조

android, ios 폴더

• 각 플랫폼에 맞게 앱을 배포하기 위한 정보들을 포함

test 폴더

• 개발하기 원하는 각종 다트 관련 코드를 테스트할 수 있음

pubspec.yaml

• 앱 이름, 버전, 빌드, 의존성, 리소스 등이 등록되어 있다.

main.dart

• lib 폴더 안에 위치

import 'package:flutter/material.dart';

// 1. main() 실행
void main() {
  runApp(const MyApp());
}

// 2. MyApp 실행
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 3. 얘가 그려짐
    // Android 디자인을 그릴 것이므로 MaterialApp
    return MaterialApp(
      home: Scaffold(
        body: Text("Hello World"),
      ),
    );
  }
}

 

• 모든 커스텀 위젯은 또 다른 위젯을 리턴하는 build()라는 메서드를 가지고 있음
• MaterialApp()
  • Material
    • 모바일, 데스크 탑 등 다양한 디바이스를 아우르는 일관된 디자인을 위해서 구글이 제공한 가이드라인
  • 앱을 만들기 위해 import한 material 라이브러리를 사용할 수 있는 기능을 가진 위젯
  • MaterialApp위젯은 반드시 argument들을 가져야 한다. → flutter의 모든 위젯들이 argument들을 가진다.
  *iOS의 경우 CupertinoApp을 사용하면 됨 (iOS에서 제공하는 대부분의 기본 UI 컴포넌트를 가지고 있음)
• Scaffold
  • 기본 Materal 디자인 시각적 레이아웃 구조를 구현
• home
  • app이 정상적으로 실행되었을 때 가장 먼저 화면에 보여주는 것

 

---

공부하며 작성된 글이라 잘못된 정보가 있을 수 있습니다.

말씀해주시면 수정하겠습니다. 감사합니다.

References

아래 글을 참고하여 작성 되었습니다.

이지업클래스 | 모두를 위한 온라인 IT CLASS

 

StatelessWidget class - widgets library - Dart API

 

Scaffold class - material library - Dart API

 

[Flutter] 안드로이드는 Material, iOS는 Cupertino 로 위젯을 보여주려면

[flutter] main.dart 기초

https://webnautes.tistory.com/1684