Flutter系列一：Flutter快速入門

Flutter快速入門

前言

Flutter安裝及Hello World請看官方文檔，本教程不作介紹

Flutter與其它移動開發框架

原生開發框架工做原理圖

基於Webview框架的工做原理圖

RN工做原理圖（嚴重依賴OEM組件）

Flutter工做原理圖

Flutter與其它方案對比

• Flutter與JS解決方案同樣，使用AOT（提早編譯），而不是JIT（實時編譯）
• 與其它方案相比，Flutter性能要好得多
• Flutter消除了Bridge，且不依賴於OEM平臺
• Flutter容許自定義組件使用屏幕上的全部像素，即便用Flutter開發的應用程序在安卓和iOS的每一個版本上都顯示相同的內容
• Flutter使用Widgets Rendering來處理畫布（canvas）和事件（events），使用Platform Channels來使用服務（位置、藍牙等）
• Flutter Hot Reload使用了Dart的JIT編譯特性

Flutter的四種調試方式

Dart analyzer

能夠建立analysis_options.yaml文件，指定配置，有助於編寫更好的Flutter代碼

Dart observatory

能夠經過添加斷點或者debugger()語句，中斷應用執行進行調試，更多說明

Visual debugging

• 啓用debugPaintSize選項，在入口文件處，指明debugPaintSizeEnabled爲true，代碼及效果以下：

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

• 相似的還有啓用debugShowMaterialGrid，進行MaterialApp的網格調試
• 啓用showPerformanceOverlay，將展現性能圖，性能圖分爲上下兩部分。上部爲GPU線程花費的時間，下部爲CPU線程花費的時間

Flutter widget inspector

相似於Web調試的瀏覽器選擇工具，選擇後效果以下

Flutter的Widgets

說明

Flutter UI裏一切皆Widgets，寫過React及Styled-Components應該很容易理解，不過Flutter的部分樣式也是由Widget組成，例如：Padding、Center等

• Flutter組件分類
• Material組件列表

經常使用Widgets列表

Container

使用示例

Center(
  child: Container(
    height: 200.0,
    width: 200.0,
    child: Image.network("https://flutter.io/images/flutter-mark-square-100.png"),
  ),
),
複製代碼

Container能夠用於條件表達式展現一個空組件，如

function getIcon(bool condition) {
    if (condition == true) return Icon(Icons.edit);
    else return Container();
}
複製代碼

Image

Text

Icon

RaisedButton

Scaffold：Scaffold用於展現drawers, snackbars, bottomsheets, floating-action buttons等，使用示例

RaisedButton(
    onPressed: () {
        Scaffold.of(context).showSnackBar(SnackBar(
            content: Text("HELLO!"),
        ));
    },
    child: Text("BUTTON"),
    color: Colors.blue,
),
複製代碼

Appbar

PlaceHolder

Row

Column

ListView

GestureDetector：爲非按鈕組件添加交互性

Stateless widget & Stateful widget

Stateless widget：無狀態的小組件，示例

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}
複製代碼

Stateful widget：有狀態的小組件，示例（經過setState更改state）

class _MyHomePageState extends State<MyHomePage> {
    bool value = false;

    @override
    Widget build(BuildContext context) {
        return new Scaffold(
          backgroundColor: value ? Colors.black : Colors.white,
          appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: Center(
            child: Switch(
                value: value,
                onChanged: (v) {
                  setState(() {
                    value = v;
                  });
                }),
            ),
        );
    }
}
複製代碼

Flutter路由

經過Navigator.push()打開新頁面，經過Navigator.pop()返回上一頁，示例

onPressed() {
    Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SecondScreen()), // SecondScreen爲要跳轉到的頁面
   );
}
複製代碼

注：要達到全屏模態框的效果能夠將MaterialPageRoute的fullscreenDialog屬性設置爲true

Flutter中的約束

約束給出高度與寬度的最小值與最大值 RenderBoxes有三種不一樣的渲染機制

1. 試圖以當期容器的最大寬高渲染，如：ListView、Center等
2. 試圖以其子組件寬高做爲自身寬高渲染
3. 試圖以特定寬度渲染，如：Image、Text等

特殊的：當未向Container構造函數傳入寬高值時，它將傾向於最大渲染，但若是指明瞭寬高值，則使用特定大小。 特定的約束是無界（限）約束，這種狀況下最大寬高將被設置爲double.INFINITY

Flutter中的網絡請求

示例

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<Post> fetchPost() async {
  final response =
  await http.get('http://localhost:3000/Movies/1');

  if (response.statusCode == 200) {
    return Post.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load post');
  }
}

class Post {
  final int id;
  final String movieName;
  final int year;
  final String category;

  Post({this.id, this.movieName, this.year, this.category});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      movieName: json['movieName'],
      year: json['year'],
      category: json['category'],
    );
  }
}

void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget {
  final Future<Post> post;

  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSON Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('JSON Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>(
            future: post,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.movieName);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}
複製代碼

GET/POST的通用化原生封裝

import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';

class Api {
  static bool useHttps = false;
  static String prefix = "127.0.0.1:7001";

  static void init({String prefix, bool useHttps}) {
    Api.useHttps = useHttps;
    Api.prefix = prefix;
  }

  static Future<dynamic> get({
    String url,
    Map<String, dynamic> param = null,
    bool useDecode = true,
  }) async {
    url = (Api.useHttps ? 'https' : 'http') + '://' + prefix + url;
    if (param != null) {
      List<String> kv = [];
      for (String key in param.keys) {
        kv.add(key + '=' + param[key].toString());
      }
      url += '?' + kv.join('&');
    }
    print(url);
    var client = new http.Client();
    var resp = await client.get(url);
    if (resp.statusCode != 200) {
      return null;
    }

    if (useDecode) {
      var json = new JsonDecoder();
      return json.convert(resp.body);
    }

    return null;
  }

  static Future<dynamic> post({
    String url,
    Map<String, dynamic> param = null,
    bool useDecode = true,
  }) async {
    url = (Api.useHttps ? 'https' : 'http') + '://' + prefix + url;
    var client = new http.Client();
    var resp = await client.post(url, body: param);
    if (resp.statusCode != 200) {
      return null;
    }

    if (useDecode) {
      var json = new JsonDecoder();
      return json.convert(resp.body);
    }

    return null;
  }
}
複製代碼

其它

IDE技巧編寫Flutter效率技巧

Android Studio

• quickfix(快速修復): Alt + Enter

VS Code

• quickfix(快速修復): Ctrl + .

Flutter包管理

Flutter Pub

Flutter打開webview

使用flutter官方的url_launcher包

Flutter 經常使用命令

$ flutter packages get # 在項目內部執行，安裝pubspec.yaml指明的依賴
$ flutter channel # 查看渠道列表，及當前在用的渠道
$ flutter channel dev # 切換渠道爲dev
$ flutter doctor # 執行flutter環境檢查
$ flutter upgrade # 升級
$ flutter run -d [device ID] # 經過該設備啓動應用
複製代碼