flutter 实战一：项目搭建和静态页面

打开android studio 选择 flutter
然后出现：（第一次会比较久）

选择
有 应用 插件 包 模块 4个开发选择，我英语不好，理解错了请告诉我！！！
我选择 应用 Application
next
选择你的flutter位置
直接finish
目录结构：
截图
看起来还是比较常规的～
主要的：
android ios 两个配置的地方
lib写代码的地方
flutter的语法是dart，给我的atom下个插件，然后学习一下dart语法，做好准备工作！
flutter的icons库https://docs.flutter.io/flutter/material/Icons-class.html
flutter真的没有一个好用方便的文档，很多信息都需要自己追溯，看源码。。command+点击你要追击了解的单词。。去看看这个组件需要的参数和作用吧！
flutter / Dart常用知识点：
重载：r
热重载：R (在窗口flutter run的前提下可执行)
void：定义函数
int string：定义数字和字符串
Scaffold：主要布局空间（常用最外层）
Column：垂直布局(children 列表)
Center：居中布局
AppBar：头部（app开发中常见的顶部）
Container：容器，块空间（child，空间里的组件,属性decoration，绘制一个背景图案，foregroundDecoration，绘制一个前景图案）
Text：文本
floatingActionButton： 浮动按钮
RaisedButton：凸起按钮
MaterialButton: 只有文字的按钮
TextFormField：文字输入
TextField：输入框
Image：图片
Icon：图标

flutter设置一些参数的时候需要用到：EdgeInsets
例如：padding: new EdgeInsets.only(top: 50, left: 40, right: 40, bottom: 19),
only 代表你可以选择输入某个参数，
all 代表你传入一个值会负值给所有需要参数的参数
padding: new EdgeInsets.all(50)
颜色：Colors.blue[200],
圆角：BorderRadius.circular(23) 相当于all，.vertical(top:10, bottom:10) 上下，.horizontal()左右, .only()上下左右。

以上讲的组件是我在接下来的”实验“app中将要使用到的，更细致的就在app代码中看吧～
先看下我做完的效果：

装车单页面 历史单据页面 我的页面 配送单详情页面

我做了4个页面，有三个是还是空的，主要看装车单，然后还有路由，flutter的路由是很简单的，只要引入在主页面引用一下就好了，但是flutter的图片引入比较麻烦，需要在pubspec.yaml里声明，然后才可以使用。

目录结构
先说图片引入：
图片声明
路径不要错哦，路径看你的图片在哪里，不用特定的位置，我放在最外层。
图片

你的图片文件需要有2.0x 和 3.0x的目录，这个应该不用解释哈，这里需要命名一致，不然会取错哦。

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

图片最简单的使用就是这样啦。
下面看页面之间跳转

//配送单页面，新路由
import 'package:flutter/material.dart';

class Page2 extends StatefulWidget {
  Page2({Key key, this.title}) : super(key: key); //这里注意不是路由的跳转不需要这里
  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),
      ),
    );
  }
}

//历史单据和我的页面都是这样的，名称改一下
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('历史单据'),
      ),
    );
  }
}

//装车单页面
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),//图标
                      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(//为了继承主题数据，widget需要位于MaterialApp内才能正常显示， 因此我们使用MaterialApp来运行该应用。
      title: 'title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '装车单'),
      routes: <String, WidgetBuilder> {
        '/page2': (BuildContext context) => Page2(title: '配送单详情'),//路由（title会传给页面使用）
      },
    );
  }
}

目前所有完成的代码都在这里啦～你实现了吗？还在探索阶段
Container没有阴影，PhysicalModel没有padding，结合起来用，话说那么麻烦吗？谁有更好的办法！！！！！！！

下一篇继续，来看数据传递吧～（有时间就会更新，一起来完成一个完整的flutter app 吧）