Flutter的基本介紹--通過Flutter的第一個項目

前言

Flutter從2018年2月底在世界移動大會（MWC）發佈第一個bata版；5月的GoogleI/O大會上發佈 bata3；6月底GMTC宣佈了首個預覽版；9月谷歌開發者大會上發佈預覽版2；12月宣佈發佈正式版1.0版。而且5月I/O大會後據說閒魚已經在使用了，可謂發展之迅速，應該還是很被大家看好的。

本文算是看了谷歌官方文檔及flutter文檔的翻譯加上自己的膚淺理解的總結吧。原文可查看官方文檔鏈接：

https://mp.weixin.qq.com/s/hCIN42OMmmc6HkOveegwWQ

https://flutter.io/docs/get-started

基本概念

跨平臺的UI工具包。即一套代碼可以同時在iOS和Android上構建，邏輯層還是可以由不同平臺各種實現。可以把 Flutter 理解爲應用內置的一個引擎，把這個引擎引入到現有的工程裏。

優點

在Flutter裏幾乎所有內容都是widget，通過不同的widget堆疊任何圖形、文本、視頻和控件。不受框架侷限性的干擾，同時適用於iOS和Android。
速度快，它基於 Skia 2D 硬件加速圖形引擎，該引擎也同樣用在了 Chrome 和 Android 平臺。Flutter 的代碼基於 Dart 平臺，它可以被編譯成 iOS 和 Android 平臺上 32 位和 64 位的 ARM 代碼。
高效。Flutter 引入了 Stateful Hot Reload（保持應用狀態的熱重載），可在應用運行時修改應用UI而不用重新啓動。
開放的。Flutter 是一個基於 BSD-style 許可的開源項目。

安裝環境及下載插件

參考官網地址：https://flutter.io/docs/get-started/install/macos

1、下載flutter源碼並解壓

2、配置環境變量

我選擇配置全局的

打開終端，在根目錄下使用open .bash_profiler打開bash_profiler.
添加flutter的環境變量：export PATH=$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin,也就是flutter的bin目錄。
執行命令刷新文件：source .bash_profiler
驗證是否配置成功：echo $PATH，輸出的環境變量中有flutter的變量。

3、檢查flutter需要的軟件是否齊全

輸入命令：flutter doctor，會出現以下類似文案，表明的是需要的環境是否已OK，如果需要更新，跟着提示的命令行走即可。

[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14 18A391, locale
    zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install with Brew:
        brew install ios-deploy
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

已安裝flutter穩定版
Android 工具鏈不完善—使用提示的命令完善
iOS工具鏈不完善(iOS真機調試)
AS沒有安裝flutter插件，打開AS-preference-添加插件。

完善iOS工具鏈注意點：

brew update 可能需要較長的時間。
brew install --HEAD usbmuxd 出現錯誤：
```
An exception occurred within a child process:
  RuntimeError: /usr/local/opt/autoconf not present or broken
Please reinstall autoconf(或者是automake\libtool\pkg-config). 
```
**解決辦法：**重新安裝autoconf，如果系統中有autoconf，先執行brew unlink autoconf,然後執行brew reinstall autoconf

3.brew install --HEAD usbmuxd 出現錯誤：

make install
Last 15 lines from /Users/zeng/Library/Logs/Homebrew/usbmuxd/03.make:
        uint64_t ri_system_time;
        ^
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.14.sdk/usr/include/sys/resource.h:213:2: error: unknown type name 'uint64_t'
        uint64_t ri_pkg_idle_wkups;
        ^
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.14.sdk/usr/include/sys/resource.h:214:2: error: unknown type name 'uint64_t'
        uint64_t ri_interrupt_wkups;
        ^
fatal error: too many errors emitted, stopping now [-ferror-limit=]
20 errors generated.
make[1]: *** [collection.lo] Error 1
make[1]: *** Waiting for unfinished jobs....
20 errors generated.
make[1]: *** [socket.lo] Error 1
make: *** [install-recursive] Error 1

READ THIS: https://docs.brew.sh/Troubleshooting

**這裏尋找了很多解決版本解決不了，如各位有好的解決辦法煩請告知！**這些錯誤不影響Flutter項目的構建，只不過不能使用iOS真機調試，模擬器還是可以的，但是不知道是上面報錯的原因還是電腦問題，每次使用iOS的模擬器，電腦的風扇就轉的特厲害，發熱的特厲害。android模擬器和真機沒有問題。

項目架構

android: Android平臺代碼
ios:ios 平臺代碼
lib:跨平臺代碼，也就是Flutter項目的主要代碼
- main.dart :Flutter項目的入口文件
test:測試代碼
pubspec.lock :由pub生成的已經被pull下來的包及其版本號。

pubspec.yaml ：項目描述文件，這裏填寫項目名稱、版本號，構建環境，添加的依賴

name: flutter_app    //項目名稱
description: A new Flutter application. //描述

version: 1.0.0+1  //構建版本
 
environment:
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

//正式版添加的依賴，最後編譯到程序中
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0
  
//開發版本添加的依賴，不會編譯到程序中
dev_dependencies:
  flutter_test:
    sdk: flutter
    
//Flutter相關配置    
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  //是否適用material-design 的icon
  uses-material-design: true

//將資源添加到這裏纔可以使用
  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

程序編寫

**引入三方包：**在pubspec.yaml 文件中添加包名。

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  english_words: ^3.1.0  //添加的第三方包名稱及版本號

在文件中引入包名：import ‘package:包名/類名’

Flutter 的入口方法：

///入口
void main() => runApp(MyApp());

///StatelessWidget 無狀態,使得app本身就是一個weight
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
//    final word = WordPair.random();

    return MaterialApp(
      //應用標題
      title: 'Flutter Demo',
      home: RamdowWords(),

      ///Scaffold 提供一個默認的 bar title  body屬性
//      home: Scaffold(
//        appBar: AppBar(
//          title: Text("welcome to flutter"),
//        ),
//        body: Center(
////          child: Text("Hello world"),
////          child: Text(word.asPascalCase),
//          child: RamdowWords(),
//        ),
//      ),
    );
  }
}

說明：

在Flutter中幾乎所有東西都是widget。
StatelessWidget:無狀態weight，不可變，也就是他們的屬性無法被改變，都是使用final修飾。
StatefulWidget:有狀態widget，可以在生命週期內發生狀態的改變。創建有狀態的部件一般需要創建兩個類：一個繼承StatefulWidget，重寫：createState()方法，另一個State class，主要處理程序的大部分邏輯及狀態。
HotReload:需要保持App運行，不能關閉App。

//有狀態的weight
class RamdowWords extends StatefulWidget {
  //創建他的State class
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new RamdowWordsState();
  }
}

//State class
//處理程序的大部分邏輯和狀態
class RamdowWordsState extends State<RamdowWords> {
  final _suggestions = <WordPair>[];
  final _fontSize = const TextStyle(fontSize: 18.0);

	//重寫build 方法
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
//    final wordPair = WordPair.random();
    //創建 數組
//    return Text(wordPair.asPascalCase); //首字母大寫

      return Scaffold(
        appBar: AppBar(
          title: Text("generator name"),
        ),
        body: _buildSuggestions(),
      );
  }
}

生成Listview 的方法

 //添加生成list view的方法
  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        //每次都會回調到這
        itemBuilder: (context, i) {
          if (i.isOdd) return Divider(); //1像素的分割線

          // i 依次/2 的商,這將計算ListView中實際的單詞配對數量減去分頻器小部件。
          final index = i ~/ 2;
          //達到底部，多添加 10個item
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }

          return _buildRow(_suggestions[index]);
        });
  }
  
   
   //設置每一行的名字
  Widget _buildRow(WordPair wordPair) {
      return ListTile(
          title: Text(wordPair.asPascalCase,style: _fontSize,),

      );
  }
}

效果圖（使用官方圖）：

Flutter的基本介紹--通過Flutter的第一個項目

前言

基本概念

優點

安裝環境及下載插件

1、下載flutter源碼並解壓

2、配置環境變量

3、檢查flutter需要的軟件是否齊全

完善iOS工具鏈注意點：

項目架構

程序編寫

Flutter 的入口方法：

生成Listview 的方法

詐騙（殺豬盤）網站進行滲透測試

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

【Python】保存gym截圖

【譯】使用 GitHub Copilot 作爲你的編碼 GPS

Linux 服務器配置-安裝portainer-ce社區版

外行也能讀懂的網絡硬件設備功能原理速成

Android 集成 google 登錄並獲取性別等隱私信息

Java面試題基礎

Sign in with Apple（object-c）從開發者後臺到服務端驗證

Git追加本次提交到上次提交

Gradle自定義打jar包腳本

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結