【Flutter 1.2】手機的畫面佈局 (Container篇)

  assets:
   - images/book.png
   - images/time.png

// main.dart
import 'package:flutter/material.dart';
                                                          // 內容主要以iPhone的名稱去做類比
void main() => runApp(MyApp());                           // 主程式進入點

class MyApp extends StatelessWidget {                     // StatelessWidget => 沒有狀態的Widget
  @override
  Widget build(BuildContext context) {                    // build(BuildContext context) => 建立Widget => init()
    return MaterialApp(                                   // MaterialApp => Android的外形組件
      title: 'ContainerDemo',
      home: ContainerDemo(),                              // home => App的最外框 => UIViewController
    );
  }
}

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(                                      // Scaffold => 外框 => UIContainerView
      appBar: AppBar(                                     // AppBar => 最上方標題列 => UINavigationController
        title: Text('Container範例'),                      // Text => 文字列 => UILabel
      ),
      body: containerViewMaker(),                         // body => 外框的內容
    );
  }
}

/// Widget
// 主要的外框
Widget containerViewMaker() {
  Widget container = Container(                           // Container => UIView (所有View的最低層)
    decoration: BoxDecoration(
      color: Colors.yellow,
    ),
    child: Column(                                        // Column => UIStackView (直的)
      children: <Widget>[
        Center(                                           // Center => 置中
          child: Padding(                                 // Padding => 於外框的距離
            padding: const EdgeInsets.all(8.0),
            child: Row(                                   // Row => UIStackView (橫的)
              children: <Widget>[
                Expanded(                                 // Expanded => 會盡量的擴充 (填滿)
                  child: Image.asset('images/book.png'),
                ),
                Expanded(
                  child: Image.asset('images/time.png'),
                ),
              ],
            ),
          ),
        ),
        Row(
          children: <Widget>[                               // children => Array
            Expanded(
              child: cellContainerMaker(Icon(Icons.wifi)),  // child => 一個
            ),
            Expanded(
              child: cellContainerMaker(Icon(Icons.phone)),
            ),
          ],
        ),
      ],
    ),
  );

  return container;
}

// Cell內框
Widget cellContainerMaker(Icon icon) {
  Widget container = Container(
    width: 150.0,
    height: 150.0,
    decoration: BoxDecoration(
      border: Border.all(
        width: 10.0,
        color: Colors.blueGrey,
      ),
      borderRadius: const BorderRadius.all(Radius.circular(8.0)),
    ),
    margin: const EdgeInsets.all(4.0),
    child: icon,
  );

  return container;
}