flutter可以通過一套代碼運行在多個平臺上，包括移動，web，桌面，嵌入式，但是在 Web 平臺的支持尚未達到 Beta 階段，請不要用在生產環節，在閱讀文檔時候，推薦大家閱讀https://flutter.cn ，這是和官方文檔同步的中文網站，減少學習的成本
在flutter中，所有的內容都是widget，其是構成flutter項目的最小的單元
如果你在國內使用 Flutter，那麼你可能需要找一個與官方同步的可信的鏡像站點，幫助你的 Flutter 命令行工具到該鏡像站點下載其所需的資源。你需要爲此設置兩個環境變量：“PUB_HOSTED_URL”和“FLUTTER_STORAGE_BASE_URL”，然後再運行 Flutter 命令行工具。
下面所有的代碼和案例都是基於編輯器vs code進行編輯，使用該編輯器和編輯器插件以獲取更好的開發體驗。這些插件提供了代碼補全、代碼高亮、widget 輔助編輯的功能，以及爲項目的運行和調試提供支持等。
tip:在flutter項目中，可以通過Flutter Doctor來檢查項目是否存在問題
通過vs code創建的項目目錄如下，我們編寫的代碼主要放在lib文件夾下面，其中最重要就是lib(編寫程序代碼)和pubspec.yaml （相當於npm項目中的package.json,設置項目的配置項） 
應用程序所需的代碼在 ‘lib/main.dart’，如果想要從更高層次瞭解每個代碼塊的講解，請看代碼中的註釋。
// package:這是表示系統內置的包
// 下面表示創建了一個具有 Material Design 風格的應用， Material 是一種移動端和網頁端通用的視覺設計語言， Flutter 提供了豐富的 Material 風格的 widgets。
import 'package:flutter/material.dart';
// 下面表示引進第三方包english_words
import 'package:english_words/english_words.dart';
// 主函數（main）使用了 (=>) 符號，這是 Dart 中單行函數或方法的簡寫，也就是箭頭函數，注意如果使用箭頭函數，只能寫一行。
void main() => runApp(MyApp());
// StatelessWidget表示無狀態的組件，表示該組件內所有的狀態就是不能變化，如果需要繼承有狀態的組件，則是StatefulWidget
class MyApp extends StatelessWidget {
// 只要調用setState方法，build就會重新加載，flutter框架的思想是來源於react
//注意一個widget主要工作是提供一個 build() 方法來描述如何根據其他較低級別的 widgets 來顯示自己，可以和react中的render函數作比較。
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
// Center widget 可以將其子 widget 樹對齊到屏幕中心。
body: Center(
child: RandomWords()
),
),
);
}
}
class RandomWords extends StatefulWidget {
RandomWords({Key key}) : super(key: key);
@override
_RandomWordsState createState() => _RandomWordsState();
}
class _RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random();
return Text(wordPair.asPascalCase);
}
}
tip:
- 儘量在Text外層套一層Container,這樣可以充分的利用Container來設置width，height等
- Row,Column是基於flexbox設計的,使用之後元素在垂直和水平位置都會居中的
- Stack基於想對定位和絕對定位設計的
