概述

混合開發(fā)入門蛮瞄，我建議大家參考flutter的官方實(shí)例，我們的實(shí)例使用的是單引擎+引擎預(yù)熱模式鲫剿，請(qǐng)參考官方文檔
將 Flutter 集成到現(xiàn)有應(yīng)用.
由于我們的項(xiàng)目之前是使用原生代碼寫的银室，項(xiàng)目大概是從2018年開始涂佃，Android這邊原生的項(xiàng)目不支持AndroidX，并且也不支持Kotlin蜈敢，后面開發(fā)的功能使用了flutter 去寫巡李。我個(gè)人也是Flutter小白，所以這篇文章可以給一些flutter入門者提供一些信心扶认。大致總結(jié)了一下我的解決點(diǎn)，我把這些總結(jié)為前殊橙、中辐宾、后三部曲

前期準(zhǔn)備

• Dart 語言了解
• Flutter 準(zhǔn)備
• Android Studio工具配置
• Flutter入門

中期上手

• Flutter混合開發(fā)
• Android和IOS原生框架封裝
• Flutter單頁面跳轉(zhuǎn)測(cè)試

后期優(yōu)化

• Flutter與原生交互通信優(yōu)化
• 原生和Flutter多頁面的跳轉(zhuǎn)優(yōu)化

接下來詳細(xì)說一下。前期的準(zhǔn)備

前期準(zhǔn)備

一膨蛮、Dart語言

Dart語法進(jìn)行非常之快叠纹，Dart語言對(duì)于java、kotlin敞葛、OC/swift開發(fā)者來說誉察，相當(dāng)?shù)挠押茫瑢?duì)于dart語法惹谐，快速略過一遍不到2小時(shí)持偏，看完了全篇驼卖。后續(xù)使用的時(shí)候，完全從網(wǎng)上照搬即可鸿秆，不用死記酌畜。
來自簡(jiǎn)書網(wǎng)友的整理《30分鐘掌握Dart語言》.當(dāng)然也可以查閱官方資料。
接下來是《Dart代碼規(guī)約》.非常重要卿叽，雖然是全英文的桥胞，使用Chrome瀏覽器，直接翻譯成中文就好考婴，閱讀速度飛快贩虾，邊學(xué)邊看。

二沥阱、Flutter的準(zhǔn)備

Flutter環(huán)境搭建
這里強(qiáng)調(diào)一點(diǎn)：flutter安裝目錄不要安裝到系統(tǒng)目錄下比如C盤缎罢，建議另裝到其他盤，否則安裝以后編譯時(shí)會(huì)遇到一些意想不到的權(quán)限問題

第一個(gè)flutter頁

這里引用官方的flutter資料講解

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',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

只有一個(gè)標(biāo)題的簡(jiǎn)單頁喳钟，F(xiàn)lutter采用的是Material設(shè)計(jì)風(fēng)格

1.png

Material 設(shè)計(jì)風(fēng)格介紹

"Material 是由 Google 創(chuàng)建的設(shè)計(jì)系統(tǒng)屁使，旨在幫助團(tuán)隊(duì)為 Android、iOS奔则、Flutter 和 Web 構(gòu)建高質(zhì)量的數(shù)字體驗(yàn)蛮寂。"--引用

Flutter的風(fēng)格是采用Material.風(fēng)格，如果你是Android開發(fā)者易茬，這種風(fēng)格應(yīng)該有所了解酬蹋。這里可以看出Flutter也是谷歌的親兒子。如果你還不熟悉抽莱，請(qǐng)點(diǎn)擊查看.熟悉設(shè)計(jì)風(fēng)格的同時(shí)范抓，可以方便和產(chǎn)品經(jīng)理以及UI設(shè)計(jì)師在必要的時(shí)候進(jìn)行心靈的溝通，你懂得食铐。

三匕垫、Android studio準(zhǔn)備

“工欲善其事，必先利其器”看到這里虐呻，接下來是Android studio的工具配置

1象泵、必備插件安裝

AS 必裝： Flutter、Dart
Flutter Enhancement Suite：
WidgetGenerator： 快速創(chuàng)建flutter widget
windows系統(tǒng)【Settings】→【Plugins】→【Marketplace】
Mac系統(tǒng)【Preferences】→【Plugins】→【Marketplace】
搜索插件安裝斟叼，安裝完之后記得重啟Android Studio否則無法立即生效

2偶惠、配置Dart模板

新建Dart類,像Java文件一樣順暢
windows系統(tǒng)
【Settings】→【Editor】→【File and Code Templates】→【Files】→【Dart File】，
Mac系統(tǒng)
【Preferences】→【Editor】→【File and Code Templates】→【Files】→【Dart File】朗涩，
這樣載右鍵新增文件的時(shí)候忽孽，就會(huì)自動(dòng)生成文件模板 這里增加一些文件頭部

 import 'package:flutter/material.dart';

/// @author ${USER}

/// @date  ${DATE}

/// @email 

/// @description ${NAME}

此時(shí)新建Dart就可以生成.dart文件模板了

3.flutter快捷生成代碼

1、stful
2、stless
...
這里網(wǎng)友有整理的非常全面的資料
flutter 生成文檔_Flutter 快捷開發(fā) Mac Android Studio 篇.

4.Flutter 入門

《Flutter實(shí)戰(zhàn)-電子書》.都是參考的官方的資料兄一，直接點(diǎn)擊跳轉(zhuǎn)鏈接就好厘线，大概每天1小時(shí)，只用了一周的時(shí)間瘾腰，其實(shí)《Flutter實(shí)戰(zhàn)》看前三章皆的，就可以開始寫代碼了。

image.png

image.png