Flutter 템플릿 코드 예제 #1

Flutter 기본 예제 코드 #1

이 코드는 Flutter에서 가장 많이 사용되는 StatelessWidget과 StatefulWidget을 포함하며, 버튼을 눌러 카운터를 증가시키는 간단한 기능을 구현합니다.

flutter clean

flutter pub get

flutter run -d win

---

1. main() 함수와 MyApp 클래스

import 'package:flutter/material.dart';

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

코드 설명

• main() 함수: Flutter 애플리케이션의 진입점.
• runApp(MyApp()): MyApp 위젯을 실행하여 애플리케이션을 시작함.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 애플리케이션의 전체 테마 설정
        colorScheme: ColorScheme.fromSeed(seedColor: const Color.fromARGB(255, 207, 202, 159)),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

코드 설명

• MyApp 클래스는 StatelessWidget을 상속.
• MaterialApp을 반환하여 Flutter의 Material 디자인을 적용.
• theme: 앱의 전반적인 테마를 정의 (색상, 글꼴 등).
• home: MyHomePage 위젯을 기본 화면으로 설정.

---

2. MyHomePage (StatefulWidget)

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

코드 설명

• MyHomePage는 StatefulWidget을 상속하며, 상태(State)를 가짐.
• title: 부모 위젯(MyApp)에서 전달받는 문자열 값.
• createState(): State 객체인 _MyHomePageState를 생성.

---

3. _MyHomePageState (State 클래스)

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

코드 설명

• _counter: 버튼을 누를 때마다 증가하는 정수 값.
• _incrementCounter(): setState()를 호출하여 UI를 갱신함.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),

• Scaffold: Flutter에서 기본적인 레이아웃을 제공하는 위젯.
• AppBar: 앱의 상단에 제목을 표시하는 영역.

---

4. body 부분 (화면의 주요 내용)

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),

코드 설명

• Center: 화면 중앙에 배치하는 위젯.
• Column: 수직 방향으로 위젯을 배치하는 레이아웃 위젯.
• mainAxisAlignment: MainAxisAlignment.center: 세로 방향으로 중앙 정렬.
• Text: _counter 값을 표시하는 텍스트.

---

5. FloatingActionButton (플로팅 버튼)

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),

코드 설명

• FloatingActionButton: 화면 하단에 떠 있는 버튼.
• onPressed: _incrementCounter: 버튼 클릭 시 _incrementCounter() 실행.
• Icon(Icons.add): 플러스(+) 아이콘을 표시.

---

이 Flutter 예제 코드는 기본적인 StatefulWidget을 활용하여 버튼 클릭 시 숫자가 증가하는 간단한 앱을 구현합니다. 중요한 개념은 다음과 같습니다:

1. StatelessWidget과 StatefulWidget의 차이

• StatelessWidget: 상태가 변하지 않는 위젯 (MyApp)
• StatefulWidget: 상태가 변하는 위젯 (MyHomePage)

2. setState() 활용

• setState()를 호출해야 Flutter가 UI를 다시 그려서 화면을 갱신함.

3. Flutter 기본 레이아웃

• Scaffold, AppBar, Column, Center 등 기본적인 Flutter UI 구성 요소 활용.