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
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
1

# 入口函数

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

# 定义组件

class MyWidgetName extends StatelessWidget {
  
  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

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

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()))
1

# 插件指南

# 推送

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_swiper https://github.com/serenader2014/flutter_carousel_slider

# 视频播放

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

# 打开 URL

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

# 学习资源

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