开始Flutter入坑实操

• 参考链结
  • Get started
  • Flutter Documentation
  • 中文FAQ

简介

• Flutter是谷歌的移动UI框架，可以快速开发出高质量的原生用户界面，并且Flutter是完全免费开源的.现在Flutter至少可以跨5种平台，如：MacOS,Windows,Linux,Android,iOS,甚至还可以在谷哥的Fuchsia系统上运行.

开始

• 当然，最新，最权威的技术资源还是它的官网文档.这里大部分都按照官网文档的步骤来进行的.

安装Flutter

• 我这里使用的是Debian系统，而且选择使用它的GitHub的源来安装，而不是下载安一个固定版本的Flutter.

~$ git clone https://github.com/flutter/flutter.git

~$ export PATH=$PATH:`pwd`/flutter/bin

# 可选的，预先下载一些开发文件.
~$ flutter precache

 ~$ flutter doctor
 ~$  which flutter dart
/fullpath/flutter/bin/flutter
/fullpath/flutter/bin/dart

编辑器支持

Android Studio and IntelliJ，VS Code, Emacs

• Android Studio 至少需要3.6.3以上的片本.AS与VS需要安装上Flutter plugin与Dart plugin插件扩展.Emacs需要安装lsp-dart package.

国内镜像源

~$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
~$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
~$  git clone -b dev https://github.com/flutter/flutter.git
~$ export PATH="$PWD/flutter/bin:$PATH"
~$ cd ./flutter

• 另外还有上海交大的源:
  • FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn/
  • PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn/

更新Flutter

• 更新Flutter SDK

~$ flutter upgrade

• Flutter有4种发布版本:stable,beta,dev,master,一般推存使用stable版本.

~$ flutter channel  # 查看
~$ flutter channel dev
~$ flutter upgrade

• 更新包资源，类似大多WEB开发一样的, 如修改了工程内的pubspec.yaml后，可以通过更新来解决依赖.

~$ flutter pub upgrade

• 处理过时包的依赖，可以参考pub outdated documentation

~$ flutter pub u

• 选择特定版本

~$ flutter version v1.21.0+hotfix.3

运行flutter doctor

# 接授licenses.
~$ flutter doctor --android-licenses
~$ flutter doctor -v
[✓] Flutter (Channel master, 1.21.0-6.0.pre.227, on Linux, locale en_US.UTF-8)
    • Flutter version 1.21.0-6.0.pre.227 at /home/michael/3TB-DISK/github/flutter
    • Framework revision e9117c1902 (12 hours ago), 2020-08-06 08:15:25 -0700
    • Engine revision 36db6cfdd1
    • Dart version 2.10.0 (build 2.10.0-3.0.dev 14a6aac97b)


[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /home/michael/3TB-DISK/Android/Sdk/
    • Platform android-30, build-tools 30.0.1
    • ANDROID_HOME = /home/michael/3TB-DISK/Android/Sdk/
    • ANDROID_SDK_ROOT = /home/michael/3TB-DISK/Android/Sdk/
    • Java binary at: /home/michael/IDE_DIR/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Linux toolchain - develop for Linux desktop
    • clang version 7.0.1-8 (tags/RELEASE_701/final)
    • cmake version 3.13.4
    • ninja version 1.8.2
    • pkg-config version 0.29


[✓] Android Studio (version 4.0)
    • Android Studio at /home/michael/IDE_DIR/android-studio
    • Flutter plugin version 48.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.3)
    • VS Code at /usr/share/code
    • Flutter extension version 3.13.2

[!] Proxy Configuration
    • HTTP_PROXY is set
    ! NO_PROXY is not set

[✓] Connected device (1 available)
    • Linux (desktop) • linux • linux-x64 • Linux
! Doctor found issues in 1 categories.

创建第一个程序

~$ flutter create myapp
~$ cd myapp
~$ flutter run -d linux

Web开发

• 如果想用Flutter开发Web应用也是可以的，现在只是早期支持，需要切换到beta版本.

  ~$ flutter channel beta
  ~$ flutter upgrade
  
  ~$ flutter config --enable-web
  Setting "enable-web" value to "true".
  
  You may need to restart any open editors for them to read new settings.
  ~$ cat ~/.flutter_settings
  {
    "enable-linux-desktop": true,
    "enable-windows-desktop": true,
    "enable-web": true
  }
  
  ~$  flutter devices
  3 connected devices:
  
  Linux (desktop)  • linux      • linux-x64      • Linux
  Web Server (web) • web-server • web-javascript • Flutter Tools
  Chrome (web)     • chrome     • web-javascript • Google Chrome 71.0.3578.98

创建新工程

~$ flutter create myapp
~$ cd myapp
~$ flutter run -d chrome

• 如果上面运行出错，提示如：Unable to connect to Chrome debug port: 16799，检查是否在环境变量里设置了HTTP_PROXY,unset后再运行.

对已有的应用添加Web支持

~$ flutter create .

编译工程

~$ flutter build web

Android开发

• 如上面运行flutter doctor所示，在Android Studio里安装好Dart Plugin与Flutter plugin. 这里在IDE新建一个Flutter Application工程.

桌面开发

谢谢支持

• 微信二维码: