新建项目
1、Flutter create xxxx 先用命令建好项目再到工具内，打开项目。这样比较快
声明：Flutter专栏文档均来自慕课网
Flutter原理介绍（讲的比较透彻和全面的文章）
（免费视频）Dart编程语言基础学习
（免费视频）Flutter 入门与实战-基础视频学习
Flutter 从入门到进阶-demo
Flutter 增加Json 序列化反序列化
Json转Dart 在线工具
.基础结构
// 引入基础样式 material
import 'package:flutter/material.dart';
// 入口文件
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// 重写方法
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Welcome to Flutter",
// 脚手架组件 具体点击进入看源码
home: Scaffold(
// 属性是小写，有哪些属性，在源码中可以清楚的看见，引入的对象是大写 AppBar
appBar: AppBar(
title: Text("Hello World 你好"),
),
// 内容
body: Center(
// 用容器来存放子项
child: Container(
// 容器内 添加一个 Text
child: new Text("这个是内容啊啊啊啊",
style: TextStyle(
fontSize: 20,
color: Colors.white
),
),
// 设置容器padding
padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 30.0),
// 设置容器内对其方式
alignment: Alignment.topLeft,
// 设置容器margin
margin: EdgeInsets.fromLTRB(20, 20, 20, 30),
width: 400,
height: 300,
// 设置容器叠加背景
decoration: BoxDecoration(
// 这里用线性渐变
gradient:LinearGradient(
colors: <Color>[Colors.blueGrey,Colors.white]
)
),
),
),
),
);
}
}
横向ListView 与Listview代码抽离
// 引入material UI
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 返回Material风格的App
return new MaterialApp(
title: "list demo测试",
// 页面脚手架
home: Scaffold(
// 标题栏
appBar: AppBar(
// title
title: new Text("list view 测试"),
// 标题栏背景
backgroundColor: Colors.blueGrey,
),
// 内容模块 ->这里设置居中
body: Center(
// 内容设置一个容器，高度为200，容器内 填充内容 为 listview
child: Container(
height: 200,
// 将listview控件抽离出去 并传递默认宽度
child: new MyList(300.0),
)),
),
);
}
}
// Listview 抽离
class MyList extends StatelessWidget {
double width = 200;
MyList(double w){
this.width = w;
}
@override
Widget build(BuildContext context) {
return new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: this.width,
color: Colors.deepOrange,
),
new Container(
width: this.width,
color: Colors.blueGrey,
),
new Container(
width: this.width,
color: Colors.lightBlue,
),
new Container(
width: this.width,
color: Colors.green,
),
new Container(
width: this.width,
color: Colors.yellowAccent,
),
],
);
}
}
ListView动态填充数据
// 引入material UI
import 'package:flutter/material.dart';
void main() => runApp(MyApp(
dataList: new List<String>.generate(1000, (i) => "Item $i")
));
class MyApp extends StatelessWidget {
List<String> dataList;
MyApp({Key key,this.dataList}):super(key:key);
@override
Widget build(BuildContext context) {
// 返回Material风格的App
return new MaterialApp(
title: "list demo测试",
// 页面脚手架
home: Scaffold(
// 标题栏
appBar: AppBar(
// title
title: new Text("list view 测试"),
// 标题栏背景
backgroundColor: Colors.blueGrey,
),
// 内容模块 ->这里设置居中
body: new MyList(dataList),
),
);
}
}
// Listview 抽离
class MyList extends StatelessWidget {
List<String> dataList = new List();
MyList(List<String> items){
this.dataList = items;
}
@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount: dataList.length,
itemBuilder: (BuildContext context, int index) {
return new ListTile(
title: new Text('Item $index'),
);
},
);
}
}
GridView demo
import 'package:flutter/material.dart';
// 初始化一个图片数组，模拟数据传递
var picArr = [
'http://222.186.12.239:10010/wde_150708/004.jpg',
'http://222.186.12.239:10010/suop_150709/001.jpg',
'http://222.186.12.239:10010/suop_150709/003.jpg',
];
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
List<String> picList=new List<String>();
MyApp(){
// 循环将数组图片插入到 list
for(var pic in picArr){
picList.add(pic);
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "电影海报 实例",
home: Scaffold(
appBar: AppBar(title: new Text("电影海报实例")),
// 将数据 传递给 独立 控件 MyGridView
body: MyGridView(picList),
),
);
}
}
// 抽离控件GridView ，获取传递的数据
class MyGridView extends StatelessWidget{
List picList = new List();
MyGridView(List items){
this.picList = items;
}
@override
Widget build(BuildContext context) {
return new GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// 一行3列
crossAxisCount: 3,
// 上下 间距
mainAxisSpacing: 2.0,
// 左右间距
crossAxisSpacing: 2.0,
// 图片长宽比
childAspectRatio: 0.7,
),
itemBuilder: (BuildContext context, int index) {
return new Image.network(picList[index],fit: BoxFit.cover,);
},
itemCount: picList.length,
);
}
}
遇到的奇葩问题1：
org-dartlang-debug:synthetic_debug_expression:1:1: Error: String starting with ' must end with '.
'Unable to load asset: $key
解决办法：
--flutter clean
遇到的奇葩问题2：
Another exception was thrown: Exception: HTTP request failed, statusCode: 403
定位后发现，是后台接口token校验问题，
遇到的奇葩问题3
android 运行一直卡住 无法安装
解决办法
修改build.gradle，把里面的google()、jcenter()注释掉，因为要访问外网，改成aliyun代理网址
maven {
url 'https://maven.aliyun.com/repository/google/'
}
maven{
url 'https://maven.aliyun.com/repository/jcenter/'
}
maven{
url 'https://maven.aliyun.com/nexus/content/groups/public'
}
然后，还有把gradle-wrapper.properties文件内gradle-4.10.x-all.zip 改成本地有的版本（必须是4.6 or 更新版）
#Fri Jun 23 08:50:38 CEST 2017
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
自定义控件 + 传参定义
// Flutter
class CustomCard extends StatelessWidget {
CustomCard({@required this.index, @required
this.onPress});
final index;
final Function onPress;
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: <Widget>[
Text('Card $index'),
FlatButton(
child: const Text('Press'),
onPressed: this.onPress,
),
],
)
);
}
}
...
// Usage
CustomCard(
index: index,
onPress: () {
print('Card $index');
},
)
...
遇到的奇葩问题4
Waiting for another flutter command to release the startup lock…
On OSX:
rm /Applications/flutter/bin/cache/lockfile
Waiting for another flutter command to release the startup lock…
flutter packages get --verbose
遇到的奇葩问题 页面路由跳转
Navigator operation requested with a context that does not include a Navigator.
The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.
直接在MyApp中push是不行的。启动的时候 要包一层
[图片上传失败...(image-4b8271-1554889682077)]