Flutter로 앱개발 시작하기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); // runApp은 기본 flutter의 함수. 프로젝트를 실행해줌.
}

class MyApp extends StatelessWidget { // StatelessWidget은 state 변수를 사용할 수 없음
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // 구글의 머테리얼 앱 디자인을 기본으로 차용
      title: 'Flutter Demo',
      theme: ThemeData( // 테마는 디자인 시스템이라고 생각하면 됨
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'), // class에 new는 생략함
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title}); // title을 파람으로 넘겨받음

  final String title;

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

// StatefulWidget은 이런식으로 class가 두개로 나뉘어서 사용됨
// 그럼 title을 쓰려면? widget.title로 접근해야됨.
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; // 이런 일반 변수가 state 값임. setState를 통해 값을 바꾸면 rerender

  void _incrementCounter() {
    setState(() {
      _counter++; // 상태 업데이트 시, setState로 감싸줘야 함. 이렇게 안하면 rerender가 안됨
    });
  }

  @override
  Widget build(BuildContext context) {
		// Material design을 기본으로 가져갈 때
		// 화면의 노치와 같은 부분을 어디까지 잡아줄지? 맞춰주는 역할
    return Scaffold(
      appBar: AppBar(
				// MaterialApp에서 넣어준 컬러 스킴 값.
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
				// StatefullWidget에선 title을 쓰기 위해선 widget.* 으로 접근해야됨
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text( // const는 변수가 없을 때 들어감
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
			// MaterialApp 이므로 플로팅버튼을 설정할 수 있음
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}