flutter create my_app
cd my_app

flutter run

my_app
  |- android
  |  ... a bunch of junk
  |- ios
  |  ... a bunch of junk
  |- lib
  |  main.dart
  |- test
  pubspec.lock
  pubspec.yaml
  README.md
  ...

// import the Flutter sdk
import 'package:flutter/material.dart';

// 모든 다트 프로그램은 무조건 main()함수가 있어야 한다.
// 이 함수는 본질적으로 자바스크립트 Document.ready()이며, 반드시 있어야 한다.
// 이것은 다트 코드의 진입점이다.
// runApp은 앱을 실행하는 플러터 함수 이다.
// 이것은(runApp함수) 위젯을 인수로 취한다.
void main() => runApp(new MyApp());

// 모든것이 위젯이다.
// 전체앱의 root를 포함:
class MyApp extends Stateless Widget {
  ...

// 주의: MyApp은 임의의 이름 이다.

// Stateless 위젯은 어떠한 상태변경도 하지 않는다.
// 여러분 어플리케이션의 Root
class MyApp extends StatelessWidget {
  // Build method
  @override
  Widget build(BuildContext context) {
    // MaterialApp은 플러터의 기본내장된 위젯으로 다양한 스타일을 제공한다.
    // MaterialApp의 가장 중요한 아규먼트는 title과 home이다.
    return new MaterialApp(
      // Arguments that Material App is looking for.
      title: 'Flutter Demo',
      theme: new ThemeData(
        // 이것은 앱의 기본색상을 Blue로 설정한다.
        primarySwatch: Colors.blue,
      ),
      // MyHomePage은 개발자인 여러분이 이름붙인 또 다른 임의의 위젯이다.
      home: new MyHomePage(title: 'Flutter Home Demo Page'),
    );
  }
}


// 이 위젯은 카운터의 상태를 관리하고 있으므로 Statefull임.
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  // 제목으로 전달되고 있어 위에서 볼수 있다.
  final String title; // => Flutter Home Demo Page

   // Stateful 위젯은 build메서드를 가지고 있지 않다.
   // createState() 메서드를 가지고 있고 State를 생성하면 플러터 State클래스를 상속한 클래스가 리턴된다.
  @override
  _MyHomePageState createState() => new _MyHomePageState();

  // Stateful Widgets are rarely more complicated than this.
}


// 이것은 MyHomePage가 생성한 state이다.
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  // flutter counterApp sample의 comment가 내가 설명하는것보다 더 나아서 남겨둠.
  void _incrementCounter() {
    // 플러터 메서드에 내장
    setState(() {
      // setState의 호출이 발생하면 플러터 프레임워크에 뭔가 상태 변경이 있음을 알려주며, 이로 인해 아래의
      // build 메서드가 재실행되어 디스플레이에 업데이트된 값이 반영 될 수 있다.
      // setState()를 호출하지 않고 _counter의 값을 변경하면 build메서드가 다시 호출되지 않으므로 아무 일도 일어나지 않을 것이다.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 이 메서드는 setState가 호출되면 매번 재 실행된다. (예를 들어 위의 _incrementCounter메서드가 완료되면)

    // Scaffold는 우리에게 표준 모바일 앱 레이아웃을 제공하는 앱의 또 다른 빌드다.
    return new Scaffold(
      //앱의 상단에 있는 bar
      appBar: new AppBar(
        // State클래는 widget.someProperty 형식으로 부모 클래스의 프로퍼티를 액세스 한다.  
        // StatefulWidgets와 해당 StateClasses를 단일 위젯으로 생각하는 것이 더 쉽다.
        title: new Text(widget.title),
      ),
      body: new Center(
        // Center는 layout위젯이다. 이것은 단일 자식을 취하며 부모의 중간(한가운데)에 위치 시킨다.
        child: new Column(
          // Column 또한 layout위젯이다. 이것은 다수의 자식을 수직으로 정렬한다. 
          // 기본적으로 자식들을 수평으로 맞추기 위해 크기를 정하고 부모의 사이즈만큼 커진다.(역자주: 부모의 사이즈를 자식수로 나눠서 사이즈가 정해진다.)
          //
          // Column은 크기를 어떻게 해야 하고 자식들을 어떻게 위치시키는지를 제어하는 다양한 속성을 가지고 있다.
          // 여기서 우리는 mainAxisAlignment를 사용하여 자식들을 세로 중앙에 위치 시킨다. 
          // 여기서 주축은 세로축이다, Columns이 수직이기 때문이다.(교차축은 수평이 된다)
          //
          // mainAxisAlignment와 crossAxisAlignment는 CSS의 Flexbox또는 Grid를 사용해봤다면 매우 익숙할 것이다.
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              // Text는 첫번째 아규먼트 String을 이용한다.
              // 우리는 counter의 값을 삽입 String으로 전달한다.
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      // Floating actino버튼은 특수 버튼임.
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}