面對Flutter，我終於邁出了第一步

哎，Flutter真香啊

早在一年前想學習下flutter，但當時對於它佈局中地獄式的嵌套有點望而生畏，心想爲何嵌套這麼複雜，就沒有xml佈局方式嗎，用jsx方式也行啊，爲何要用dart而不用javascript，走開，勞資不學了。
然而，隨着今年google io大會flutter新版本發佈，大勢宣揚。我又開始從頭學習flutter了:

• 瀏覽dart.dev/
• 瀏覽book.flutterchina.club/ 本想看下視頻實戰的，後面發現效率過低（有點囉嗦），放棄了。最終仍是決定經過閱讀flutter項目源碼學習，事實上仍是這種效率最高。

恰好公司有新app開發，此次決定用flutter開發了，邊開發邊學習，既完成了工做又完成了學習（ps：如今公司ios和前端也在學了😂）。

用完flutter的感覺是，一旦接受這種嵌套佈局後，發現佈局也沒那麼難，hot reload牛皮，async真好用，dart語言真方便，嗯，香啊。

下面就這次app開發記錄相關要點（菜鳥階段，歡迎指正）

第三方庫

• dio: 網絡
• sqflite: 數據庫
• pull_to_refresh: 下拉刷新，上拉加載
• json_serializable: json序列化，自動生成model工廠方法
• shared_preferences: 本地存儲
• fluttertoast: 吐司消息

圖片資源

爲適配各個分辨率的圖片資源，一般須要1,2,3倍的圖。在flutter項目根目錄下建立assets/images目錄，在pubspec.yaml文件中加入圖片配置

flutter:
  # ...
  assets:
    - assets/images/
複製代碼

而後經過sketch切出1/2/3倍圖片，這裏可經過編輯預設,在詞首加入2.0x/和3.0x/，這樣導出的格式便符合flutter圖片資源所需了。

這裏再建一個image_helper.dart的工具類，用於產生Image

class ImageHelper {
  static String png(String name) {
    return "assets/images/$name.png";
  }

  static Widget icon(String name, {double width, double height, BoxFit boxFit}) {
    return Image.asset(
      png(name),
      width: width,
      height: height,
      fit: boxFit,
    );
  }
}
複製代碼

主界面Tab導航

在app主界面，tab底部導航是最經常使用的。一般基於Scaffold的bottomNavigationBar配和PageView使用。經過PageController控制PageView界面切換，同時使用BottomNavigationBar的currentIndex控制tab選中狀態。 爲了能使監聽返回鍵，使用WillPopScope實現點兩次返回鍵退出app。

List pages = <Widget>[HomePage(), MinePage()];

class _TabNavigatorState extends State<TabNavigator> {
  DateTime _lastPressed;
  int _tabIndex = 0;
  var _controller = PageController(initialPage: 0);

  BottomNavigationBarItem buildTab(
      String name, String normalIcon, String selectedIcon) {
    return BottomNavigationBarItem(
        icon: ImageHelper.icon(normalIcon, width: 20),
        activeIcon: ImageHelper.icon(selectedIcon, width: 20),
        title: Text(name));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _tabIndex,
          backgroundColor: Colors.white,
          onTap: (index) {
            setState(() {
              _controller.jumpToPage(index);
              _tabIndex = index;
            });
          },
          selectedItemColor: Color(0xff333333),
          unselectedItemColor: Color(0xff999999),
          selectedFontSize: 11,
          unselectedFontSize: 11,
          type: BottomNavigationBarType.fixed,
          items: [
            buildTab("Home", "ic_home", "ic_home_s"),
            buildTab("Mine", "ic_mine", "ic_mine_s")
          ]),
      body: WillPopScope(
          child: PageView.builder(
            itemBuilder: (ctx, index) => pages[index],
            controller: _controller,
            physics: NeverScrollableScrollPhysics(),//禁止PageView左右滑動
          ),
          onWillPop: () async {
            if (_lastPressed == null ||
                DateTime.now().difference(_lastPressed) >
                    Duration(seconds: 1)) {
              _lastPressed = DateTime.now();
              Fluttertoast.showToast(msg: "Press again to exit");
              return false;
            } else {
              return true;
            }
          }),
    );
  }
}

複製代碼

網絡層封裝

網絡框架使用的是dio，不論是哪一種平臺，網絡請求最終要轉成實體model用於ui展現。這裏先將dio作一個封裝，便於使用。

通用攔截器

網絡請求中一般須要添加自定義攔截器來預處理網絡請求，每每須要將登陸信息（如user_id等）放在公共參數中，例如；

import 'package:dio/dio.dart';
import 'dart:async';
import 'package:shared_preferences/shared_preferences.dart';

class CommonInterceptor extends Interceptor {
  @override
  Future onRequest(RequestOptions options) async {
    options.queryParameters = options.queryParameters ?? {};
    options.queryParameters["app_id"] = "1001";
    var pref = await SharedPreferences.getInstance();
    options.queryParameters["user_id"] = pref.get(Constants.keyLoginUserId);
    options.queryParameters["device_id"] = pref.get(Constants.keyDeviceId);
    return super.onRequest(options);
  }
}
複製代碼

Dio封裝

而後使用dio封裝get和post請求，預處理響應response的code。假設咱們的響應格式是這樣的：

{
    code:0,
    msg:"獲取數據成功",
    result:[] //或者{}
}
複製代碼

import 'package:dio/dio.dart';
import 'common_interceptor.dart';

/* * 網絡管理 */
class HttpManager {
  static HttpManager _instance;

  static HttpManager getInstance() {
    if (_instance == null) {
      _instance = HttpManager();
    }
    return _instance;
  }

  Dio dio = Dio();

  HttpManager() {
    dio.options.baseUrl = "https://api.xxx.com/";
    dio.options.connectTimeout = 10000;
    dio.options.receiveTimeout = 5000;
    dio.interceptors.add(CommonInterceptor());
    dio.interceptors.add(LogInterceptor(responseBody: true));
  }

  static Future<Map<String, dynamic>> get(String path, Map<String, dynamic> map) async {
    var response = await getInstance().dio.get(path, queryParameters: map);
    return processResponse(response);
  }

  /* 表單形式 */
  static Future<Map<String, dynamic>> post(String path, Map<String, dynamic> map) async {
    var response = await getInstance().dio.post(path,
        data: map,
        options: Options(
            contentType: "application/x-www-form-urlencoded",
            headers: {"Content-Type": "application/x-www-form-urlencoded"}));
    return processResponse(response);
  }

  static Future<Map<String, dynamic>> processResponse(Response response) async {
    if (response.statusCode == 200) {
      var data = response.data;
      int code = data["code"];
      String msg = data["msg"];
      if (code == 0) {//請求響應成功
        return data;
      }
      throw Exception(msg);
    }
    throw Exception("server error");
  }
}
複製代碼

map轉model

使用dio能夠將最終的請求響應response轉成Map<String, dynamic>對象，咱們還須要將map轉成相應的model。假如咱們有一個獲取文章列表的接口響應以下：

{
  code:0,
  msg:"獲取數據成功",
  result:[
    {
        article_id:1,
        article_title:"標題",
        article_link:"https://xxx.xxx"
    }
  ]
}
複製代碼

就須要一個Article的model。因爲Flutter下是禁用反射的，咱們只能手動初始化每一個成員變量。 不過咱們能夠經過json_serializable將手動初始化的工做交給它。 首先在pubspec.yaml引入它：

dependencies:
  json_annotation: ^2.0.0

dev_dependencies:
  json_serializable: ^2.0.0
複製代碼

咱們建立一個article.dart的model類：

import 'package:json_annotation/json_annotation.dart';

part 'article.g.dart';
//FieldRename.snake 表示json字段下劃線分割類型如：article_id
@JsonSerializable(fieldRename: FieldRename.snake, checked: true)
class Article {
  final int articleId;
  final String articleTitle;
  final String articleLikn;
}
複製代碼

注意這裏引用到了一個article.g.dart沒有產生的文件，咱們經過pub run build_runner build命令就會生成這個文件

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'article.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

Article _$ArticleFromJson(Map<String, dynamic> json) {
  return $checkedNew('Article', json, () {
    final val = Article();
    $checkedConvert(json, 'article_id', (v) => val.articleId = v as int);
    $checkedConvert(
        json, 'article_title', (v) => val.articleTitle = v as String);
    $checkedConvert(json, 'article_link', (v) => val.articleLink = v as String);
    return val;
  }, fieldKeyMap: const {
    'articleId': 'article_id',
    'articleTitle': 'article_title',
    'articleLink': 'article_link'
  });
}

Map<String, dynamic> _$ArticleToJson(Article instance) => <String, dynamic>{
      'article_id': instance.articleId,
      'article_title': instance.articleTitle,
      'article_link': instance.articleLink
    };
複製代碼

而後在article.dart裏添加工廠方法

class Article{
  ...
  factory Article.fromJson(Map<String, dynamic> json) => _$ArticleFromJson(json);
}
複製代碼

具體請求封裝

建立好model類後，就能夠建一個具體的api請求類ApiRepository,經過async庫，能夠將網絡請求最終封裝成一個Future對象，實際調用時，咱們能夠將異步回調形式的請求轉成同步的形式，這有點和kotlin的協程相似:

import 'dart:async';
import '../http/http_manager.dart';
import '../model/article.dart';

class ApiRepository {
  static Future<List<Article>> articleList() async {
    var data = await HttpManager.get("articleList", {"page": 1});
    return data["result"].map((Map<String, dynamic> json) {
      return Article.fromJson(json);
    });
  }
}
複製代碼

實際調用

封裝好網絡請求後，就能夠在具體的組件中使用了。假設有一個_ArticlePageState：

import 'package:flutter/material.dart';
import '../model/article.dart';
import '../repository/api_repository.dart';

class ArticlePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ArticlePageState();
  }
}

class _ArticlePageState extends State<ArticlePage> {
  List<Article> _list = [];

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  void _loadData() async {//若是須要展現進度條，就必須try/catch捕獲請求異常。
    showLoading();
    try {
      var list = await ApiRepository.articleList();
      setState(() {
        _list = list;
      });
    } catch (e) {}
    hideLoading();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: ListView.builder(
              itemCount: _list.length,
              itemBuilder: (ctx, index) {
                return Text(_list[index].articleTitle);
              })),
    );
  }
}

複製代碼

數據庫

數據庫操做經過sqflite，簡單封裝處理事例了文章Article的插入操做。

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
import 'dart:async';
import '../model/article.dart';

class DBManager {
  static const int _VSERION = 1;
  static const String _DB_NAME = "database.db";
  static Database _db;
  static const String TABLE_NAME = "t_article";
  static const String createTableSql = ''' create table $TABLE_NAME( article_id int, article_title text, article_link text, user_id int, primary key(article_id,user_id) ); ''';

  static init() async {
    String dbPath = await getDatabasesPath();
    String path = join(dbPath, _DB_NAME);
    _db = await openDatabase(path, version: _VSERION, onCreate: _onCreate);
  }

  static _onCreate(Database db, int newVersion) async {
    await db.execute(createTableSql);
  }

  static Future<int> insertArticle(Article item, int userId) async {
    var map = item.toMap();
    map["user_id"] = userId;
    return _db.insert("$TABLE_NAME", map);
  }
}

複製代碼

Android層兼容通訊處理

爲了兼容底層，須要經過MethodChannel進行Flutter和Native(Android/iOS)通訊

flutter調用Android層方法

這裏舉例flutter端打開系統相冊意圖，並取得最終的相冊路徑回調給flutter端。 咱們在Android中的MainActivity中onCreate方法處理通訊邏輯

eventChannel = MethodChannel(flutterView, "event")
        eventChannel?.setMethodCallHandler { methodCall, result ->
            when (methodCall.method) {\
                "openPicture" -> PictureUtil.openPicture(this) {
                    result.success(it)
                }
            }
        }
複製代碼

由於是經過result.success將結果回調給Flutter端，因此封裝了打開相冊的工具類。

object PictureUtil {
    fun openPicture(activity: Activity, callback: (String?) -> Unit) {
        val f = getFragment(activity)
        f.callback = callback
        val intentToPickPic = Intent(Intent.ACTION_PICK, null)
        intentToPickPic.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*")
        f.startActivityForResult(intentToPickPic, 200)
    }

    private fun getFragment(activity: Activity): PictureFragment {
        var fragment = activity.fragmentManager.findFragmentByTag("picture")
        if (fragment is PictureFragment) {

        } else {
            fragment = PictureFragment()
            activity.fragmentManager.apply {
                beginTransaction().add(fragment, "picture").commitAllowingStateLoss()
                executePendingTransactions()
            }
        }
        return fragment
    }
}
複製代碼

而後在PictureFragment中加入callback，而且處理onActivityResult邏輯

class PictureFragment : Fragment() {
    var callback: ((String?) -> Unit)? = null
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (requestCode == 200) {
            if (data != null) {
                callback?.invoke(FileUtil.getFilePathByUri(activity, data!!.data))
            }
        }
    }
}
複製代碼

這裏FileUtil.getFilePathByUri是經過data獲取相冊路徑邏輯就不貼代碼了，網上不少能夠搜索一下。 而後在flutter端使用

void _openPicture() async {
    var result = await MethodChannel("event").invokeMethod("openPicture");
    images.add(result as String);
    setState(() {});
  }
複製代碼

Android端調用Flutter代碼

將剛剛MainActivity中的eventChannel聲明成類變量，就能夠在其餘地方使用它了。好比推送通知，若是須要調用Flutter端的埋點接口方法。

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        GeneratedPluginRegistrant.registerWith(this)
        eventChannel = MethodChannel(flutterView, "event")
        eventChannel?.setMethodCallHandler { methodCall, result ->
            ...
            }
        }
        checkNotify(intent)
        initPush()
    }
    companion object {
        var eventChannel: MethodChannel? = null
    }
}
複製代碼

在Firebase消息通知中調用Flutter方法

class FirebaseMsgService : FirebaseMessagingService() {
    override fun onMessageReceived(msg: RemoteMessage?) {
        super.onMessageReceived(msg)
        "onMessageReceived:$msg".logE()
        if (msg != null){
            showNotify(msg)
            MainActivity.eventChannel?.invokeMethod("saveEvent", 1)
        }
    }
}
複製代碼

而後在Flutter層咱們添加回調

class NativeEvent {
  static const platform = const MethodChannel("event");

  static void init() {
    platform.setMethodCallHandler(platformCallHandler);
  }

  static Future<dynamic> platformCallHandler(MethodCall call) async {
    switch (call.method) {
      case "saveEvent":
        print("saveEvent.....");
        await ApiRepository.saveEvent(call.arguments);
        return "";
        break;
    }
  }
}
複製代碼