零基础三分钟写一个Flutter App

这个教程是面向完全没有接触过Flutter开发，从0开始搭建Flutter开发环境到写第一个Flutter app的。 正常情况只需要半个小时就可以看到app。

中文资料官网：https://flutterchina.club/get-started/install/

英文原资料官网：https://flutter.io/get-started/install/

安装环境

sdk下载链接：https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.5.1-beta.zip

如果你是墙内用户，估计要访问外国网站才能下载到sdk。

Flutter开发环境主要由两部分构成，一个是sdk，跟Android的sdk和 Java环境一样需要配置环境变量，另外一部分是IDEA/Android Studio的Flutter插件。 上面下载完sdk后解压缩，放到你习惯的位置，然后配置环境变量,以笔者mac环境为例

cat .bash_profile export PATH="$PATH: /Library/Android/sdk/platform-tools" export PATH="$PATH:/usr/local/opt/gradle/gradle-4.1/bin" export PATH="$PATH: /Library/Android/sdk/ndk-bundle" export PATH="$PATH: /Library/flutter/bin" -----> flutter环境变量 export PATH="$PATH:~/Library/kotlinc/bin"

windows环境配置跟JAVA_HOME配置一样，放到 PATH 就可以。安装完sdk后可以用 flutter doctor检查依赖关系， 如果正常的话 flutter doctor会输出类似下面的结果

flutter doctor ╔════════════════════════════════════════════════════════════════════════════╗ ║ WARNING: your installation of Flutter is 43 days old. ║ ║ ║ ║ To update to the latest version, run "flutter upgrade". ║ ╚════════════════════════════════════════════════════════════════════════════╝ Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.12 16A323, locale zh-Hans-CN) [!] Android toolchain - develop for Android devices (Android SDK 27.0.3) ✗ Android license status unknown. [!] iOS toolchain - develop for iOS devices ✗ Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer ✗ libimobiledevice and ideviceinstaller are not installed. To install, run: brew install --HEAD libimobiledevice brew install ideviceinstaller ✗ ios-deploy not installed. To install: brew install ios-deploy ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To install: brew install cocoapods pod setup [✓] Android Studio (version 3.1) [✓] Connected devices (1 available)

‘✗’表示缺失的依赖，基本上只要保证 Flutter 和 Android Studio 这两项是 [✓] 就可以了。除非还想做ios开发， 那么把 IOS toolchain 中缺失的依赖也按照提示装上就行。

安装插件

Android Studio的flutter插件也很简单，需要两个依赖，一个是 Dart 语言插件，一个是 Flutter插件。 · 连续按3次shift然后搜 plugins，或者在 Preferences > Plugins(Mac) / File>Settings>Plugins(Win) 中打开插件配置 · 搜索 Dart 和 flutter 安装两个插件后按提示重启Studio就行。

第一个Flutter app

一切正常的话，在重启后的File选项中可以看到新建Flutter项目的选项，选上它之后跟新建普通Android app一样就行。 这里新建的Flutter HelloWorld 工程很简单，demo上的数字会随着按钮的点击自增。 main.dart 是主入口，代码比较简单，有看过之前小编关于 Flutter的介绍的文章应该能看明白。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(primarySwatch: Colors.blue,),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

`

到此就完成第一个Flutter app了。目前Flutter相关的资料中英文都有，而且相当容易上手。 有兴趣的可以加群互相学习。