Flutter 기본 코드 분석

Flutter 프로젝트를 만들었을 때 처음으로 주는 기본 생성 코드를 분석해보겠습니다.

//material 디자인의 위젯들을 사용하기 위해서 추가
import 'package:flutter/material.dart';

//myApp() 실행
void main() {
  runApp(MyApp());
}

//StatelessWidget은 상태가 변화하지 않을 때 사용
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Material 디자인의 앱
    return MaterialApp(
      //앱 이름 설정
      title: 'Flutter Demo',
      //앱에 테마 설정
      theme: ThemeData(
        //앱에 기본 테마를 파란색으로 설정
        primarySwatch: Colors.blue,
      ),
      //MyHomePage()를 홈으로 지정
      //title값을 보내줌
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

//statefulWidget은 상태가 변화할 때 사용
class MyHomePage extends StatefulWidget {
  //매개변수로 key와 title을 사용
  MyHomePage({Key key, this.title}) : super(key: key);

  //앱 바에 타이틀이 될 부분
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //변수 앞에 _를 쓰면 private가 된다.
  //화면 중앙에 버튼을 얼마나 클릭했는지 출력해주는 숫자
  int _counter = 0;

  //_counter를 1씩 더 해주는 메소드
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    //Scaffold로 뼈대 구성
    return Scaffold(
      //화면 가장 상단에 앱바 생성
      appBar: AppBar(
        //앱바에 타이틀을 매개변수로 받아올 title로 함
        title: Text(widget.title),
      ),
      //HTML을 예로 들면 body역할을 하는 부분으로 몸통 부분
      //Center()로 가운데로 이동
      body: Center(
        //Column()으로 세로 정렬 <=> Row()로 가로 정렬
        child: Column(
          //세로 가운데 정렬
          mainAxisAlignment: MainAxisAlignment.center,
          //Column은 위젯들을 가운데 정렬하기 때문에 여러개를 자식으로 둘 수 있다.
          children: <Widget>[
            //Text()로 텍스트 표시
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              //$를 사용해서 변수 사용 가능(${}로도 가능)
              //버튼 클릭 횟수 표시
              '$_counter',
              //style로 텍스트의 스타일을 headline4로 변경
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      //우측 하단에 FloatingActionButton을 추가하는 부분
      floatingActionButton: FloatingActionButton(
        //클릭했을 때마다 _incrementCounter 메소드 실행
        onPressed: _incrementCounter,
        //버튼을 클릭했을 때 발생하는 작업을 설명
        tooltip: 'Increment',
        //flutter에서 기본적으로 제공하는 material design icon
        child: Icon(Icons.add),
      ),
    );
  }
}

기본 생성 코드

현재 제가 아는 선에서 최대한 분석해봤습니다.
혹시 부족하거나 틀린 부분이 있다면 알려주시면 감사하겠습니다.