# Widget

widget有分兩種：
1. StatelessWidget
2. StatefulWidget

### StatelessWidget
完全沒有資料的靜態Widget，通常會用來當作頁面layout使用

class MyAppBar extends StatelessWidget {

  MyAppBar({this.count});

  final int count;

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

### StatefulWidget
通常會搭配`State`一起實現

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

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

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

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

# 巢狀component
在Widget的Build中，如果要使用巢狀的組件，會用到`child`或是`children`，如果這個組件只有一個子組件，就使用`Child`，有一個以上的子組件就使用`children:
<Widget>[]`

### child

return Center(child: Counter());

### children

return children: <Widget>[
    RaisedButton(
      onPressed: _increment,
      child: Text('Increment'),
    ),
    Text('Count: $_counter'),
],

# Props
上層組件傳入的值

#### StatelessWidget
分成兩個步驟：
1. 指定名稱：`TextBox({this.name})`
2. 宣吿變數：`final String name`

外部傳入：`TextBox(name:'jess')`

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: TextBox(name: 'jess'));
  }
}

class TextBox extends StatelessWidget {
  TextBox({this.name});
  final String name;
  @override
  Widget build(BuildContext context) {
    return Text('name : $name');
  }
}

#### StatefulWidget & State
在`State`裡面直接使用`widget[propsName]`，就等於是找到`StatefulWidget`裡的`this[propsName]`。

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: GlobalLayout(title: 'flutter_router_demo'),
    )
  }
}

class GlobalLayout extends StatefulWidget {
  GlobalLayout({this.title});
  final String title;

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

class GlobalLayoutState extends State<GlobalLayout> {

//...

@override
  Widget build(BuildContext context) {
    return Text(widget.title)
  }
}