打开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 吧）
网友评论