安裝Flutter

mac系統(tǒng)：

• 使用鏡像

open .bash_profile

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

source .bash_profile

• 下載Flutter SDK

git clone -b beta https://github.com/flutter/flutter.git

• 配置環(huán)境變量

export PATH=pwd/flutter/bin:$PATH

• 檢驗(yàn)，執(zhí)行flutter

  
  
• 相關(guān)依賴工具下載 flutter doctor

window系統(tǒng)

Android Studio 集成Flutter插件

• 配置flutter路徑

  
  

第一個(gè)程序Hello world

• 創(chuàng)建
  File>New Flutter Project

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

分析

• main函數(shù)使用了(=>)符號, 這是Dart中單行函數(shù)或方法的簡寫。

• 該應(yīng)用程序繼承了 StatelessWidget，這將會使應(yīng)用本身也成為一個(gè)widget。 在Flutter中，大多數(shù)東西都是widget，包括對齊(alignment)、填充(padding)和布局(layout)

• Scaffold 是 Material library 中提供的一個(gè)widget, 它提供了默認(rèn)的導(dǎo)航欄、標(biāo)題和包含主屏幕widget樹的body屬性。widget樹可以很復(fù)雜。

• widget的主要工作是提供一個(gè)build()方法來描述如何根據(jù)其他較低級別的widget來顯示自己。

• 本示例中的body的widget樹中包含了一個(gè)Center widget, Center widget又包含一個(gè) Text 子widget。 Center widget可以將其子widget樹對其到屏幕中心。

問題：會出現(xiàn) Resolving dependencies... 報(bào)錯(cuò)
多嘗試重啟了幾次就好了···

• 體驗(yàn)熱重載（??圖標(biāo)的按鈕）

• 在IOS真機(jī)上運(yùn)行
  在IOS真機(jī)上運(yùn)行項(xiàng)目需要安裝一些必要的軟件，在命令行中別分執(zhí)行如下命令：

brew update   
brew install --HEAD libimobiledevice   
brew install ideviceinstaller ios-deploy cocoapods   
pod setup

安裝完畢之后打開hello_world/ios目錄下的
在運(yùn)行之前需要配置bundle identifier和簽名
不然會出現(xiàn)如下提示

• 使用外部包(package)
  pubspec文件管理Flutter應(yīng)用程序的assets(資源，如圖片、package等)

  
  

嘗試增加english_words外部包
在Android Studio的編輯器視圖中查看pubspec時(shí)，單擊右上角的 Packages get，依賴包會安裝到項(xiàng)目中。控制臺中看到以下內(nèi)容：

flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

在 lib/main.dart 中, 引入 english_words

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
//          child: new Text('Hello World'),
          child:new Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}