打開android studio 選擇 flutter
然后出現(xiàn)：（第一次會比較久）

選擇

選擇你的flutter位置

截圖

flutter設(shè)置一些參數(shù)的時候需要用到：EdgeInsets
例如：padding: new EdgeInsets.only(top: 50, left: 40, right: 40, bottom: 19),
only 代表你可以選擇輸入某個參數(shù)，
all 代表你傳入一個值會負(fù)值給所有需要參數(shù)的參數(shù)
padding: new EdgeInsets.all(50)
顏色：Colors.blue[200],
圓角：BorderRadius.circular(23) 相當(dāng)于all勒葱，.vertical(top:10, bottom:10) 上下浪汪，.horizontal()左右, .only()上下左右。

以上講的組件是我在接下來的”實(shí)驗(yàn)“app中將要使用到的凛虽，更細(xì)致的就在app代碼中看吧～
先看下我做完的效果：

裝車單頁面

歷史單據(jù)頁面

我的頁面

配送單詳情頁面

我做了4個頁面死遭，有三個是還是空的，主要看裝車單涩维，然后還有路由殃姓，flutter的路由是很簡單的袁波，只要引入在主頁面引用一下就好了，但是flutter的圖片引入比較麻煩蜗侈，需要在pubspec.yaml里聲明篷牌，然后才可以使用。

目錄結(jié)構(gòu)

圖片聲明

圖片

你的圖片文件需要有2.0x 和 3.0x的目錄夭苗，這個應(yīng)該不用解釋哈，這里需要命名一致隔缀，不然會取錯哦题造。

//圖片使用
new Image.asset('images/order-empty.png')

圖片最簡單的使用就是這樣啦。
下面看頁面之間跳轉(zhuǎn)

//配送單頁面猾瘸，新路由
import 'package:flutter/material.dart';

class Page2 extends StatefulWidget {
  Page2({Key key, this.title}) : super(key: key); //這里注意不是路由的跳轉(zhuǎn)不需要這里
  final String title;
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
    );
  }
}

//歷史單據(jù)和我的頁面都是這樣的界赔，名稱改一下
import 'package:flutter/material.dart';

class Page4 extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page4> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('歷史單據(jù)'),
      ),
    );
  }
}

//裝車單頁面
import 'package:flutter/material.dart';

class Page3 extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page3> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Center(
        child: Column(
          children: <Widget>[
            PhysicalModel (
              color: Colors.blue,
              elevation: 6,//加陰影
              child: Container(
                padding: new EdgeInsets.only(top: 50,left: 40, right: 40, bottom: 19),
                child: Container(
                  height: 40.0,
                  padding: new EdgeInsets.only(left: 10),
                  decoration: new BoxDecoration(
                    color: Colors.blue[200],
                    borderRadius: new BorderRadius.circular(25.0),
                  ),
                  child: TextFormField(
                    style: new TextStyle(color: Colors.white70,fontSize: 14),//輸入文字顏色和大小
                    decoration: InputDecoration(
                      hintText: '請輸入訂單號搜索',//文字提示
                      hintStyle: new TextStyle(color: Colors.white70),//提示文字顏色
                      icon: Icon(Icons.search, color: Colors.white70),//圖標(biāo)
                      border: InputBorder.none,//去掉下劃線
                    ),
                  ),
                ),
              ),
            ),
            Container(
              padding: new EdgeInsets.only(top: 200),
              child: new Image.asset('images/order-empty.png'),
            ),
            new MaterialButton(
              onPressed: () {
                Navigator.pushNamed(context, '/page2');
              },
              child: Text('前往配送單'),
            )
          ],
        ),
      )
    );
  }
}

主頁：

import 'package:flutter/material.dart';

import './views/page1.dart';
import './views/page2.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(//為了繼承主題數(shù)據(jù)，widget需要位于MaterialApp內(nèi)才能正常顯示牵触， 因此我們使用MaterialApp來運(yùn)行該應(yīng)用淮悼。
      title: 'title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '裝車單'),
      routes: <String, WidgetBuilder> {
        '/page2': (BuildContext context) => Page2(title: '配送單詳情'),//路由（title會傳給頁面使用）
      },
    );
  }
}

目前所有完成的代碼都在這里啦～你實(shí)現(xiàn)了嗎？還在探索階段
Container沒有陰影揽思，PhysicalModel沒有padding袜腥，結(jié)合起來用，話說那么麻煩嗎钉汗？誰有更好的辦法８睢！＠芡濉Ｌ靥瘛！Ｐ炷啤癌刽！

下一篇繼續(xù)，來看數(shù)據(jù)傳遞吧～（有時間就會更新尝丐，一起來完成一個完整的flutter app 吧）