플러터:개념 잡기

틀:플러터 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

개요

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

학습

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

기본 양식

import 'package:flutter/widgets.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const ColoredBox(
      color: Color(0xFFFFFFFF), // 흰 배경
      child: Center(
        child: Text(
          'Hello, World!',
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Color(0xFF000000)),
        ),
      ),
    );
  }
}

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

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

디자인 시스템

현재 디자인은 OS를 따라 마테리얼 시스템과 쿠퍼티노 시스템으로 나뉘어 있다.

마테리얼 디자인

구글에서 추구하는 방식.

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!'),
        ),
      ),
    );
  }
}

쿠퍼티노 디자인

iOS에서 추구하는 디자인 방식.

import 'package:flutter/cupertino.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      debugShowCheckedModeBanner: false,  // 디버그 표시 지우기.
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Cupertino App'),
        ),
        child: Center(
          child: Text('Hello, Cupertino!'),
        ),
      ),
    );
  }
}

마테리얼과는 버튼, 앱바 등 디자인에서 차이가 있고, 하위 위젯의 이름이 조금씩 다르다.

이름이 갈라지는 위젯들

iOS에서 Material 위젯을 써도 되지만, 기본적인 디자인의 일관성을 위해 각 앱에 맞는 형식을 사용한다.

앱 구조 계열

역할	Material	Cupertino
앱 루트	MaterialApp	CupertinoApp
페이지 기본 틀	Scaffold	CupertinoPageScaffold
상단 바	AppBar	CupertinoNavigationBar
탭 구조	BottomNavigationBar	CupertinoTabScaffold
탭 바	-

입력 / 액션 계열

역할	Material	Cupertino
버튼	ElevatedButton / TextButton	CupertinoButton
스위치	Switch	CupertinoSwitch
슬라이더	Slider	CupertinoSlider

피드백 계열

역할	Material	Cupertino
다이얼로그	AlertDialog	CupertinoAlertDialog
로딩	CircularProgressIndicator	CupertinoActivityIndicator

팁

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

코드 예제

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