Wolfx's Notebook

夜间模式

Flutter 学习笔记 ​

安装开发环境 ​

用 git 下载 SDK ​

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

配置环境变量 ​

（Linux 下开发 Android 为例）

在 ~/.profile 加入下面代码

bash
## 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
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 输出如下（正常）：

bash
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.
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 无法直接创建。

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

预下载构建工具 ​

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

bash
flutter precache --macos
flutter precache --macos

入口函数 ​

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

定义组件 ​

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

或

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

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

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

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

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

使用方式：

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

插件指南 ​

推送 ​

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

学习资源 ​

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

最后编辑时间:

Version 4.0 (framework-1.0.0-rc.20)

Copyright © 2014-present Wolfx 🐺