[Flutter] 샘플 프로젝트 분석

플러터 프로젝트를 시작하면 아래와 같다.

카운터 어플리케이션 및 주석이 달려있다.

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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


  final String title;

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

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

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

  @override
  Widget build(BuildContext context) {
 
    return Scaffold(
      appBar: AppBar(
      
        title: Text(widget.title),
      ),
      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.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

주석을 지우고, 해당 소스는 위와 같다.

void main() 안에 runApp()으로 MyApp을 불러온다.

 

StatelessWidget안에 들어가는 내용은 제목,테마,이름이다.

쉽게 얘기하면 해당 내용은 앱에서 변경되지 않으므로 StatelessWidget을 상속 받는다.

 

해당 플러스 버튼을 누르게 되면, 숫자가 변경되고 사용자에게 보여주기 떄문에 Statefulwidget을 상속 받는다고 이해하면 된다.

StateFulwidget은 변경되는 부분을 위해 자신을 State를 담아서 관리한다.

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

 

해당 소스는 State로 StatefulWIdget을 감싸서, createState()라는 스테이트를 만든다라는 의미이다.

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

  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

 

위의 소스를 보면, State<MyHomePage>를 상속받은 클래스가 있다.

그리고 setState()라는 함수가 있는데, 이는 State가변경되고 이를  알려서 해당 변화정보를 반영되게끔 해주는 메소드이다.

따라서, 해당 메소드를 제외한다면? 변경이 반영되지 않는다.

@override
  Widget build(BuildContext context) {

 

해당 메소드도 중요하다.

해당 메소드는 위젯들을 빌드하는 메소드이다.

    return Scaffold(
      appBar: AppBar(

또한 해당 Scaffold를 리턴하는데, 해당 Scaffold는 Statefulwidget이 가지는 State를

이루게 하는 위젯들을 감싸는 폴드이다.

 

해당 제목에 대한 내용을 선언할 수 있는데, 해당 Title은 아까 Required로 전달 받아 생성된 변수값이다.

title: Text(widget.title),

 

기타 컬럼에 대한 속성값들, 그리고 하위 위젯에 대해서는 좀 더 차차 공부해보도록 하자.