[Flutter] 20. 기초적인 Flutter 화면을 구성하는 패턴

[Flutter] 20. 기초적인 Flutter 화면을 구성하는 패턴

 

1. 기초적인 Flutter 화면 구성 패턴

1. 'package:flutter/material.dart' 임포트
2. MaterialApp으로 메인 위젯 트리 감싸기
3. title과 theme같은 속성 설정
4. home: 속성을 주 페이지로 정의
5. Scaffold: 앱의 시각적 레이아웃에 대한 기본 구조를 제공한다. (ex: appBar, body)

 

*머터리얼 디자인에서 수많은 오픈소스 위젯을 받아 사용할 수 있다.

https://m3.material.io/components/chips/specs

Chips – Material Design 3

 

 

 

2. 시나리오 코드

import 'package:flutter/material.dart';

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

// 상태 기반 UI
class MyApp extends StatelessWidget {
  const MyApp ({super.key});

  @override
  Widget build(BuildContext context) {
    // 앞으로 MaterialApp 안에서 위젯들을 선언해보자
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        title: 'My Flutter',
        theme: ThemeData(
          colorScheme: ColorScheme.light(primary: Colors.redAccent),
          primarySwatch: Colors.red
        ),
        // 시각적 레이아웃 구성요소를 잡아 주는 녀석이다.
        home: Scaffold(
          appBar: AppBar(title: Text("My Flutter"), backgroundColor: Colors.blue,)
      )
    );
  }
}