플러터:변하는 화면(StatefulWidget) 편집하기 (부분)

= 기본 카운터 앱 전체 코드 =
아래는 기본적으로 많이 제공되는 예시인 기본 카운터 앱이다.<syntaxhighlight lang="dart">
import 'package:flutter/material.dart'; 

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',              // 앱 이름
      debugShowCheckedModeBanner: false,  // 오른쪽 상단의 "debug" 띠 제거
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,     // 전체적인 색상 팔레트 지정
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),  // 첫 화면. 굳이 변수로 전달할 필요는 없어 보이는데, 예제에선 학습용으로 둔 듯.
    );
  }
}

class MyHomePage extends StatefulWidget {
  // StatefulWidget = 상태(state)를 가지고 변경 가능한 화면을 만들 때 사용
  final String title; // 화면 상단 AppBar에 표시할 제목

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
  // 이 위젯이 사용할 State 객체 생성
}

class _MyHomePageState extends State<MyHomePage> {
  // 실제로 상태를 가지고 동작하는 부분은 여기(State 클래스)

  int _counter = 0; // 화면에 표시될 숫자 상태 값 (초기값 = 0)

  void _incrementCounter() {
    // FloatingActionButton을 눌렀을 때 실행되는 함수
    setState(() {
      // setState()를 호출해야 화면을 다시 그리게(Rebuild) 된다. 이 함수 동작이 끝나면 이 상태를 다시 그림.
      _counter++; // 상태 값 증가
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        // widget.title → 부모(StatefulWidget)에서 받은 title 값
      ),

      body: Center(  // Center = 가운데로 정렬
        child: Column(  // Column = 세로로 위젯을 쌓는 레이아웃
          mainAxisAlignment: MainAxisAlignment.center, // mainAxisAlignment.center → 세로 가운데 정렬
          children: [
            const Text('You have pushed the button this many times:'),
            // 설명 문장 (고정 텍스트이므로 const 사용)
            Text(
              '$_counter', // 화면에 상태 값 표시
              style: Theme.of(context).textTheme.headlineMedium,  // 앱 테마에서 지정된 큰 글씨 스타일 사용
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(  // 오른쪽 아래 떠있는 버튼 (FAB)
        onPressed: _incrementCounter, // 버튼 클릭 → 상태에 정의된 함수 실행
        tooltip: 'Increment',         // 버튼 길게 누르면 뜨는 설명
        child: const Icon(Icons.add), // + 아이콘
      ),
    );
  }
}

</syntaxhighlight>