Flutter 学习笔记（更新中）

2020-08-10

# 安装开发环境

# 用 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

1
2
3
4
5
6
7
8
9
10
11

重启电脑

# 检查是否配置正常

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

[email protected]:~/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.

1
2
3
4
5
6
7
8
9
10

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

# 开启桌面级应用支持

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

1
2

# 预下载构建工具

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

flutter precache --macos

# 入口函数

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

# 定义组件

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

1
2
3
4
5
6

或

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  // ...
}

1
2
3
4
5

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

https://blog.csdn.net/u011272795/article/details/82707645 (opens new window)

# 两种内置的路由跳转方式

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;
      }
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

使用方式：

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

# 插件指南

# 推送

https://pub.flutter-io.cn/packages/flutter_umpush (opens new window)

# 轮播

https://pub.flutter-io.cn/packages/flutter_swiper (opens new window) https://github.com/serenader2014/flutter_carousel_slider (opens new window)

# 视频播放

https://pub.dartlang.org/packages/video_player (opens new window)

# 打开 URL

https://pub.flutter-io.cn/packages/url_launcher (opens new window)

# 学习资源

基础入门 (opens new window), (适合初学者) 基础入门 (opens new window)

Flutter 学习笔记（更新中）

# 安装开发环境

# 用 git 下载 SDK

# 配置环境变量

# 检查是否配置正常

# 开启桌面级应用支持

# 桌面级应用的创建

# 预下载构建工具

# 入口函数

# 定义组件

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

# 两种内置的路由跳转方式

# 插件指南

# 推送

# 微信相关

# QQ 相关

# 轮播

# 视频播放

# 打开 URL

# 学习资源

# 安装开发环境

# 用 git 下载 SDK

# 配置环境变量

# 检查是否配置正常

# 开启桌面级应用支持

# 桌面级应用的创建

# 预下载构建工具

# 入口函数

# 定义组件

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

# 两种内置的路由跳转方式

# 插件指南

# 推送

# 微信相关

# QQ 相关

# 轮播

# 视频播放

# 打开 URL

# 学习资源

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