import 'package:flutter/meterial.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  // StatelessWidget의 필드는 항상 final로 선언합니다.
  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 156.0, // 플러터에서는 논리적인 픽셀단위를 사용합니다.
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      // Row는 수평적인 선형 배치입니다.
      child: Row(
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // onPressed에 null값을 설정하면 Button이 disable상태로 설정됩니다.
          ),
          // Expanded는 자식 위젯이 여백을 채우게 합니다.
          Expanded(
            child: title,
          ),
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: <Widget>[
          MyAppBar(
            title: Text(
              'Example title',
              style: Theme.of(context).primaryTextTheme.title,
            ),
          ),
          Expanded(
            child: Center(
              child: Text('Hello, world!'),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    title: 'My app', // used by the OS task switcher
    home: MyScaffold(),
  ));
}

name: my_app
flutter:
  uses-material-design: true

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter Tutorial',
    home: TutorialHome(),
  ));
}

class TutorialHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Scaffold는 주요 머터리얼 컴포넌트 사용을 위한 위젯입니다.
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: Text('Example title'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
      // body는 화면에 보여지는 영역입니다.
      body: Center(
        child: Text('Hello, world!'),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add', // 접근성 기능에서 사용됩니다.
        child: Icon(Icons.add),
        onPressed: null,
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('MyButton was tapped!');
      },
      child: Container(
        height: 36.0,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Colors.lightGreen[500],
        ),
        child: Center(
          child: Text('Engage'),
        ),
      ),
    );
  }
}

class Counter extends StatefulWidget {
  // 이 위젯 클래스는 아래의 State를 위해 함께 구성돼어야 하는 클래스입니다. 
  // 이 클래스는 부모로부터 제공된 값들과 State의 build() 메소드를 위해 사용될 값들을 담습니다. 
  // 위젯 클래스의 모든 필드는 final로 선언되어야 합니다.

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

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      // setState() 메소드는 Flutter 프레임워크에게 State가 변경됐다는 것을 말해줍니다.
      // 아래 build() 메소드가 다시 실행되고, 그로 인해 UI에 갱신된 값들이 반영됩니다.
      // 만약 setState() 메소드를 호출하지 않고 _counter를 변경한다면, build() 메소드는 호출되지 않을 것입니다. 그렇게 되면 UI도 바뀌지 않습니다.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 이 메소드는 위의 setState() 메소드가 호출될 때마다 다시 실행됩니다. 
    // Flutter 프레임워크는 build() 메소드를 빠르게 다시 실행시킬 수 있도록 최적화 돼있습니다. 그래서 갱신이 필요할 때면 언제든 리빌드를 해도 괜찮습니다.
    return Row(
      children: <Widget>[
        RaisedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
        Text('Count: $_counter'),
      ],
    );
  }
}

// 현재 상태를 프레젠테이션 하는 stateless 위젯
class CounterDisplay extends StatelessWidget {
  CounterDisplay({this.count});

  final int count;

  @override
  Widget build(BuildContext context) {
    return Text('Count: $count');
  }
}

// 사용자 입력을 받는 stateless 위젯
class CounterIncrementor extends StatelessWidget {
  CounterIncrementor({this.onPressed});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: onPressed,
      child: Text('Increment'),
    );
  }
}

// State를 위해 필요한 stateful 위젯
class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

// 사용자 입력으로 모인 정보를 사용해 변경 알림의 흐름을 만들어내는 State
class _CounterState extends State<Counter> {
  int _counter = 0;

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

  // CounterIncrementor는 사용자 입력을 받아 정보를 모읍니다. 
  // 사용자 입력이 있을 때 _CounterState로부터 받은 콜백을 호출합니다. 정보는 이 콜백을 통해 위젯 계층 위로 흘러갑니다. 
  // _CounterState는 정보를 사용해 상태(_counter)를 변경하고, 이 상태 변경은 CounterDisplay가 있는 위젯 계층 아래로 흘러갑니다.   
  // CounterDisplay는 바뀐 상태를 UI에 반영합니다.
  @override
  Widget build(BuildContext context) {
    return Row(children: <Widget>[
      CounterIncrementor(onPressed: _increment), 
      CounterDisplay(count: _counter),  
    ]);
  }
}

class Product {
  const Product({this.name});
  final String name;
}

typedef void CartChangedCallback(Product product, bool inCart);

class ShoppingListItem extends StatelessWidget {
  ShoppingListItem({Product product, this.inCart, this.onCartChanged})
      : product = product,
        super(key: ObjectKey(product));

  final Product product;
  final bool inCart;
  final CartChangedCallback onCartChanged;

  Color _getColor(BuildContext context) {
    // 여기서 사용되는 테마는 BuildContext에 의존합니다. tree의 다른 부분이 다른 테마를 가질 수 있기 때문입니다.
    // BuildContext는 build가 실행되는 위치를 가리킵니다.

    return inCart ? Colors.black54 : Theme.of(context).primaryColor;
  }

  TextStyle _getTextStyle(BuildContext context) {
    if (!inCart) return null;

    return TextStyle(
      color: Colors.black54,
      decoration: TextDecoration.lineThrough,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {
        onCartChanged(product, !inCart);
      },
      leading: CircleAvatar(
        backgroundColor: _getColor(context),
        child: Text(product.name[0]),
      ),
      title: Text(product.name, style: _getTextStyle(context)),
    );
  }
}

class ShoppingList extends StatefulWidget {
  ShoppingList({Key key, this.products}) : super(key: key);

  final List<Product> products;

  // 프레임워크는 위젯이 tree에 위치가 주어지고 나타나는 처음 한 번 createState() 함수를 호출합니다.
  // 만약 부모 위젯이 같은 위젯 유형(같은 key)을 사용하고 rebuild 한다면, 프레임워크는 State 객체를 생성하는 대신에 재사용할 것입니다.  

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

class _ShoppingListState extends State<ShoppingList> {
  Set<Product> _shoppingCart = Set<Product>();

  void _handleCartChanged(Product product, bool inCart) {
    setState(() {
      // 사용자가 카트 안의 무언가를 변경할 때 rebuild를 실행시키기 위해 setState() 메소드 안에서 _shoppingCart의 변경하는 동작이 필요합니다.
      // 그러면 프레임워크는 build를 호출할 것이고, 앱의 visual appearance는 갱신될 것입니다.

      if (inCart)
        _shoppingCart.add(product);
      else
        _shoppingCart.remove(product);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shopping List'),
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(vertical: 8.0),
        children: widget.products.map((Product product) {
          return ShoppingListItem(
            product: product,
            inCart: _shoppingCart.contains(product),
            onCartChanged: _handleCartChanged,
          );
        }).toList(),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    title: 'Shopping App',
    home: ShoppingList(
      products: <Product>[
        Product(name: 'Eggs'),
        Product(name: 'Flour'),
        Product(name: 'Chocolate chips'),
      ],
    ),
  ));
}