Flutter仿照airbnb创建app

github地址：https://github.com/GainLoss/flutter-app

一、基础

flutter是谷歌公司开发的开源免费的UI框架，用dart语言实现的，可以实现跨平台，一套代码可以在Android Ios Windows Max Linux系统运行；使用120fps，基于GPU渲染；

1.Widget

在flutter中一切都是Widget（和react里面一切都是组件好像），文字 图片 甚至路由都是Widget;

flutter的底层架构（在flutter官网上有）

1.主题风格：

我们的主题风格可以分为Material和Cupertino是两种风格的主题包（前者是android后者是ios），风格是可以选择的，你也可以直接用基础的组件也是可以的；

基础组件：https://flutterchina.club/widgets/

Material：https://flutterchina.club/widgets/material/

Cupertino：https://flutterchina.club/widgets/cupertino/

Text 文本

Text(
　　'文本',
　　style:TextStyle(fontSize:10.0,color:Colors.red,fontWeight:FontWeight[500]，fontFamily：'字体类型'),//文本类型颜色之类的
　　textAlign:TextAlign.center,//文本居中
　　maxLines:2,//最多显示几行
    textDirection:TextDirection.rtl,//文本方向
    overflow:TextOverflow.ellipsis,//用省略号结尾
    softWrap:false,//是否自动换行
    textScaleFactor:20.0,//字体显示倍率
    locale//区域设置
)　

Image 图片

方法	释义
Image()	从ImageProvider中获取图片，从本质上看，下面的几个方法都是他的具体实现。
Image.asset(String name)	从AssetBundler中获取图片
Image.network(String src)	显示网络图片
Image.file(File file)	从File中获取图片
Image.memory(Uint8List bytes)	从Uint8List中显示图片

　　可以有这几种获取图片的方法，那么里面数据主要有哪几个呢

 Image(
      10.0,
      height:10.0,
      color: Colors.greenAccent,
      colorBlendMode: BlendMode.colorBurn,//和color混合使
      alignment: Alignment.center, //居中
      repeat: ImageRepeat.noRepeat//重复
 )

Icon 图标 官方图标：https://material.io/tools/icons/?icon=favorite_border&style=baseline

Icon(
  Icons.ac_unit,
  color:Colors.red,
  size:10.0,
)

TextField 输入框

TextField(
 TextEditingController controller, //控制正在编辑的文本
 FocusNode focusNode, //是否具有键盘焦点
 InputDecoration decoration: const InputDecoration(), //样式
 TextInputType keyboardType,//键盘类型
 TextInputAction textInputAction, //控制键盘的功能键 指enter键，比如此处设置为next时，enter键 显示的文字内容为 下一步
 TextStyle style, //文字样式
 TextAlign textAlign: TextAlign.start, //文字位置
 TextDirection textDirection, //文字下划线
 bool autofocus: false, //是否自动获取焦点
 bool obscureText: false, //隐藏文本输入内容 用 圆点 符号代替
 bool autocorrect: true, //是否自动更正
 int maxLines: 1,//显示行数 
 int maxLength, //限制长度
 bool maxLengthEnforced: true, //如果这个为false那么maxLength设置了也没有用
 onChanged:(){},//改变事件 
 onEditingComplete,//编辑完成事件
 onSubmitted, //提交事件
 inputFormatters, //限制输入的文字的格式
 bool enabled, //是否可编辑
 double cursorWidth: 2.0,//光标宽度 
 Radius cursorRadius, //光标圆角
 Color cursorColor,//光标颜色
 Brightness keyboardAppearance, 
 EdgeInsets scrollPadding: const EdgeInsets.all(20.0), 
 DragStartBehavior dragStartBehavior: DragStartBehavior.down, 
 bool enableInteractiveSelection, 
 onTap:(){},//点击事件 
)

Row：行 Column：列（如果你的内容超出了Row或者column的宽度或者高度，那么会报错页面会显示黄黑条纹，证明溢出了）

 Row(
    Key key, 
    MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, //主轴的对齐方向 水平是主轴
    MainAxisSize mainAxisSize: MainAxisSize.max, //布局的宽高值
    CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, //非主轴的对齐方式
    TextDirection textDirection, //Row 子级的排列顺序
    VerticalDirection verticalDirection: VerticalDirection.down,//Column 子级的排列顺序 
    TextBaseline textBaseline, //子组件对齐的，只不过对齐的是字符的基线
    List<Widget> children: const <Widget> []//放置自己
)

Flex：弹性布局允许子widget按照一定比例来分配父容器空间（和Row、Column类似）

 Flex(
  Key key, 
  Axis direction, //样式 边框之类的
  MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, 
  MainAxisSize mainAxisSize: MainAxisSize.max, 
  CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, 
  TextDirection textDirection, 
  VerticalDirection verticalDirection: VerticalDirection.down, 
  TextBaseline textBaseline, 
  List<Widget> children: const <Widget> []//子级
)

Expand：可以按比例“扩伸”Row、Column和Flex子widget所占用的空间。

Expanded(
  Key key, 
  int flex: 1, 
  Widget child
)

Wrap和Flow：支持流式布局，可以在要溢出的时候自动换行（Wrap对比Row Flow对比Column Flow尽量少用，因为太过复杂了）

Wrap(
 Key key, 
 Axis direction: Axis.horizontal, 
 WrapAlignment alignment: WrapAlignment.start,
 double spacing: 0.0, //主轴方向子widget的间距
 WrapAlignment runAlignment: WrapAlignment.start, 
 double runSpacing: 0.0, //纵轴方向的间距
 WrapCrossAlignment crossAxisAlignment: WrapCrossAlignment.start, 
 TextDirection textDirection, 
 VerticalDirection verticalDirection: VerticalDirection.down, 
 List<Widget> children: const <Widget> []//子级
)

Stack Positioned ：层叠（经常一块使用）

Stack(
   Key key, 
   AlignmentGeometry alignment: AlignmentDirectional.topStart, //如何去对齐没有定位
   TextDirection textDirection, 
   StackFit fit: StackFit.loose, //用于决定没有定位的子widget如何去适应Stack的大小
   Overflow overflow: Overflow.clip, //决定如何显示超出Stack显示空间的子widget
   List<Widget> children:[
     Image('src'),
     Positioned(
       Key key, 
       double left, 
       double top, 
       double right, 
       double bottom, 
       double width, 
       double height, 
       Widget child
     )
  ]
)

Container：容器

          Container(
            Key key, 
            AlignmentGeometry alignment,//子级对齐 
            EdgeInsetsGeometry padding, 
            Color color, //颜色
            Decoration decoration,// 背景装饰
            Decoration foregroundDecoration, //前景装饰
            double width, 
            double height, 
            BoxConstraints constraints, //容器大小的限制条件
            EdgeInsetsGeometry margin, 
            Matrix4 transform, //变换
            Widget child
          )

ConstrainedBox：限制容器

ConstrainedBox(
  Key key, 
  constraints: BoxConstraints(
    minWidth: double.infinity, //宽度尽可能大
    minHeight: 50.0 //最小高度为50像素
  ),
  Widget child
)

BoxDecoration：装饰容器

BoxDecoration(
  Color color, //颜色
  DecorationImage image, //图片
  BoxBorder border, //边框
  BorderRadiusGeometry borderRadius, //圆角
  List<BoxShadow> boxShadow, //阴影
  Gradient gradient, 
  BlendMode backgroundBlendMode, 
  BoxShape shape: BoxShape.rectangle
)

ListView：水平列表

ListView(
  Key key, 
  Axis scrollDirection: Axis.vertical, //水平列表还是垂直列表
  bool reverse: false, //翻转
  ScrollController controller, 
  bool primary, 
  ScrollPhysics physics, 
  bool shrinkWrap: false, //是否根据子widget的总长度来设置ListView的长度
  EdgeInsetsGeometry padding, 
  double itemExtent, //控制子控件在滚动方向上的长度，所以它跟scrollDirection是密切相关的
  bool addAutomaticKeepAlives: true, 
  bool addRepaintBoundaries: true, 
  bool addSemanticIndexes: true, 
  double cacheExtent, 
  List<Widget> children: const <Widget> [], 
  int semanticChildCount, 
  DragStartBehavior dragStartBehavior: DragStartBehavior.down
)

GridView：类似表格的那种布局

GridView(
  Key key, 
　gridDelegate:SliverDelegateWithFixedCrossAxiaCount(
　　crossAxisCount:2,//横轴两个子级
　　childAspextRatio:1.0//宽高比为1
　　mainAxisSpacing:0.0,//主轴间隔
　　crossAxisSpacing:0.0,//横轴间隔
  )，
  Axis scrollDirection: Axis.vertical, //水平还是垂直
  bool reverse: false, //翻转
  ScrollController controller, 
  bool primary, 
  ScrollPhysics physics, 
  bool shrinkWrap: false, 
  EdgeInsetsGeometry padding, 
  SliverGridDelegate gridDelegate, 
  bool addAutomaticKeepAlives: true, 
  bool addRepaintBoundaries: true, 
  bool addSemanticIndexes: true, 
  double cacheExtent, 
  List<Widget> children: const <Widget> [], 
  int semanticChildCount
)

GestureDetector：手势（交互事件在这里面都有）

GestureDetector(
  Key key, 
　Widget child, 
  (TapDownDetails) → void onTapDown, 
  (TapUpDetails) → void onTapUp, 
  () → void onTap, 
  () → void onTapCancel, 
  () → void onDoubleTap, 
  () → void onLongPress, 
  () → void onLongPressUp, 
  (GestureLongPressDragStartDetails) → void onLongPressDragStart, 
  (GestureLongPressDragUpdateDetails) → void onLongPressDragUpdate, 
  (GestureLongPressDragUpDetails) → void onLongPressDragUp, 
  (DragDownDetails) → void onVerticalDragDown, 
  (DragStartDetails) → void onVerticalDragStart, 
  (DragUpdateDetails) → void onVerticalDragUpdate, 
  (DragEndDetails) → void onVerticalDragEnd, 
  () → void onVerticalDragCancel, 
  (DragDownDetails) → void onHorizontalDragDown, 
  (DragStartDetails) → void onHorizontalDragStart, 
  (DragUpdateDetails) → void onHorizontalDragUpdate, 
  (DragEndDetails) → void onHorizontalDragEnd, 
  () → void onHorizontalDragCancel, 
  (ForcePressDetails) → void onForcePressStart, 
  (ForcePressDetails) → void onForcePressPeak, 
  (ForcePressDetails) → void onForcePressUpdate, 
  (ForcePressDetails) → void onForcePressEnd, 
  (DragDownDetails) → void onPanDown, 
  (DragStartDetails) → void onPanStart, 
  (DragUpdateDetails) → void onPanUpdate, 
  (DragEndDetails) → void onPanEnd, 
  () → void onPanCancel, 
  (ScaleStartDetails) → void onScaleStart, 
  (ScaleUpdateDetails) → void onScaleUpdate, 
  (ScaleEndDetails) → void onScaleEnd, 
  HitTestBehavior behavior, 
  bool excludeFromSemantics: false, 
  DragStartBehavior dragStartBehavior: DragStartBehavior.down
)

StatelessWidget和StatefulWidget

1.StatelessWidget:无中间状态变化的widget，需要更新展示内容就得通过重新new，flutter推荐尽量使用StatelessWidget

2.StatefullWidget:存在中间状态变化，那么问题来了，widget不是都immutable的，状态变化存储在哪里？flutter 引入state的类用于存放中间态，通过调用state.setState()进行此节点及以下的整个子树更新

二、注意

1.在dart中如果需要将变量变成私有的可以在变量名字前面加下划线 _name 就可以了；

2.有的组件具有点击效果比如LnkWall 有一个onTap表示点击，但是有的并没有点击函数。所以我们可以把这个组件放到手势里面；

三、理解

1.几种移动端开发的技术对比

　　React Native   是接近原生；     　　　　　　　　　　需要些适配代码；   　　　　　　60fps（帧）

　　Html5　　　　就是嵌入页面；　　　　　　　　　　 需要适配代码；　　　

　　Flutter　　　　可以和原生开发一致甚至超过原生；    不需要直接一套代码就可以了；  120fps （帧） 基于C++开发 原生的是基于Java开发的

2.引入dart文件或者包

<1>.import 组件路径 show 需要导入的组件名称；//本地组件 只引入组件名字的，如果没有写名字那么就是全部引入

<2>.import 'package:包名称'；//要引入的dart文件

　　在pubspec.yaml文件中将包的版本写上，就可以了

1 dependencies:
2   flutter:
3     sdk: flutter
4   cupertino_icons: ^0.1.2
5   http : ^0.12.0
6   dio: ^2.1.0
7   date_range_picker: ^1.0.5

<3>.一个dart文件作为另一个文件的一部分

在父中：part './book/Featured.dart';

在子中：part of '../book.dart';

3.数据交互

第一种方法

import 'package:http/http.dart' as http;//包
import 'dart:convert';//包
class GetData extends StatefulWidget{
  _StateGetData createstate()=>_StateGetData() 
}
class _StateGetData extends State<GetData>{
    Future _getDataInfo() async{
    final url=Uri.http('10.0.2.2:8081','/home',{'mark':'春季特惠房间','address':widget.mark});
    final result=await http.get(url);
    setState((){
      data=json.decode(result.body).toList();
    });
  }
  @override
  void initState(){
    super.initState();
    _getDataInfo();
  }
  Widget build(BuildContext context){
     return Container()    
  }    
}

第二种方法

import 'package:http/http.dart' as http;//包
import 'dart:convert';//包
class GetData extends StatefulWidget{
  _StateGetData createstate()=>_StateGetData() 
}
class _StateGetData extends State<GetData>{
    _getDataInfo(){
    final url=Uri.http('10.0.2.2:8081','/home',{'mark':'春季特惠房间','address':widget.mark});
    final result=http.get(url);
    return result
  }
  @override
  Widget build(BuildContext context){
    FutureBuilder(
      future:_getDataInfo(),
      builder:(BuildContext context,snap){
        return snap.data
      }
    )
     return Container()    
  }    
}

4.路由

main.dart

return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(title: '应用程序首页'),
      routes: <String, WidgetBuilder> {
        '/a': (BuildContext context) => new MyPage(title: 'A 页面'),
        '/b': (BuildContext context) => new MyPage(title: 'B 页面'),
        '/c': (BuildContext context) => new MyPage(title: 'C 页面')
      },
);

1.page1-page2

page1

Navigator.pushNamed(context,'/page2')

2.page1-page2带参数

page1

Navigator.of（(context).push(MaterialPageRoute(
  builder: (context) {
   return new Page2("传入跳转参数");
 }
));

3.page2-page1带参数

page2

Navigator.of(context).pop("我是来自dymamic 关闭的返回值");

 5.flutter底层渲染

我们在开发android或者ios的时候用的语言是不一样，但是最终的图形计算和绘制都是由相应的硬件来完成，而直接操作硬件的指令通常都会有操作系统屏蔽，应用开发者通常不会直接面对硬件，操作系统屏蔽了这些底层硬件操作后会提供一些封装后的API供操作系统之上的应用调用，但是对于应用开发者来说，直接调用这些操作系统提供的API是比较复杂和低效的，因为操作系统提供的API往往比较基础。

Flutter的原理正是如此，它提供了一套Dart API，然后在底层通过OpenGL这种跨平台的绘制库（内部会调用操作系统API）实现了一套代码跨多端。由于Dart API也是调用操作系统API，所以它的性能接近原生。

6.Element和BuildContext的区别

根据Widget生成Element，然后创建相应的RenderObject并关联到Element.renderObject属性上，最后再通过RenderObject来完成布局排列和绘制。

四、资料

1.官网：https://flutter.dev/

2.中文网站：https://flutterchina.club/

3.dart package:https://pub.dartlang.org/

4.Icon:https://material.io/tools/icons/?icon=favorite_border&style=baseline

5.数据可以放在firebase