개요

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

학습

사이트	설명	비고
공식 문서		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!'),
        ),
      ),
    );
  }
}

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

팁

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

코드 예제


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