Flutter開發實戰筆記

下載

https://flutter.cn/docs/get-started/install/macos#get-sdk

配置環境變量

export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

配置Flutter鏡像源

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

最終的文件配置情況，看下圖的24、25、29行：

修改SDK中的MAVEN_REPO

文件位置：

/Users/akm/Downloads/app/flutter/packages/flutter_tools/gradle/flutter.gradle

將https://storage.googleapis.com/download.flutter.io改成https://storage.flutter-io.cn/download.flutter.io

也就是替換googleapis.com爲flutter-io.cn

參考：Flutter中文網鏡像源設置教程

安裝 Android Studio

參考：https://flutter.cn/docs/get-started/install/macos#install-android-studio

配置 Android 模擬器

參考：https://flutter.cn/docs/get-started/install/macos#set-up-your-android-device

編輯工具設定之VS Code

參考：https://flutter.cn/docs/get-started/editor?tab=vscode

開發體驗初探

參考：https://flutter.cn/docs/get-started/test-drive?tab=vscode

內容包括：

• 如何在VS code編輯器中創建應用

• 體驗熱加載

編寫第一個 Flutter 應用

參考：https://flutter.cn/docs/get-started/codelab

功能：爲一個創業公司生成建議的公司名稱。用戶可以選擇和取消選擇的名稱、保存喜歡的名稱。該代碼一次生成十個名稱，當用戶滾動時，會生成一新批名稱。

1. 創建初始化工程

關鍵內容：

• Material 風格的 widgets
• 主函數main
• StatelessWidget
• 在 Flutter 中，幾乎所有都是 widget，包括對齊 (alignment)、填充 (padding) 和佈局 (layout)。
• Scaffold 是 Material 庫中提供的一個 widget，它提供了默認的導航欄、標題和包含主屏幕 widget 樹的 body 屬性。 widget 樹可以很複雜。
• 一個 widget 的主要工作是提供一個 build() 方法來描述如何根據其他較低級別的 widgets 來顯示自己。
• 本示例中的 body 的 widget 樹中包含了一個 Center widget， Center widget 又包含一個 Text 子 widget， Center widget 可以將其子 widget 樹對齊到屏幕中心。

2. 第二步：使用外部package

使用到的開源軟件包：english_words

你可以在 pub.dev 上找到 english_words 軟件包以及其他許多開源軟件包。

• 添加依賴包

pubspec.yaml 文件管理 Flutter 應用程序的 assets（資源，如圖片、package等）。在pubspec.yaml 中，將 english_words（3.1.5 或更高版本）添加到依賴項列表，如下面高亮顯示的行：

pubspec.yaml

         dependencies:            
                               flutter:            
                                 sdk: flutter            
                               cupertino_icons: ^0.1.2            
                +              english_words: ^3.1.0

• 安裝依賴包

flutter pub get

• 在 lib/main.dart 中引入

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

• 使用

class MyApp extends StatelessWidget {            
                                   @override            
                                   Widget build(BuildContext context) {            
                    +                final wordPair = WordPair.random();            
                                     return MaterialApp(            
                                       title: 'Welcome to Flutter',            
                                       home: Scaffold(            
        @@ -16,7 +18,7 @@    
                                           title: Text('Welcome to Flutter'),            
                                         ),            
                                         body: Center(            
                    -                      child: Text('Hello World'),            
                    +                      child: Text(wordPair.asPascalCase),            
                                         ),            
                                       ),            
                                     );

3. 第三步：添加一個 Stateful widget

Stateless widgets 是不可變的，這意味着它們的屬性不能改變 —— 所有的值都是 final。

Stateful widgets 持有的狀態可能在 widget 生命週期中發生變化，實現一個 stateful widget 至少需要兩個類： 1）一個 StatefulWidget 類；2）一個 State 類，StatefulWidget 類本身是不變的，但是 State 類在 widget 生命週期中始終存在。

在這一步，你將添加一個 stateful widget（有狀態的 widget）—— RandomWords，它會創建自己的狀態類 —— RandomWordsState，然後你需要將 RandomWords 內嵌到已有的無狀態的 MyApp widget。

4. 第四步：創建一個無限滾動的 ListView

在這一步中，你將擴展（繼承）RandomWordsState 類，以生成並顯示單詞對列表。當用戶滾動時，ListView 中顯示的列表將無限增長。 ListView 的 builder 工廠構造函數允許你按需建立一個懶加載的列表視圖。

5. 以 profile 模式運行

關心性能，可以以 profile 模式運行。