安裝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
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ù)使用了(
=>)符號(hào), 這是Dart中單行函數(shù)或方法的簡(jiǎn)寫堡妒。該應(yīng)用程序繼承了 StatelessWidget谷浅，這將會(huì)使應(yīng)用本身也成為一個(gè)widget。 在Flutter中，大多數(shù)東西都是widget，包括對(duì)齊(alignment)溅漾、填充(padding)和布局(layout)
Scaffold 是 Material library 中提供的一個(gè)widget, 它提供了默認(rèn)的導(dǎo)航欄、標(biāo)題和包含主屏幕widget樹的body屬性著榴。widget樹可以很復(fù)雜樟凄。
widget的主要工作是提供一個(gè)build()方法來描述如何根據(jù)其他較低級(jí)別的widget來顯示自己。
本示例中的body的widget樹中包含了一個(gè)Center widget, Center widget又包含一個(gè) Text 子widget兄渺。 Center widget可以將其子widget樹對(duì)其到屏幕中心缝龄。
問題：會(huì)出現(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和簽名
不然會(huì)出現(xiàn)如下提示
-
使用外部包(package)
pubspec文件管理Flutter應(yīng)用程序的assets(資源，如圖片叔壤、package等)
嘗試增加english_words外部包
在Android Studio的編輯器視圖中查看pubspec時(shí)瞎饲，單擊右上角的 Packages get，依賴包會(huì)安裝到項(xiàng)目中炼绘⌒嵴剑控制臺(tái)中看到以下內(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),
),
),
);
}
}
