Dart&Flutter環境搭建
安裝 dart SDK 如果只開發移動應用，那么您不需要Dart SDK; 只需安裝Flutter。
這里就直接安裝 Flutter （dart SDK已經集成在Flutter中） 由於在國內訪問Flutter有時可能會受到限制，Flutter官方為中國開發者搭建了臨時鏡像，大家可以將如下環境變量加入到用戶環境變量中：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
下載地址 ： https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos
配置環境變量：
export PATH=`pwd`/flutter/bin:$PATH（添加路徑）
export PATH=/Users/mugong/Desktop/workspace/flutter/bin:$PATH（這 是我的）
安裝 Xcode 或者 Android Studio (我安裝的Android Studio)
運行 flutter doctor
vs code (我的編輯器)
調用 View>Command Palette… 輸入 ‘install’, 然后選擇 Extensions: Install Extension action
在搜索框輸入 flutter , 在搜索結果列表中選擇 ‘Flutter’, 然后點擊 Install 選擇 ‘OK’
重新啟動 VS Code
Android Studio Flutter插件 , Dart插件
創建一個新flutter應用
在終端 輸入 flutter run 在 initState函數中打印出hello world！至此flutter框架已經搭建完成。
Dart 語言 數據類型
dart語言提供所有現代語言提供的所有基本數據類型。
Numbers int 和 double
Strings
Booleans
Lists
Maps Map 是一個鍵值對相關的對象
int x = 100; double y = 1.1;
String s = 'This is a string';
bool isDoorOpen = false;
list list= [1,2,3,4];
map map= { 'key1': 'value1', 'key2': 'value2', 'key3': 'value3' };
目前Dart中int和double是num的子接口,所以聲明變量類型時可以使用num來替代int或double.
flutter 布局思路
參考文檔： https://flutterchina.club/tutorials/layout/#approach
常見布局widgets
1.多個子元素的布局 Row 、Column、Stack 等
2. 單個 子元素的布局Container 、 Padding 、Center 等
Row :控件來水平排列子控件.
Column: 控件垂直排列子控件.
Container : 給一個組件添加 padding, margins, 邊界（borders）, 背景顏色或其它裝飾（decorations）。
Stack : 在一個widget上面蓋上另一個widget。
ListView : ListView能以列的形式展示數據。當內容超過渲染范圍時，自動提供滾動的功能。
Center :在一個widget 中居中顯示。
Padding：給子節點設置padding屬性，設置內邊距屬性， (Flutter中並沒有單獨的Margin控件)。
Text: 顯示“ 文本”單個樣式的文本字符串小組件。
有狀態組件（Stateful widget）與 無狀態組件（StatelessWidget）
無狀態組件（stateless widget），無狀態組件不提供可變狀態維護，無狀態組件僅根據其屬性來渲染， 無狀態組建的寫法：
class MyToolBar extends StatefulWidget{
MyToolBar({ this.title }); final Widget title）
Widget build(BuildContext context){
return new Container( child: new Row([ new IconButton(icon: 'navigation/menu'), ]) );
}
}
有狀態組件（stateful Widget）,組件自己維護狀態，組件渲染由SetState方法調用，更具state的變化差異來更新渲染。所有的stateful widget都是建立在stateless widget上的。
class Counter extends StatefulWidget {
_CounterState createState() => new _CounterState();
}
class _CounterState extends State<Counter> {
int _count = 0;
void _increment() {
setState(() { ++_count; });
}
Widget build(BuildContext context) {
return new Container(
child: new Center(
child: new RaisedButton(
onPressed: _increment,
child: new Text('click count : ${_count}'))));
}
}
Flutter的父子通信
父組件向子組件傳值
父組件
String modelKey='';
new Container( child:Input({modelKey： modelKey}) }
子組件
Input({modelKey:this.modelKey})
Input extends StatelessWidget {
final modelKey;
Input ({modelKey:modelKey});
Widget build(BuildContext context) { }
}
子組建向父組建傳值
父組件
void onDataChange(val) { setState(() { data = val; });
new ChildTwo(data4Two: data4Two, callback: (val) => onDataChange(val)),
子組件
class ChildTwo extends StatefulWidget {
ChildTwo({data4Two: this.data4Two,callback: this.callback})
final callback; String data4Two;
child: new Center( onPressed: callback('111111111'), child: new Text('to父組件') )
}
第三方庫的下載
在 pubspec.yaml
dependencies:
flutter: sdk:
flutter
cupertino_icons: ^0.1.0
english_words: ^3.1.0
拉取聲明的第三方庫到本地工程 flutter packages get 注意 ：yaml配置文件對於縮進要求十分嚴格！！！！！！！
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
flutter 中從接口中取到的數據要進行反json序列化