flutter從入門到精通三

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基於想對定位和絕對定位設計的

掃碼關注公衆號，有更多精彩文章等你哦