Flutter 入门

一、需要掌握的基础知识

1. Dart 基础知识

异步

async await
Future
Stream

网站推荐

https://www.dartlang.org
http://dart.goodev.org
https://pub.dartlang.org （dart包管理平台）

2. Android Studio 或 VS Code

工欲善其事，必先利其器

3. 一定 Android / iOS 基础

制作原生扩展

二、快速搭建一个 Flutter 项目

1. 命令行搭建

flutter create your_app_name

2.启动 Flutter 项目

cd your_app_name
flutter run

3.启动设备

flutter run -d '设备ID'

三、Flutter 项目安装第三方包

1. 去官网搜索

网址：https://pub.dev/

2. 找到指定饱，填写依赖

// 以 flutter_color_plugin 为例
// 在 pubspec.yaml 文件中填写依赖
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  # 颜色插件[手动安装]
  flutter_color_plugin: ^0.0.2

3.执行依赖安装

flutter packages get

我是用 VS Code 修改 pubspec.yaml 文件时，会自动执行安装

4.引入

import 'package:flutter_color_plugin/flutter_color_plugin.dart';

四、StatelessWidget组件与基础组件

无状态组件

常用组件

Container 容器
Text 文本
Icon 图标
CloseButton 关闭按钮
BackButton 返回按钮
Chip 套文字
Divider 分割线
Card 卡片
AlertDialog 弹窗

五、StatefulWidget 组件与基础组件

有状态组件

常用组件

MaterialApp 材料设计App 页面根接点
Scaffold
AppBar 顶部导航
ButtomNavigationBar 底部导航
RefreshIndicator 刷新组件
Image 图片
TextField
PageView

六、Flutter 布局开发

与布局相关的组件

Container
RenderObjectWidget
1. SingleChildRenderObjectWidget
2. MultiChildRenderObjectWidget
  - stack 叠罗汉
  - Flex
    1. Column
    2. Row
PrentDataWidget
- Positioned
- Flexible
  - Expanded

七、Flutter 中使用路由导航

方式一：在 MaterialApp 加路由 routes

return MaterialApp(
      title: 'Flutter Demo',
      routes: <String, WidgetBuilder>{
        'plugin': (BuildContext context) => PluginUse(),
        'less': (BuildContext context) => LessGroupPage(),
        'state': (BuildContext context) => StateFullGroup(),
        'layout': (BuildContext context) => FlutterLayoutPage(),
      },
    );

// 通过路由跳转
Navigator.pushNamed(context, 'layout');

方式二：直接跳转

page = FlutterLayoutPage();
Navigator.push(context, MaterialPageRoute(builder: (context) => page));

页面返回: 在 appBar 中增加 leading

appBar: AppBar(
  title: Text('StatelessWidget组件与基础组件'),
  leading: GestureDetector(
    onTap: () {
      Navigator.pop(context);
    },
    child: Icon(Icons.arrow_back), // 导航栏返回按钮
  ),
),

八、Flutter 手势监听与点击事件

主要是 GestureDetector 来做点击和手势操作监听

GestureDetector(
  onTap: () {
    _printMsg('单击');
  },
  onDoubleTap: () {
    _printMsg('双击');
  },
  onLongPress: () {
    _printMsg('长按');
  },
  onTapCancel: () {
    _printMsg('点击取消');
  },
  onTapUp: (e) {
    _printMsg('松开');
  },
  onTapDown: (e) {
    _printMsg('按下');
  },
  onPanUpdate: (e) {
    _printMsg('持续更新');
  },
  child: Container(
    padding: EdgeInsets.all(60),
    decoration: BoxDecoration(color: Colors.blue),
    child: Text(
      '点我',
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
),

九、导入和使用 Flutter 资源文件

第一步：修改 pubspec.yaml 文件

assets:
    - images/leimu.jpeg

第二步：引用

Image(
  width: 400,
  // height: 100,
  image: AssetImage('images/leimu.jpeg'),
)

十、打开第三方APP

url_launcher 类库

第一步：增加依赖

// 修改 pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  # 打开第三方APP插件
  url_launcher: ^5.1.2

第二步：安装类库

略

第三步：使用


// 引入文件类库
import 'package:url_launcher/url_launcher.dart';

// 打开浏览器
_launchURL() async {
  const url = 'https://www.baidu.com';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

// 打开地图App
_openMap() async {
  // android
  const url = 'geo:';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    // iOS
    const url = 'http://maps.apple.com/?ll=52.32.4.917';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw '不能打开 $url';
    }
  }
}

十一、Flutter 组件的生命周期

/// Flutter 组件的生命周期
/// Widget StatelessWidget 只有 createElement 和 build 两个生命周期方法
/// StatefulWidget 的生命周期方法按照时期不同可以分三组
/// 1.初始化时期
/// createState/initState
/// 2.更新时期
/// didChangeDependence/build/didUpdateWidget
/// 3.销毁时期
/// deactivate/dispose

@override
void initState() {
  print('------initState-----');
  super.initState();
}

@override
Widget build(BuildContext context) {
  print('------build-----');
}

@override
void dispose() {
  print('------dispose-----');
  super.dispose();
}

十二、Flutter App 声明周期

/// 如何获取 Flutter 应用纬度生命周期

/// WidgetsBindingObserver：是一个 Widget 绑定观察器，通过它我们可以监听应用的生命周期

// 当APP状态
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
  super.didChangeAppLifecycleState(state);
  print('state = $state');
  if (state == AppLifecycleState.paused) {
    print('APP 进入后台');
  } else if (state == AppLifecycleState.resumed) {
    print('App 进入前台');
  } else if (state == AppLifecycleState.inactive) {
    // 不常用，应用非活动状态，未接到用户输入，如：接电话
    print('应用非活动状态');
  } else if (state == AppLifecycleState.suspending) {
    // 不常用，App 挂起
    print('App 挂起');
  }
}

十三、Flutter APP 主题修改

Brightness _brightness = Brightness.light;

// 主题
theme: ThemeData(
  fontFamily: 'AliLight', // 全局设置
  brightness: _brightness,
  primarySwatch: Colors.blue,
),

// 切换主题按钮
RaisedButton(
  onPressed: () {
    setState(() {
      _brightness = _brightness == Brightness.dark
        ? Brightness.light
        : Brightness.dark;
    });
  },
  child: Text('切换主题'),
),

十四、Flutter 设置字体

// 下载字体，放到路径下 fonts 文件夹中
// 修改 pubspec.yaml 文件  
fonts:
- family: AliLight
  fonts:
- asset: fonts/Ali-Light.ttf
  style: italic

使用字体

// 全局设置字体
theme: ThemeData(
  fontFamily: 'AliLight', // 全局设置
  brightness: _brightness,
  primarySwatch: Colors.blue,
),
// 局部使用
TextStyle(fontFamily: 'AliLight')

# Flutter 入门

# 一、需要掌握的基础知识

# 1. Dart 基础知识

# 异步

# 网站推荐

# 2. Android Studio 或 VS Code

# 3. 一定 Android / iOS 基础

# 二、快速搭建一个 Flutter 项目

# 1. 命令行搭建

# 2.启动 Flutter 项目

# 3.启动设备

# 三、Flutter 项目安装第三方包

# 1. 去官网搜索

# 2. 找到指定饱，填写依赖

# 3.执行依赖安装

# 4.引入

# 四、StatelessWidget组件与基础组件

# 五、StatefulWidget 组件与基础组件

# 六、Flutter 布局开发

# 七、Flutter 中使用路由导航

# 八、Flutter 手势监听与点击事件

# 九、导入和使用 Flutter 资源文件

# 十、打开第三方APP

# 十一、Flutter 组件的生命周期

# 十二、Flutter App 声明周期

# 十三、Flutter APP 主题修改

# 十四、Flutter 设置字体

# 十五、Flutter 实战 拍照APP