플러터:개념 잡기

틀:플러터 Dart:개요 플러터에 대한 지식 분류

1. 플러터:개요
   1. 플러터:VSCode
   2. 플러터:안드로이드 스튜디오
2. 플러터:실행
3. 플러터:개념 잡기
   1. 플러터:화면 하나 만들기
   2. 플러터:변하는 화면(StatefulWidget)
   3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
   4. 플러터:화면 전환(Drawer)
   5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
   6. 플러터:그래프 그리기(fl chart)
   7. 플러터:데이터 저장(간단한 데이터)
   8. 플러터:인증(Firebase 인증)(미완)
   9. 플러터:인증(OAuth2)(미완)
4. 권한 사용
   1. 플러터:마이크 입력
5. 위젯
   1. 플러터:아이콘
   2. 플러터:레이아웃 계열 위젯
   3. 플러터:네비게이션 계열 위젯
   4. 플러터:버튼
   5. 플러터:상태관리(미완)
6. 플러터:DB연결
   1. 플러터:Firebase(미완)
   2. 플러터:MySQL(미완)
7. 디자인
   1. 플러터:테마
   2. 플러터:앱바
8. 플러터:배포
9. 플러터:참고자료
10. 플러터:위젯
    1. 플러터:공간배치용 위젯
11. 플러터:라이브러리
    1. 플러터:logger

개요

플러터 코드를 작성하는 데 있어 기본 개념에 대한 문서.

기본 양식

import 'package:flutter/material.dart';  // 마테리얼 디자인 관련 라이브러리.(안드로이드 방식. 이지만 ios도 지원)

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,  // 디버그 표시 지우기.
      home: Scaffold(
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

기본적인 흐름은 main>runApp>위젯 형식이다. 위젯을 상속한 클래스의 build를 오버라이딩 하는 방식으로 이루어진다.

위의 경우, MyApp에서 빌드를 진행한다.

팁

대부분 IDE에서 ctrl+s를 통해 핫 리로드를 제공한다.(코드의 빠른 반영 확인)

학습

사이트	설명	비고
공식 문서		https://docs.flutter.dev/get-started/codelab
다트 패드	다트로 작성한 코드를 실행하는 코드 에디터. 간단한 플러터 코드를 실험해볼 수 있다.	https://dartpad.dev/

예제

사이트	설명	비고
공식 문서		https://api.flutter.dev/
공식	공식 예제 사이트.	https://flutter.github.io/samples/#