flutter 起步

flutter

简介

Flutter是谷歌的移动UI框架，可以运行在ios与android系统上，可以以完成app的开发，

使用情况

页面大多数涉及到flutter 开发的app 都是混合开发，占比并不多。基本上都是原生+Flutter的混合开发模式，不是使用纯Flutter开发的

起步

基于dart

dart 不用单独安装，flutter 会自带环境，且dart 语言较简单，可以在flutter的使用中学习

安装环境

window 安装教程

flutter中文官网

mac 安装教程

flutter中文官网

安装完成后解压到非高权限路径，在讲环境变量配置到path中

example.png

Flutter安装目录的flutter文件下找到flutter_console.bat

example1.png

注意点：

官网下载flutter包完成将安装包zip解压到你想安装Flutter SDK的路径（如：C:\src\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program Files\）。

安装完成后-需要安装as（Android studio）

运行 flutter doctor 检查环境缺失的依赖

example2.png

根据错误提示安装相对应依赖与工具

如何引用并安装第三方库

pubspec.yaml管理第三方库

在pubspec.yaml中添加第三方库名称及版本号。

例如添加第三方库english_words

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

拉取声明的第三方库到本地工程

flutter packages get

总结：在pubspec.yaml声明需要引用的库，执行命令flutter packages get进行拉取即可使用。

在代码中引用第三方库并使用

针对english_words这个第三方库来讲，具体使用参见如下代码

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text('Hello World'), // Replace the highlighted text...
          child: new Text(wordPair.asPascalCase),  // With this highlighted text.
        ),
      ),
    );
  }
}

Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的

在Dart语言中使用下划线前缀标识符，会强制其变成私有的。

子类重写超类的方法，要用@override

1. 继承(extends)

Flutter中的继承和Java中的继承是一样的：

Flutter中的继承是单继承

构造函数不能继承

子类重写超类的方法，要用@override

子类调用超类的方法，要用super

Flutter中的继承也有和Java不一样的地方：

Flutter中的子类可以访问父类中的所有变量和方法，因为Flutter中没有公有、私有的区别

上下文对象是整个APP Widget树结构中的Widget话柄，每个Wideget对应的都有属于自己的BuildContext。BuildContext还提供了一组方法，这些方法能够在StatelessWidget.build 函数中被当前的上下文环境调用。比如 Navigator.pushNamed(context, '/');

当部件Widget在StatelessWidget.build函数被返回时，这个部件会成为父部件。所以这意味着StatelessWidget.build方法中的context和函数内部部件Widegt的context不是同一个上下文。所以它们两个不同上下文能够调用的方法是有区别的。这就是这个问题关键的所在。

MaterialApp：

什么是MaterialApp

MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的html标签，且它自带路由、主题色，title等功能。

22个参数

字段类型navigatorKey（导航键）

GlobalKey<NavigatorState>home（主页）Widgetroutes（路由）Map<String, WidgetBuilder>initialRoute（初始路由）StringonGenerateRoute（生成路由）RouteFactoryonUnknownRoute（未知路由）RouteFactorynavigatorObservers（导航观察器）List<NavigatorObserver>builder（建造者）TransitionBuildertitle（标题）StringonGenerateTitle（生成标题）GenerateAppTitlecolor（颜色）Colortheme（主题）ThemeDatalocale(地点)LocalelocalizationsDelegates（本地化委托）Iterable<LocalizationsDelegate<dynamic>>localeResolutionCallback（区域分辨回调）LocaleResolutionCallbacksupportedLocales（支持区域）Iterable<Locale>debugShowMaterialGrid（调试显示材质网格）boolshowPerformanceOverlay（显示性能叠加）boolcheckerboardRasterCacheImages（棋盘格光栅缓存图像）boolcheckerboardOffscreenLayers（棋盘格层）boolshowSemanticsDebugger（显示语义调试器）booldebugShowCheckedModeBanner（调试显示检查模式横幅）bool

1. navigatorKey

navigatorKey.currentState

相当于

Navigator.of(context)

2. home （WidgetsApp不支持）

进入程序后显示的第一个页面,传入的是一个Widget，但实际上这个Widget需要包裹一个Scaffold以显示该程序使用Material Design风格

3. routes（WidgetsApp不支持）

声明程序中有哪个通过Navigation.of(context).pushNamed跳转的路由

参数以键值对的形式传递

key:路由名字

value:对应的Widget

4. initialRoute

初始路由，当用户进入程序时，自动打开对应的路由。

(home还是位于一级)

传入的是上面routes的key

跳转的是对应的Widget（如果该Widget有Scaffold.AppBar,并不做任何修改，左上角有返回键）

5. onGenerateRoute

当通过Navigation.of(context).pushNamed跳转路由时，

在routes查找不到时，会调用该方法

6. onUnknownRoute

效果跟onGenerateRoute一样

调用顺序为onGenerateRoute ==> onUnknownRoute

7. navigatorObservers

路由观察器，当调用Navigator的相关方法时，会回调相关的操作

8. builder

当构建一个Widget前调用

一般做字体大小，方向，主题颜色等配置

9. title

该标题出现在

Android：任务管理器的程序快照之上

IOS: 程序切换管理器中

10. onGenerateTitle

跟上面的tiitle一样，但含有一个context参数

用于做本地化

11. color

该颜色为Android中程序切换中应用图标背景的颜色，当应用图标背景为透明时

12. theme（WidgetsApp不支持）

应用程序的主题，各种的定制颜色都可以设置，用于程序主题切换

 theme: new ThemeData(
       //主题色
        primarySwatch: Colors.blue,
      ),

13. locale

当前区域，如果为null则使用系统区域

一般用于语言切换

14. localizationsDelegates

本地化委托，用于更改Flutter Widget默认的提示语，按钮text等

15. localeResolutionCallback

当传入的是不支持的语种，可以根据这个回调，返回相近,并且支持的语种

16. supportedLocales

传入支持的语种数组

17. debugShowMaterialGrid（WidgetsApp不支持）

debug模式下是否显示材质网格，传入bool类型

18. showPerformanceOverlay

当为true时应用程序顶部覆盖一层GPU和UI曲线图，可即时查看当前流畅度情况

19. checkerboardRasterCacheImages

当为true时，打开光栅缓存图像的棋盘格

20. checkerboardOffscreenLayers

当为true时，打开呈现到屏幕位图的层的棋盘格

21. showSemanticsDebugger

当为true时，打开Widget边框，类似Android开发者模式中显示布局边界

22. debugShowCheckedModeBanner

当为true时，在debug模式下显示右上角的debug字样的横幅，false即为不显示

Scaffold 有下面几个主要属性：

appBar - 显示在界面顶部的一个 AppBar。

body - 当前界面所显示的主要内容 Widget。

floatingActionButton - Material 设计中所定义的 FAB，界面的主要功能按钮。

persistentFooterButtons - 固定在下方显示的按钮，比如对话框下方的确定、取消按钮。

drawer - 抽屉菜单控件。

backgroundColor - 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值。

bottomNavigationBar - 显示在页面底部的导航栏。

resizeToAvoidBottomPadding - 类似于 Android 中的 android:windowSoftInputMode='adjustResize'，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

1、在flutter里面，一切皆组件，在组件里面撑起flutter半边天的一个是无状态StatelessWidget组件，一个是有状态的StatefulWidget组件

2、常用组件

container:容器组件

Text:文本组件

Icon:图标组件

CloseButton:关闭按钮的组件

BackButton:返回按钮的组件

Chip:材料设计中非常有趣的一个组件

Divider：分割线的组件

Card：卡片状的容器组件

AlertDialog:一个弹框的组件

flutter问题：

Flutter通过将新的代码注入到正在运行的DartVM中，来实现Hot Reload这种神奇的效果，在DartVM将程序中的类结构更新完成后，Flutter会立即重建整个控件树，从而更新界面。但是热刷新也有一些限制，并不是所有的代码改动都可以通过热刷新来更新：

编译错误，如果修改后的Dart代码无法通过编译，Flutter会在控制台报错，这时需要修改对应的代码。

控件类型从StatelessWidget到StatefulWidget的转换，因为Flutter在执行热刷新时会保留程序原来的state，而某个控件从stageless→stateful后会导致Flutter重新创建控件时报错“myWidget is not a subtype of StatelessWidget”，而从stateful→stateless会报错“type ‘myWidget’ is not a subtype of type ‘StatefulWidget’ of ‘newWidget’”。

全局变量和静态成员变量，这些变量不会在热刷新时更新。

修改了main函数中创建的根控件节点，Flutter在热刷新后只会根据原来的根节点重新创建控件树，不会修改根节点。

某个类从普通类型转换成枚举类型，或者类型的泛型参数列表变化，都会使热刷新失败。

热刷新无法实现更新时，执行一次热重启（Hot Restart）就可以全量更新所有代码，同样不需要重启App，区别是restart会将所有Dart代码打包同步到设备上，并且所有状态都会重置。

Scaffold :

Scaffold 实现了基本的 Material Design 布局结构。在 Material 设计中定义的单个界面上的各种布局元素，在 Scaffold 中都支持。

Scaffold 有下面几个主要属性：

appBar - 显示在界面顶部的一个 AppBar。

body - 当前界面所显示的主要内容 Widget。

floatingActionButton - Material 设计中所定义的 FAB，界面的主要功能按钮。

persistentFooterButtons - 固定在下方显示的按钮，比如对话框下方的确定、取消按钮。

drawer - 抽屉菜单控件。

backgroundColor - 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值。

bottomNavigationBar - 显示在页面底部的导航栏。

resizeToAvoidBottomPadding - 类似于 Android 中的 android:windowSoftInputMode='adjustResize'，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

AppBar 有以下常用属性：

leading → Widget - 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮。

title → Widget - Toolbar 中主要内容，通常显示为当前界面的标题文字。

actions → List - 一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单。

bottom → PreferredSizeWidget - 一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏。

elevation → double - 控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值。

flexibleSpace → Widget - 一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用。

backgroundColor → Color - Appbar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用。

brightness → Brightness - Appbar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness。

iconTheme → IconThemeData - Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。

textTheme → TextTheme - Appbar 上的文字样式。

centerTitle → bool - 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。

toolbarOpacity → double

1.BottomNavigationBarType.fixed:（代表tab固定不变，也是默认格式）

(1).底部tab数： 不超过4个

(2).导航栏背景色，默认由Material 控件的ThemeData.canvasColor决定，具体实现可以看下面代码

2.BottomNavigationBarType.shifting（代表tab是浮动的）

(1).底部tab数： 至少4个以上

(2).导航栏背景色，由每个item自己定义