Flutter入门基础

Samlss 2019-12-15

Flutter是Google开发的一套全新的跨平台、开源UI框架(本质上就是sdk)。 支持iOS、Android系统,并且是Fuchsia系统的默认开发套件。桌面和web上的支持也都在实验中。
Flutter特点:跨平台(Flutter是Fuchsia的开发框架,同时支持Android、IOS),媲美原生性能,热重载(目前不支持热更新,但已加入2019工作计划)。

其官方编程语言为Dart熟悉Dart语言

入门网站:Flutter中文网 Flutter官网(英文)

1、工程基础简介
1.1 Dart导包规则

(1)导包dart库里面的包

import ‘dart:html‘;

(2)导入pubspec.yaml 的dependencies依赖的包

import ‘package:test/test.dart‘;

(3)导入路径包,base为flutter根目录

import ‘package:base/components/swiper.dart‘;

(4)只导入foo

import ‘package:lib1/lib1.dart‘ show foo;

(5)Im除了foo都导入

import ‘package:lib2/lib2.dart‘ hide foo;

(6)包里面存在标识符冲突

import ‘package:lib1/lib1.dart‘;
import ‘package:lib2/lib2.dart‘ as lib2;

(7)延迟加载(懒加载)允许应用程序在需要时加载库。以下是一些您可能使用延迟加载的情况:
   减少应用程序的初始启动时间。
   例如,执行A / B测试 - 试用算法的其他实现。
   加载很少使用的功能,例如可选的对话框。

import ‘package:greetings/hello.dart‘ deferred as hello;
1.2 工程配置文件:

Flutter项目中的pubspec.yaml文件相当于Android项目中的gradle文件,项目的信息以及依赖在此文件中声明。依赖包由pub包仓库管理:https://pub.dartlang.org/ ,未发布在pub包仓库的插件可以使用本地文件路径,甚至可以直接使用git项目地址。 参考:https://flutterchina.club/using-packages/

依赖冲突:用any来解决,会找到最合适的不冲突版本,再到 pubspec.lock中找到版本号替换,最终不要直接用any,是个风险。

#name很重要,如果修改了name所有的dart的文件的import前引用的本地的文件啊的包名都需要修改
name: flutterdemo
description: A new Flutter application.
 
dependencies:
  flutter:
    sdk: flutter
 
 #添加依赖packages 
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0
 # image_picker: ^0.4.8
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
  #启用国际化
  flutter_localizations:
    sdk: flutter
 
flutter:
 
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  # To add assets to your application, add an assets section, like this:
  #添加资源,不单单是图片,images是个和pubspec.yaml配置文件同级的目录,如果不同级,需要添加..
  assets:
        - images/park.jpg
        - images/lake.jpg
        - images/touxiang.jpg
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
   #字体设置
   fonts:
     - family: Schyler
       fonts:
       - asset: fonts/Schyler-Regular.ttf
        - asset: fonts/Schyler-Italic.ttf
           style: italic
     - family: Trajan Pro
       fonts:
      - asset: fonts/TrajanPro.ttf
      - asset: fonts/TrajanPro_Bold.ttf
        weight: 700
2、关于MaterialApp和Scaffold:

Flutter提供了两套不同风格的UI控件,分别是类Android风格的MaterialApp和类IOS风格的CupertinoApp。两种风格下面的widget不能完全通用,且Material风格的widget数量要多一些。

~ MaterialApp是Flutter提供给Android的一个基础widget,采用了材料设计风格。
经过实践,MaterialApp全局最好只有一个,作为主界面,app的主题、主页等全局设置可以在此定义。
最初按照官网教程每个page我都返回的MaterialApp,显示是没什么问题,因为都是widget,但是会出现卡顿和其他界面上的问题,大家可以自己试一下。

~ 子页面直接返回Scaffold,Scaffold是MaterialApp的布局实现,提供了appbar,floatingActionButton,drawer,bottomNavigationBar等MD风格的控件api。

Flutter默认会在debug模式下在右上角显示水印,去除方式

debugShowCheckedModeBanner: false
3、自定义控件。

Flutter框架给我们提供了StatelessWidget和StatefulWidget两个抽象类,用于自定义控件。
(1)StatelessWidget是‘‘无状态控件’’,不可变状态控件,通过构建其他控件来描述用户界面的一部分。必须实现build方法,返回一个widget对象。 Icon、 IconButton, 和Text等都是无状态widget, 他们都是 StatelessWidget的子类。
(2)StatefulWidget 是动态的. 用户可以和其交互 (例如输入一个表单、 或者移动一个slider滑块),或者可以随时间改变 (也许是数据改变导致的UI更新).Checkbox, Radio, Slider, Form, 和TextField 都是 stateful widgets, 他们都是 StatefulWidget的子类。

(3)自定义Widget:继承StatefulWidget,并重写createState()方法,返回一个State对象。
自定义无状态的widget:

class RedBoard extends StatelessWidget {
  const RedBoard({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.red
    );
  }
}

自定义可变状态的widget:

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return (new Text(wordPair.asPascalCase));
  }
}

(4)继承自CustomPaint画控件
Flutter也可以像Android中继承View的方式来绘制控件,通过继承CustomPaint类来实现,具体用法此处略。

4、TextField样式
decoration: new InputDecoration(
                  hintText: ‘input name to search‘,
                  border: InputBorder.none
              )

去掉下边框。
外面套上Container,加上装饰实现四面边框效果

decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.green, width: 1.0),
                borderRadius: BorderRadius.circular(4)),

注意:
在decoration中加了color属性,在Container中就不能加color属性,否则会出错。

TextField坑
软键盘resize窗口,解决方式:

In your `Scaffold`, set `resizeToAvoidBottomPadding` property to `false`.

preprefixIcon和suffixIcon如果使用系统提供的svg资源,需要指定颜色,不然在获取焦点时会变成不可见状态。

5、ListView

ListView的使用可以参考此文:https://blog.csdn.net/hao_m582/article/details/84112278

如果与其他widget放在同一个Column中,ListView外加Expanded才能正常显示。

可以用ListView作为滚动块,相当于android中的ScrollView效果,但是子view不是写在widget中,而是直接写在ListView的children属性中,如:

//...
body: new ListView(
  children: [
    new Image.asset(
      ‘images/lake.jpg‘,
      width: 600.0,
      height: 240.0,
      fit: BoxFit.cover,
    ),
    titleSection,
    buttonSection,
    textSection,
  ],
),
//..
6、加载图片与控件缩放

需要在pubspec.xml中配置图片路径,可以看上段代码片段。

assets:
        - images/park.jpg
        - images/lake.jpg
        - images/touxiang.jpg

其中images文件夹放在工程的根目录。加载图片可以直接使用AssertImage类,也可以使用Image.asset方法。
经过查找,flutter不完全支持svg,xml格式的VectorDrawable在flutter上无法直接加载
类似Android中ImageView的scaleType属性,flutter的Image控件也有其属性Boxfit,而且这个属性不仅仅适用于Image相关的Widget,FittedBox也具有此属性。
FittedBox会在自己的尺寸范围内缩放并且调整child位置,使得child适合其尺寸。
示例代码:

new Container(
  color: Colors.amberAccent,
  width: 300.0,
  height: 300.0,
  child: new FittedBox(
    fit: BoxFit.contain,
    alignment: Alignment.topLeft,
    child: new Container(
      color: Colors.red,
      child: new Text("FittedBox"),
    ),
  ),
)

看一下几种缩放方式的区别:


 
Flutter入门基础
image.png
7、Flutter构建布局实例

Flutter布局机制的核心是Widget。在Flutter中,几乎所有东西都是Widget - 甚至布局模型都是Widget。你在Flutter应用中看到的图像、图标和文本都是widget。 甚至你看不到的东西也是widget,例如行(row)、列(column)以及用来排列、约束和对齐这些可见widget的网格(grid)。

查看Flutter中文网的教程:在Flutter中构建布局

常用Widget
(1)Column和Row相对于Android中的LinearLayout,Column相对于Orientation.Vertical;Row相当于Orientation.Horizontal。

(2)ListView ,GridView与Android中的同名控件效果等同

ListTitle是Flutter封装好的在列表中显示的item控件,他有固定的显示格式,如下:
 
Flutter入门基础
ListTitle.jpg

(3)Stack相当于Android中的FrameLayout,但是它又具有RelativeLayout的一些属性。

(4)Card相当于Android中的CardView

(5)事件响应:Flutter并非为所有Widget都直接提供了点击,长按等事件响应,这时我们需要用 GestureDetector这个widget包裹需要响应事件的widget来实现功能。
GestureDetector提供了如下手势:
  Tap
  onTapDown 指针已经在特定位置与屏幕接触
  onTapUp 指针停止在特定位置与屏幕接触
  onTap tap事件触发
  onTapCancel 先前指针触发的onTapDown不会在触发tap事件
  双击
  onDoubleTap 用户快速连续两次在同一位置轻敲屏幕.
  长按
  onLongPress 指针在相同位置长时间保持与屏幕接触
  垂直拖动
  onVerticalDragStart 指针已经与屏幕接触并可能开始垂直移动
  onVerticalDragUpdate 指针与屏幕接触并已沿垂直方向移动.
  onVerticalDragEnd 先前与屏幕接触并垂直移动的指针不再与屏幕接触,并且在停止接触屏幕时以特定速度移动
  水平拖动
  onHorizontalDragStart 指针已经接触到屏幕并可能开始水平移动
  onHorizontalDragUpdate 指针与屏幕接触并已沿水平方向移动
  onHorizontalDragEnd 先前与屏幕接触并水平移动的指针不再与屏幕接触,并在停止接触屏幕时以特定速度移动。

(6)Button:Flutter提供了几种样式的按钮,分别为:
  FlatButton:扁平的,没有阴影效果的。
  RaisedButton:有阴影效果的。
  FloatingActionButton:悬浮按钮,类似Android上同名的控件。
  OutlineButton:线框按钮,带外边框的按钮。

(7)Expanded、Flexible:Expanded 这是个用来让子项具有伸缩能力的widget,继承自Flexible。它们两个的默认灵活系数是一样的,但是fit参数不同,Expanded是默认要占满分配的空间的,而Flexible则默认不需要。

(8)Ripple效果:Flutter中文网将InkWell翻译成“墨水飞溅”效果,其实看到效果后,我们马上就能联想到Android中的ripple效果。


 
Flutter入门基础
inkwell.gif

用法也是用InkWell套起想要达到效果的widget,具体属性查看源码注释。

下面用一个具体的例子介绍布局和其他可能用到的Widget:

 
Flutter入门基础
聊天.png

上图是常见的聊天列表样式,首先我们能想到的是整个界面是一个ListView,根据类型有左边和右边两种样式。由于flutter没有xml布局,所有界面都是通过widget搭积木一样,一层一层套起来的。

左侧的显示:最外层应该是一个Row,Row中包含了一个CircleAvatar(没错,这个Widget官方直接提供了)和一个Text。
怎样控制Text的背景样式:
首先想到的就是外层套一个可以设置样式的Container,通过给Container加一个decoration属性,一般使用BoxDecoration,可以为Container设置背景颜色,前景颜色,边框,圆角,图片等能满足大部分场景的样式。
问题出现了

 
Flutter入门基础
image.jpg

Text本身是支持文字自动换行的,Container本身如果没有父控件限制也是包裹的,但因为外面放了一个Row,就会出现溢出屏幕的问题。经过多番查找,我找到了一个Widget可以解决问题——Flexible,在Container外面套一个Flexible就能解决问题,此时需要注意的是,Flexible,Expanded等可以自适应的继承了Flex的控件,其父控件也必须是同类型。

接下来我们要控制文字的最长显示宽度,Container有一个属性是constraints,它的类型是BoxConstraints,这个Widget可以设置最小最大宽高,不限制的话就用double.infinity(无限)。在经过限制后,我们发现Flexible已经不需要了,因为宽度已经限制住了=.=|||。

//获取屏幕宽度的方法
double width = MediaQuery.of(context).size.width;

接下来我们按照Android中的理解,显示右侧头像的消息,就在Row中先加入一个Text,再加入一个CircleAvatar。没错,但是怎样居右显示呢?经过查询资料发现,Row通过textDirection属性可以设置方向,我们将属性设置成TextDirection.rtl,也就是rightToLeft,发现咦?怎么头像跑到前面去了?那我们再把头像代码移到前面,竟然对了。。也就说明,Row的绘制流程都是根据children中最先加入的子widget来绘制的。

输入框实现:
输入框首先要保持在界面底部,怎么实现呢?了解到官方提供了一个BottomAppBar,将其设置给Scaffold中的bottomNavigationBar属性。BottomAppBar的child给到一个Row控件,排列语音按钮IconButton,输入框TextField,更多按钮IconButton。TextField外部要嵌套一个Container修饰样式。运行后发现整个界面都无法显示,而注释掉TextField就可以显示,由此想到应该是TextField的宽度不正常导致的,使用万能控件Flexible套在TextField的父级Container外后显示正常。
接下来试试输入文字,又出现坑了!BottomAppBar在输入法弹出时无法自动上移,确定了resizeToAvoidBottomPadding设置为true的情况依然无法解决问题后,只好找其他方式。在stackoverflow上找到了另一种方案:将最下面的输入布局连同ListView都放入Scaffold的body中,ListView外加上Expanded伸缩,最外层一个Container包裹,运行完美,代码如下:

@override
  Widget build(BuildContext context) {
    _getConversations();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(mIsGroup
            ? mConversation.groupBean.groupName
            : mConversation.contactBean.nickName != null
                ? mConversation.contactBean.nickName
                : mConversation.contactBean.pin),
        elevation: 0.5,
        actions: <Widget>[
          new IconButton(
              icon: new Icon(
                mIsGroup ? Icons.group : Icons.person,
                size: 24,
                color: Colors.black54,
              ),
              onPressed: _goContactInfo),
        ],
      ),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            child: _buildConversations(),
          ),
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.keyboard_voice), onPressed: null),
              Flexible(
                child: Container(
                    height: 40,
                    margin: EdgeInsets.fromLTRB(10, 6, 10, 6),
                    padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(
                        color: Colors.black12,
                        width: 0.5,
                        style: BorderStyle.solid,
                      ),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: ‘输入内容‘, border: InputBorder.none),
                    )),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
                child: IconButton(icon: Icon(Icons.add_circle_outline),onPressed: null,),
              )
            ],
          ),
        ],
      ),
    );
  }

到此,就实现了图中所示效果。
下面是item的布局代码:

Widget _msgHolder(MessageBean message, BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double _maxWidth = width * 0.65;
    return Row(
      textDirection: message.from.pin == myInfo.pin?TextDirection.rtl:TextDirection.ltr,
      children: <Widget>[
        CircleAvatar(
          backgroundImage: AssetImage(message.from.avatarUrl == null
              ? "assets/drawable/ava_group.png"
              : message.from.avatarUrl),
        ),
        GestureDetector(
            onLongPress: () {
              _showList(options);
            },
            child: Container(
              constraints: BoxConstraints(
                  minWidth: 0,
                  maxWidth: _maxWidth,
                  minHeight: 0,
                  maxHeight: double.infinity),
              margin: EdgeInsets.fromLTRB(10, 5, 5, 10),
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(
                  color: Colors.green,
                  width: 0.5,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.circular(4),
              ),
              child: Text(
                _getMessage(message),
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),
            )),
      ],
    );
  }

Widget的显示与隐藏
Flutter知识点: Widget隐藏与显示

8、Toast和Dialog

在聊天中,常见操作是长按消息,弹出一个具有选项的Dialog,那么在Flutter中如何显示常见的Toast和Dialog呢?
由于Flutter提供给安卓的大部分Widget都是基于Material设计的,所以Flutter并没有提供Toast控件,而是提供了SnackBar

//SnackBar的显示
Scaffold.of(context).showSnackBar(SnackBar(
     content: Text("长按消息"),
));

SnackBar不止能够显示Text,还可以任意加入widget。
此处有坑:
关于上段代码中的context(BuildContext),你在任何方法里都可以取到context,但是运行起来很可能会遇到context为null的情况,那么就需要传入一个经过了实例化的BuildContext。比如Scaffold中或者ListView.builder中的context,传给SnackBar即可。

Dialog:
Flutter为Android提供了Dialog,AlertDialog,SimpleDialog三种常用对话框。想要实现我们的需求用SimpleDialog刚合适,效果如下:

 
Flutter入门基础
弹窗.jpg
showDialog<int>(
        context: context,
        builder: (BuildContext context) {
          return new SimpleDialog(
            children: options.map((value) {
              return new SimpleDialogOption(
                onPressed: () {
                  Navigator.pop(
                      context,
                      options.indexOf(
                          value)); //here passing the index to be return on item selection
                },
                child: new Text(
                  value,
                  style: TextStyle(
                    fontSize: 16,
                  ),
                ), //item value
              );
            }).toList(),
          );
        })
9、数据存储

Flutter知识点:数据存储之SharedPreferences
Flutter知识点:数据存储之File
Flutter知识点:数据存储之sqflite
官网sqflite页面
下面的字段不能用于表的属性名称

"add","all","alter","and","as","autoincrement","between","case","check","collate","commit","constraint","create","default","deferrable","delete","distinct","drop","else","escape","except","exists","foreign","from","group","having","if","in","index","insert","intersect","into","is","isnull","join","limit","not","notnull","null","on","or","order","primary","references","select","set","table","then","to","transaction","union","unique","update","using","values","when","where"
10、Flutter常用插件
audio_recorder: any #录音、播放
  flutter_sound: ^1.1.5#录音
  dropdown_menu: ^1.1.0#下拉菜单
  simple_permissions:#权限获取
  easy_alert:#弹框
  amap_location: any #高德地图
  location: any #gogle位置获取
  barcode_scan 0.0.8#二维码识别qr_mobile_vision: ^0.1.0 #二维码识别 这个不好用
  flutter_screenutil: ^0.3.0#屏幕适配工具类  
  flutter_spinkit: ^2.1.0#加载等待框
  lpinyin: ^1.0.6#汉字转拼音
  shimmer: ^0.0.4#微光效果控件
  qr_flutter: ^1.1.3#二维码生成
  url_launcher: any#启动URL的Flutter插件。支持网络,电话,短信和电子邮件
  datetime_picker_formfield: ^0.1.3#时间选择控件
  flutter_picker: ‘^1.0.0‘#选择器
  common_utils: ‘^1.0.1‘#工具类 时间、日期、日志等
  flutter_html: ‘^0.8.2‘#静态html标记呈现为Flutter小部件
  fluwx: ‘^0.3.0‘#微信支付、分享、登录
  tobias: ‘^ 0.0.6#支付宝
  cupertino_icons: ‘^0.1.2‘#小图标控件
  http: ‘^0.11.3+16‘#网络请求
  html: ‘^0.13.3‘#html解析
  image_picker: ‘^0.4.5‘#图片选择(相册或拍照)
  flutter_webview_plugin: any#webview展示
  fluttertoast: any#toast提示框
  shared_preferences: ‘^0.4.2‘#shared_preferences存储
  transparent_image: ‘^0.1.0‘#透明图片控件
  flutter_swiper : ‘^1.0.2‘#轮播图
  charts_flutter: ‘^0.4.0‘#统计图表
  path_provider: ‘^0.4.1‘#获取系统文件
  cached_network_image: ‘0.4.1‘#加载网络图片并本地缓存
  sqflite: ‘^0.11.0+1‘#sqllite数据库操作
  pull_to_refresh: ‘^1.1.5‘#下拉刷新上拉加载更多
  video_player: ‘0.6.1‘#视频播放
  collection: ‘1.14.11‘#集合操作工具类
  device_info: ‘0.2.1‘#获取手机信息
  flutter_svg: ‘^0.3.2‘#展示svg图标控件
  intl: any#国际化工具类
  connectivity: ‘0.3.1‘#链接网络
  flutter_staggered_grid_view:#瀑布流展示控件
  flutter_file_manager:#文件管理
  loader_search_bar:#导航栏搜索控件
  flutter_image_compress : any#图片压缩
  ota_update : any#App下载更新
  flutter_slidable:#item侧滑控件

相关推荐