플러터:개념 잡기 편집하기 (부분)

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

== 마테리얼 디자인 ==
구글에서 추구하는 방식.<syntaxhighlight lang="dart">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!'),
        ),
      ),
    );
  }
}</syntaxhighlight>

== 쿠퍼티노 디자인 ==
iOS에서 추구하는 디자인 방식.<syntaxhighlight lang="dart">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!'),
        ),
      ),
    );
  }
}</syntaxhighlight>마테리얼과는 버튼, 앱바 등 디자인에서 차이가 있고, 하위 위젯의 이름이 조금씩 다르다.

== 플러터의 특성(진한쌤의 코멘트) ==

* 모든 것이 위젯으로 구성되어 있다.
* 좋게 말하면 이미 마련된 기능을 이용하여 간단하게 앱을 만들 수 있고, 나쁘게 말하면 코드 자체보다 프레임워크에 대한 학습 소요가 크다.
* 다행인 것은 AI의 발전으로 모르는 위젯에 대한 것도 필요 기능이 명확하다면 금방 찾아내어 적용할 수 있다는 것. 여러모로 최근 동향에 잘 맞는 기술이다.

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

=== 앱 구조 계열 ===
{| class="wikitable"
!역할
!Material
!Cupertino
|-
|앱 루트
|MaterialApp
|CupertinoApp
|-
|페이지 기본 틀
|Scaffold
|CupertinoPageScaffold
|-
|상단 바
|AppBar
|CupertinoNavigationBar
|-
|탭 구조
|BottomNavigationBar
|CupertinoTabScaffold
|-
|탭 바
| -
|
|}

=== 입력 / 액션 계열 ===
{| class="wikitable"
!역할
!Material
!Cupertino
|-
|버튼
|ElevatedButton / TextButton
|CupertinoButton
|-
|스위치
|Switch
|CupertinoSwitch
|-
|슬라이더
|Slider
|CupertinoSlider
|}

=== 피드백 계열 ===
{| class="wikitable"
!역할
!Material
!Cupertino
|-
|다이얼로그
|AlertDialog
|CupertinoAlertDialog
|-
|로딩
|CircularProgressIndicator
|CupertinoActivityIndicator
|}