Flutter 学习笔记

安装开发环境

用 git 下载 SDK

国内镜像 https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk.git

配置环境变量

（Linux 下开发 Android 为例）

在 ~/.profile 加入下面代码

## flutter
export PATH=$PATH:/media/wolfx/HDD/SDK/Flutter/bin

## android_sdk
export ANDROID_HOME="/media/wolfx/HDD/android/sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools  ## windows %ANDROID_HOME%\tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools ## windows %ANDROID_HOME%\platform-tools

## flutter-mirror in China
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

重启电脑

检查是否配置正常

运行 flutter doctor 输出如下（正常）：

wolfx@wolfx-linux:~/Desktop$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.11.9, on Linux, locale zh_CN.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] Android Studio (version 3.0)
[!] VS Code (version 1.29.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

如果有异常，根据提示依次解决

开启桌面级应用支持

flutter config --enable-linux-desktop to enable Linux. flutter config --enable-macos-desktop to enable macOS. flutter config --enable-windows-desktop to enable Windows.

执行 flutter devices

桌面级应用的创建

用于桌面的 Flutter 仍然是一个实验特性，flutter create 无法直接创建。

git clone https://github.com/google/flutter-desktop-embedding.git
cd flutter-desktop-embedding

预下载构建工具

桌面系统特定的构建工具在默认情况下是不下载的，我们可以预下载它。

flutter precache --macos

入口函数

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

定义组件

class MyWidgetName extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyHomePage(title: 'Flutter Demo Home Page');
  }
}

或

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  // ...
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // ...
  @override
  Widget build(BuildContext context) {
    // ...
  }
}

flutter 获取屏幕宽度高度 通知栏高度等屏幕信息

https://blog.csdn.net/u011272795/article/details/82707645

两种内置的路由跳转方式

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

class Utils {
  /// 用于简化路由构建（安卓MD风格）
  static MaterialPageRoute getMaterialPageRoute(
    Widget myWidget,
    [bool fullscreenDialog]
  ) {
    return MaterialPageRoute(
      builder: (BuildContext context) {
        return myWidget;
      },
      fullscreenDialog: fullscreenDialog == null ? false : true
    );
  }

  /// 用于简化路由构建（iOS风格）
  static CupertinoPageRoute getCupertinoPageRoute(
    Widget myWidget
  ) {
    return CupertinoPageRoute(
      builder: (BuildContext context) {
        return myWidget;
      }
    );
  }
}

使用方式：

Navigator.of(context).push(Utils.getCupertinoPageRoute(new MyWidget()))

节流函数的简易实现

class Throttle {
  bool _flag = true;
  int delay;

  Throttle({required this.delay});

  void setFlag() {
    _flag = false;
    Future.delayed(Duration(milliseconds: delay)).then((resolve) {
      _flag = true;
    });
  }

  void throttle(void Function() fn) {
    if (_flag == false) {
      return;
    }
    setFlag();
    fn();
  }
}

插件指南

推送

https://pub.flutter-io.cn/packages/flutter_umpush

微信相关

https://pub.flutter-io.cn/packages/flutter_wechat

QQ 相关

https://pub.flutter-io.cn/packages/flutter_qq

轮播

https://pub.flutter-io.cn/packages/flutter_swiperhttps://github.com/serenader2014/flutter_carousel_slider

视频播放

https://pub.dartlang.org/packages/video_player

打开 URL

https://pub.flutter-io.cn/packages/url_launcher

学习资源

入门书籍