如題，這週我們將從React Native 改為以 Flutter 進行開發，要如何轉換呢？Widget? Component？View? Container?...
好文分享

老樣子，先上圖，晚點會換成GIF

CODE在這裡喔

import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:io';

FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

void main() => runApp(MyApp());
class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center(
        child: Text("This is new route"),
      ),
    );
  }
}


class MyApp extends StatelessWidget {
//  const messageHandlerState = new _MessageHandlerState();
//  initState()

//  messageHandlerState.initState();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Baby Names asasA',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
//  _MyHomePageState createState() {
//    return _MyHomePageState();
//  }
//  _TextCardState createState() => new _TextCardState();
//  _MyIcomPageState createState() =>  _MyIcomPageState();

  _MyIcomPageState createState() {
    return _MyIcomPageState();
  }
}



class _MyIcomPageState extends State<MyHomePage> {
  int _selectedIndex = 1;

  @override
//  Widget build(BuildContext context) {
//  var ratings = new Container(
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('FCM Baby Name Votes'),
        actions: <Widget>[ //导航栏右侧菜单
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
        leading: Builder(builder: (context) {
        return IconButton(
          icon: Icon(Icons.dashboard, color: Colors.white), //自定义图标
          onPressed: () {
            // 打开抽屉菜单
            Scaffold.of(context).openDrawer();
          },
        );
      }),

      ),
      drawer: new MyDrawer(), //抽屉


      bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(), // 底部导航栏打一个圆形的洞
        child: Row(
          children: [
            IconButton(icon: Icon(Icons.home),onPressed: () {  Navigator.push( context,
                MaterialPageRoute(builder: (context) {
                  return NewRoute();
                }));
            },),
            SizedBox(), //中间位置空出
            IconButton(icon: Icon(Icons.business),onPressed: () {
              Navigator.push( context,
                  MaterialPageRoute(builder: (context) {
                    return NewRoute();
                  }));
            },),
          ],

          mainAxisAlignment: MainAxisAlignment.spaceAround, //均分底部导航栏横向空间
        ),

      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//悬浮按钮打洞的位置取决于
      floatingActionButton: FloatingActionButton( //悬浮按钮
          child: Icon(Icons.add),
//          onPressed:_onAdd
      ),
      backgroundColor: Colors.orangeAccent,
      ///////開始放內容
      body: new Container(
        padding: new EdgeInsets.all(20.0),
        child: new Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(5.0),
            ),
            child: new Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  new Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(5.0),
                      color: Color(0xff0d69ff).withOpacity(1.0),
                    ),
                    margin: EdgeInsets.all(20.0), //容器外补白
//                    color: Colors.orange,
                    child: Text("Hello world!"),
                  ),
                  FlatButton(
                    child: Text("open new route"),
                    textColor: Colors.blue,
                    onPressed: () {
                      //导航到新路由
                      Navigator.push( context,
                          MaterialPageRoute(builder: (context) {
                            return NewRoute();
                          }));
                    },
                  ),
                  new Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(5.0),
                    ),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        new Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                          ],
                        ),
                        new Text(
                          '170 Reviews',
                          style: new TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.w800,
                            fontFamily: 'Roboto',
                            letterSpacing: 0.5,
                            fontSize: 20.0,
                          ),
                        ),
                      ],
                    ),
                  ),
                  new Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(5.0),
                    ),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        new Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                          ],
                        ),
                        new Text(
                          '170 Reviews',
                          style: new TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.w800,
                            fontFamily: 'Roboto',
                            letterSpacing: 0.5,
                            fontSize: 20.0,
                          ),
                        ),
                      ],
                    ),
                  ),
                  new Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(5.0),
                    ),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        new Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                          ],
                        ),
                        new Text(
                          '170 Reviews',
                          style: new TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.w800,
                            fontFamily: 'Roboto',
                            letterSpacing: 0.5,
                            fontSize: 20.0,
                          ),
                        ),
                      ],
                    ),
                  ),
                  new Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(5.0),
                    ),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        new Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                            new Icon(Icons.star, color: Colors.black),
                          ],
                        ),
                        new Text(
                          '170 Reviews',
                          style: new TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.w800,
                            fontFamily: 'Roboto',
                            letterSpacing: 0.5,
                            fontSize: 20.0,
                          ),
                        ),
                      ],
                    ),
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      new Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          new Icon(Icons.star, color: Colors.black),
                          new Icon(Icons.star, color: Colors.black),
                          new Icon(Icons.star, color: Colors.black),
                          new Icon(Icons.star, color: Colors.black),
                          new Icon(Icons.star, color: Colors.black),
                        ],
                      ),
                      new Text(
                        '170 Reviews',
                        style: new TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w800,
                          fontFamily: 'Roboto',
                          letterSpacing: 0.5,
                          fontSize: 20.0,
                        ),
                      ),
                    ],
                  ),
                  new Container(
                        margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外填充
                        constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
                        decoration: BoxDecoration(//背景装饰
                            gradient: RadialGradient( //背景径向渐变
                                colors: [Colors.red, Colors.orange],
                                center: Alignment.topLeft,
                                radius: .98
                            ),
                            boxShadow: [ //卡片阴影
                              BoxShadow(
                                  color: Colors.black54,
                                  offset: Offset(2.0, 2.0),
                                  blurRadius: 4.0
                              )
                            ]
                        ),
                        transform: Matrix4.rotationZ(.2), //卡片倾斜变换
                        alignment: Alignment.center, //卡片内文字居中
                        child: Text( //卡片文字
                          "5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
                        ),
                      ),
                  new Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(5.0),

                    ),
                    padding: EdgeInsets.all(20.0), //容器内补白
                    child: Text("Hello world!"),

                  ),
                ])),
      ),
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
  void _onAdd(){
  }
}

class _MyContainerPageState extends State<MyHomePage> {
  @override
//  Widget build(BuildContext context) {
//  var ratings = new Container(
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FCM Baby Name Votes')),
      backgroundColor: Colors.orangeAccent,
      body: new Container(
          padding: new EdgeInsets.all(20.0),
          child: new Expanded(
            flex: 1,
//              fit: FlexFit.loose,
            child: Text("sdsdsd"),
          )),
    );
  }
}

class MyDrawer extends StatelessWidget {
  const MyDrawer({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(
        context: context,
        //移除抽屉菜单顶部默认留白
        removeTop: true,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 38.0),
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    child: ClipOval(
                      child: Image.asset(
                        "imgs/avatar.png",
                        width: 80,
                      ),
                    ),
                  ),
                  Text(
                    "Wendux",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  ListTile(
                    leading: const Icon(Icons.add),
                    title: const Text('Add account'),
                  ),
                  ListTile(
                    leading: const Icon(Icons.settings),
                    title: const Text('Manage accounts'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}