一、安装

1.安装命令

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn $ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn $ git clone -b dev https://github.com/flutter/flutter.git $ export PATH="$PWD/flutter/bin:$PATH" $ cd ./flutter $ flutter doctor 

执行完flutter doctor可能会提示报错，说你缺少编译器，按照提示的命令去执行或者直接去下载编译器，然后在执行flutter doctor，就会看到错误减少。

2.更新环境变量

此时flutter命令只能在当前终端窗口运行，要想在其他终端窗口运行还得更新环境变量。

1.进入你的Flutter SDK目录下，并记住这个目录，我的是`/Users/user/flutter` 2.执行`vim $HOME/.bash_profile` 3.在`$HOME/.bash_profile`文件里面输入如下 export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置 export PATH=(这里是我们Flutter SDK的目录)/bin:$PATH 4.结束编辑执行`source $HOME/.bash_profile ` 5.运行echo $PATH目录是否在已经在PATH中。 

这样你就可以在任意的终端窗口运行Flutter命令了。

二、创建项目

打开你的编译器（我选择的是Android Stutio），安装Flutter插件和Dart插件（不会使用Android Stutio的同学，问问你的Android小伙伴）。

重启Android Stutio，我们看到如下： newFluuter.png
点击进入下图我们选择Flutter Application newProject.png

创建好我们进入项目目录查看。可以看到有ios文件和android文件夹下，分别创建了ios工程和android工程，其实也可以通过这两个文件夹下的工程去运行Flutter工程。

三、代码体验

Flutter中界面上一切都是widget(连手势都继承了widget)，又分为无状态的StatelessWidget或者是有状态的StatefulWidget。
1.Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.
2.Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:

一个 StatefulWidget类。 一个 State类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在. 

下面我们再看如下代码：

import 'package:flutter/material.dart'; //main函数没啥好说的 void main() => runApp(new MyApp()); //理解为整个应用是一个继承StatelessWidget的类的对象，本质上也是一个Widget，类似与ios中的window需要一个rootViewController，这里也需要一个widget,这里给他返回了一个MaterialApp对象。 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //MaterialApp有需要给home属性赋值一个Widget对象用来显示。这里我们给home赋值了一个Scaffold对象。MaterialApp是已经封装了许多属性的widget，当然我们也可以在这直接返回一简单的如Container,开发中一般我们不会动这里的返回。 return new MaterialApp( title: 'Welcome to Flutter', //Scaffold是封装好的widget,我们可以把它当做一个页面去理解。 home: new Scaffold(appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } } 

上面有一个问题，当我们把Scaffold当做一个页面去理解，当出现多个页面是，就需要多个Scaffold对象，而且每个页面又会只有状态，就要有多个 Scaffold的State类，反而没法区分是那个页面了。
所以我们通常这么用

import 'package:flutter/material.dart'; void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Widget1(), ); } } //直接继承StatefulWidget的对象来充当页面，Scaffold对象充当页面中的widget。这样就可以让每个页面都有一个State类来操作。 class Widget1 extends StatefulWidget{ @override State<StatefulWidget> createState() { // TODO: implement createState return new Widget1State(); } class Widget1State extends State<Widget1>{ @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text( 'aa', ), ), body: new Text('aa'), ), ); } 

这里我们体验下Flutter的热加载，运行成功后，稍微改改文案之类的，按command+S,或者点击如图中的⚡️符号，不用再重新运行项目就可以看到变更。

hot.png

四、常用Widget

Text

new Text( 'aabbcc测试下text各种属性名字好不好',//文案 style: TextStyle(color: Colors.red,fontSize: 22,),//文字颜色，字体大小等 textAlign: TextAlign.left,//居中偏左偏右 maxLines: 1,//最大行， overflow: TextOverflow.ellipsis,//超出问题缩略方式 ) 

富文本

Text.rich( TextSpan( text: '富文本', children: [ TextSpan( text: 'hell0', style: TextStyle(color: Colors.red) ), TextSpan( text: '你好', style: TextStyle(color: Colors.green) ), ], ), ) 

Row、Column

body: Row(crossAxisAlignment: CrossAxisAlignment.end,//指定了元素间对齐方式常用 mainAxisAlignment: MainAxisAlignment.spaceEvenly, //指定了元素间的排列方式 常用 textDirection: TextDirection.rtl, //元素之间的排列顺序row使用 不常用 verticalDirection: VerticalDirection.up, //元素之间的排列顺序column使用不常用 children: <Widget>[ new Container( height: 100, width: 100, color: Colors.red, ), new Container( height: 100, width: 100, color: Colors.green, ), //Expanded这个元素将暂用剩余的全部空间。 Expanded(child: new Text('aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈')),], ), 

Container

new Container( width: 100, height: 100, //color: Colors.red, padding: EdgeInsets.fromLTRB(0, 0, 50, 50), //设置子视图相对Container的边距，即内边距 alignment: AlignmentDirectional(1, 1),//设置子视图相对Container的位置 margin: EdgeInsets.all(20),//设置Container距离其他视图的位置child: new Container( //子视图 height: 20, width: 20, color: Colors.green, ), decoration: BoxDecoration( //出现这个属性外部就不能再设置颜色了 color: Colors.red,//设置颜色 border: Border.all(color: Colors.green,width: 2,), //设置边框 borderRadius: BorderRadius.all(Radius.circular(10)),//设置圆角),), 

Image

Image有多个构造方法.

Image.asset( 'images/aa.png', height: 200, width: 200, fit: BoxFit.cover,//填充方式 BoxFit.fill填满；BoxFit.contain按照图片宽高比例来有可能填不满;BoxFit.cover按照图片宽高比例来有可能图片被切割 ), 

body: new Image.network( 'https://wx2.sinaimg.cn/mw690/5df4326fgy1fykew2hqq1j22c02c0b29.jpg', //图片路径 width: 200, height: 200, ), 

button

button有好几种，我们先来看看它们的集成关系。

 IconButton 有一个icon必填属性,需要一个widget对象，不局限于Icon类型 MaterialButton--->FlatButton(按压有墨水效果的按钮),RaisedButton(其实就是一个有抬起效果和按压有墨水效果的按钮),OutlineButton(对边框进行了封装的按钮)DropdownButtonRawMaterialButtonFloatingActionButton生成一个圆形的button 

按钮默认点击会有水波纹的效果，设置highlightColor属性会去掉。
这里我发现两个问题：问题1.没有属性设置按钮是否可以点击；问题2.如何取设置按钮的圆角；这两个问题搞定了，就可以使用MaterialButton满足一般的开发需求了。这里我找到了后续在补充。。。。。

问题1.控制按钮是否可以点击可以控制按钮的onPressed属性，当属性为null时按钮不可点击。

//在这个方法里面控制状态 setState(() { if(){ _isButton1Disabled = true; }else{ _isButton1Disabled = false; } } RaisedButton( child: new Text('aa'), onPressed: _getBtn1ClickListener(),注意这里一定要带（）这里实际上是一个函数。 ); //根据变量去控制这个方法的返回值是null 还是_clickAction。 _getBtn1ClickListener() { if (_isButton1Disabled) { return null; } else { return _clickAction(); }} //真正的点击方法 void _clickAction(){ } 

AppBar

new Scaffold( appBar: new AppBar( centerTitle: true,//控制title处于navbar的中心位置。 leading: new IconButton(icon: new Icon(Icons.add), onPressed: _addAction),//navbar左侧按钮 title: new Text( 'aa', style: TextStyle( color: Colors.red, ), ),actions: <Widget>[ new IconButton(icon: new Icon(Icons.add), onPressed: _addAction), new IconButton(icon: new Icon(Icons.add), onPressed: _addAction), ],//navbar右侧按钮), 

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/17674.html