Flutter開發基礎知識

做爲時下最留下的大前端跨平臺開發框架，不少的公司和同窗都開始了Flutter學習和應用，關於Flutter的基礎知識，能夠參考下面的兩篇文章。 Flutter環境搭建 Flutter 基礎知識點總結

接下來，咱們將介紹一些Flutter應用開發中一些基本的知識。

Flutter基礎知識

建立Flutter項目

在Flutter開發中，建立一個Flutter 項目一般有如下兩種方式：

• 使用flutter create命令，確保Flutter SDK配置了環境變量。
• 使用安裝了Flutter和Dart插件的IDE，如Android Studio和IntelliJ IDEA。

命令行方式建立Flutter的命令以下：

flutter create <projectname>
複製代碼

若是使用IDE建立Flutter項目，能夠依次選擇【File】->【New】->【New Flutter Project...】，以下圖所示：

運行項目

在Flutter開發中，運行Flutter項目主要有兩種方式，一種是命令方式，一種是IDE的方式。 命令方式運行Flutter以下所示：

flutter run -d 'iPhone X'
flutter run -d emulator-5554
複製代碼

其中，-d後面跟的是具體的設備名稱，能夠是Android或iOS模擬器的名字，也能夠一臺已經鏈接到電腦上的Android或iOS的設備。 相比命令方式，咱們更推薦使用IDE圖形化工具的方式，首先選擇要運行的設備，而後選擇main.dart入口文件，而後點擊【運行】按鈕便可運行Flutter項目，以下圖：

除了上面的命令外，Flutter開發中常見的命令還有：

flutter emulator             //查看本地模擬器
flutter emulators --create --name xyz        //建立一個模擬器
flutter emulators --launch <emulator id>       //啓動模擬器
flutter build apk;           //打包Android應用
flutter build apk –release;
flutter install;              //安裝應用
flutter build ios;            //打包IOS應用
flutter build ios –release;
flutter clean;               //清理從新編譯項目
flutter upgrade;            //升級Flutter SDK和依賴包
flutter channel;            //查看Flutter官方分支列表和當前項目使用的Flutter分支
flutter channel <分支名>;   //切換分支
複製代碼

除此以外，咱們還能夠點擊 熱重載按鈕 (帶有閃電⚡️圖標的按鈕)來開啓熱重載方法，以下圖：

Flutter調試

Flutter提供了各類各樣的工具和功能來幫助開發者調試Flutter應用程序，若是你使用的是VsCode做爲開發工具，那麼能夠參考下面的調試技巧：

斷點調試

在 Flutter 進行斷點調試很是簡單，只須要在 Vscode 上打上一個斷點，按 F5 就會停在斷點處。經過左邊的調試欄，觀察斷點處的變量以及棧堆狀況。

debugger調試

debugger代碼調試只能運行在開發階段，debugger調試是Flutter提供的debugger API ，和JavaScript的console相似。例如：

import 'dart:developer';

void someFunction(double offset) {
    debugger(when: offset > 30.0, message: 'offset 大於 30 時，中斷');
    // ...
}
複製代碼

那麼，當 offset 這個變量的值大於 30.0 時中斷運行，並輸出 message 的內容。

rendering 調試

rendering 調試即開啓佈局線調試，當打開 rendering 時會在界面上看到一些佈局線，以便於修復佈局效果。要開啓rendering調試，須要在代碼中添加debugPaintSizeEnabled。例如：

import 'package:flutter/rendering.dart';

void main() {
    debugPaintSizeEnabled = !true;
    runApp(new MyApp());
}
複製代碼

而後，從新運行項目便可看得效果。

日誌調試

日誌調試是軟件開發中的一種很常見的調試方式，能夠方便開發者查看程序運行的日誌信息，如今流行的IDE幾乎都集成了日誌模塊。 Android Studio和Vscode 裏的控制檯/調試控制檯均可以看到。

固然，爲了方便，咱們也能夠本身定義一個Debug類用於代碼調試，例如：

class Debug {
    static log(String tag, String text) {
        print('[$tag] $text');
    }
    static info(String tag, String text) {
        print('[$tag] $text');
    }
    static success(String tag, String text) {
        print('[$tag] $text');
    }
    static error(String tag, String text) {
        print('[$tag] $text');
    }
}
複製代碼

真機調試

在Android 真機上運行Flutter程序，須要先開啓開發者選項，開啓的步驟以下：

• 打開【開發者選項】和【 USB 調試】。
• 使用 USB 將手機鏈接電腦，若手機出現提示，受權電腦訪問手機。
• 在命令執行 flutter devices 確認鏈接電腦的設備。
• 而後使用 flutter run 命令運行 app。
• 在手機上開啓 USB 調試模式。

Hello Word

和不少的程序同樣，Flutter程序也有一個啓動頁面，新建項目時系統默認的啓動頁面是main.dart，那麼咱們能夠修改main.dart的代碼。例如：

import 'package:flutter/material.dart';
 
void main() => runApp(new MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

複製代碼

而後，運行上面的代碼，能夠看到以下的效果：

Flutter 項目結構

打開新建懂得Flutter工程，項目結構以下圖所示：

能夠發現，一個完整的Flutter項目目錄結構以下：

┬
└ projectname
  ┬
  ├ android      - Android部分的工程文件
  ├ build        - 項目的構建輸出目錄
  ├ ios          - iOS部分的工程文件
  ├ lib          - 項目中的Dart源文件
    ┬
    └ src        - 包含其餘源文件
    └ main.dart  - 自動生成的項目入口文件，相似RN的index.js文件
  ├ test         - 測試相關文件
  └ pubspec.yaml - 項目依賴配置文件相似於RN的 package.json
複製代碼

其中，對於開發者來講，比較重要的有如下幾個文件：

• android：android平臺相關代碼；
• ios：ios平臺相關代碼；
• lib：flutter相關代碼，也是Flutter項目源碼存放的地方；
• test：存放測試代碼；
• pubspec.yaml：配置文件，通常存放一些第三方的依賴。

入口函數

咱們知道，每一個應用程序都有一個入口函數，Flutter項目的入口函數就是main.dart文件的main函數。

void main() => runApp(MyApp()); 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
    );
  }
}

複製代碼

在上面的代碼中，返回了一個MaterialApp widget，MaterialApp能夠理解爲是UI的風格，MaterialApp是Android使用的風格，iOS則可使用CupertinoApp風格。

Flutter主題

除了MaterialApp樣式外，咱們還可使用全局主題或使用Theme來定義應用程序局部的顏色和字體樣式。

全局主題

建立應用主題的方法是將ThemeData提供給MaterialApp構造函數，若是沒有提供主題，Flutter將建立一個默認主題，全局主題的使用示例以下：

new MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        primaryColor: Colors.cyan[600]
      ),
    );
複製代碼

局部主題

除了全局主題外，Flutter還支持建立特有的主題（局部主題）。具體使用時，數據實例化一個ThemeData並將其傳遞給Theme對象便可，以下所示：

new Theme(data: new ThemeData(accentColor: Colors.yellow), child: null),
複製代碼

固然，還能夠擴展父主題，擴展父主題時無須覆蓋全部的主題屬性，能夠經過使用copyWith方法來實現，例如：

floatingActionButton: new Theme(
        data: Theme.of(context).copyWith(accentColor: Colors.amber),
        child: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
複製代碼

Flutter Widget

無狀態組件和有狀態組件

Flutter將組件分爲無狀態和有狀態兩種。其中，無狀態組件(StatelessWidget)是不可變的，這意味着它們的屬性不能改變，全部的值都是最終的。有狀態組件(StatefulWidget)持有狀態可能在Widget生命週期中發生變化。

再平時開發中，使用得最多的應該就是有狀態組件，要實現一個StatefulWidget至少須要兩個類：

• 一個StatefulWidget類，StatefulWidget類自己是不變的；
• 一個State類，在Widget生命週期中始終存在。

例如，官方給出的示例就使用了有狀態組件。

建立可重用組件

組件通常是在設計和實現階段由一些類或者模塊組成的羣組。每一個組件完成一個獨立的功能, 而且都有一個和其它組件的良好接口。可重用組件是指經過對以往組件進行局部修改或者不修改就能夠組成新的軟件，可重用組件是可重用軟件的基礎。

在Flutter開發中，建立可重用組件的方式有不少，最簡單就是經過參數的方式，建立一個能夠重用的組件，例如：

// Flutter
class CustomCard extends StatelessWidget {
  CustomCard({@required this.index, @required 
     this.onPress});

  final index;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          Text('Card $index'),
          FlatButton(
            child: const Text('Press'),
            onPressed: this.onPress,
          ),
        ],
      )
    );
  }
}

複製代碼

而後，在使用的時候，按照參數傳入相應的值便可。

...
// Usage
CustomCard(
  index: index,
  onPress: () { 
    print('Card $index');
  },
)
    ...
複製代碼

資源管理

再原生應用開發過程當中，Android和iOS都有特定的資源管理文件。雖然Android將resources 和 assets 區別對待，但在Flutter中它們都會被做爲assets處理， 全部存在於Android上res / drawable- *文件夾中的資源都放在Flutter的assets文件夾中。

與Android相似，iOS 一樣將 images 和 assets 做爲不一樣的東西，而 Flutter 中只有 assets。被放到 iOS 中 Images.xcasset 文件夾下的資源在 Flutter 中被放到了 assets 文件夾中。

在Flutter開發中，assets 是資源文件的統一稱呼，能夠用來表示任意類型的文件，而不只僅是圖片。例如，你能夠把 json 文件放置到 my-assets 文件夾中，將圖片放到image文件中。

若是要訪問 my-assets的文件，可使用 AssetBundle 來訪問它，以下所示：

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('my-assets/data.json');
}
複製代碼

在原生Android開發中，咱們將不一樣分辨率的圖片放到不一樣的圖片文件夾下，以下所示：

• mipmap-ldpi 0.75x
• mipmap-mdpi 1.0x
• mipmap-hdpi 1.5x
• mipmap-xhdpi 2.0x
• mipmap-xxhdpi 3.0x
• mipmap-xxxhdpi 4.0x

iOS 的圖片則有1.0x，2.0x和3.0x之分，不一樣分辨率的手機會自動加載對應分辨率的圖片。

對應FLutter圖片來講，咱們也能夠參考這種規則，把1.0x的圖片放到 images 文件夾，將2.0x 的圖片放到另外的文件夾中，以下所示：

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

複製代碼

包管理

和原生Android和iOS應用開發同樣，Flutter的第三方庫文件都在pubspec.yaml文件中，若是要使用某個第三方庫，能夠打開包倉庫地址進行搜索，以下圖所示：

下面以依賴url_launcher第三方庫爲例，使用步驟以下：

1， 打開pubspec.yaml文件，在dependencies下添加包的名稱和版本：

url_launcher: ^5.1.1
複製代碼

2，而後，點擊Packages get命令來獲取工程配置文件中的所添加的引用包，或者打開命令窗口執行flutter packages get命令，以下圖：

3，而後，打開main.dart文件，導入url_launcher.dart包，並使用launch方法來打開url地址，以下所示：

import 'package:url_launcher/url_launcher.dart';

const url = "https://www.baidu.com";
launch(url);
複製代碼

未完待續！！！