# 安装开发环境
# 用 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
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.
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
2
# 预下载构建工具
桌面系统特定的构建工具在默认情况下是不下载的,我们可以预下载它。
flutter precache --macos
# 入口函数
void main() => runApp(MyApp());
# 定义组件
class MyWidgetName extends StatelessWidget {
Widget build(BuildContext context) {
return MyHomePage(title: 'Flutter Demo Home Page');
}
}
2
3
4
5
6
或
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
// ...
}
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;
}
);
}
}
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_wechat (opens new window)
# QQ 相关
https://pub.flutter-io.cn/packages/flutter_qq (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)