Flutter入门-前期准备

概述

混合开发入门，我建议大家参考flutter的官方实例，我们的实例使用的是单引擎+引擎预热模式，请参考官方文档
将 Flutter 集成到现有应用.
由于我们的项目之前是使用原生代码写的，项目大概是从2018年开始，Android这边原生的项目不支持AndroidX，并且也不支持Kotlin，后面开发的功能使用了flutter 去写。我个人也是Flutter小白，所以这篇文章可以给一些flutter入门者提供一些信心。大致总结了一下我的解决点，我把这些总结为前、中、后三部曲

前期准备

• Dart 语言了解
• Flutter 准备
• Android Studio工具配置
• Flutter入门

中期上手

• Flutter混合开发
• Android和IOS原生框架封装
• Flutter单页面跳转测试

后期优化

• Flutter与原生交互通信优化
• 原生和Flutter多页面的跳转优化

接下来详细说一下。前期的准备

前期准备

一、Dart语言

Dart语法进行非常之快，Dart语言对于java、kotlin、OC/swift开发者来说，相当的友好，对于dart语法，快速略过一遍不到2小时，看完了全篇。后续使用的时候，完全从网上照搬即可，不用死记。
来自简书网友的整理《30分钟掌握Dart语言》.当然也可以查阅官方资料。
接下来是《Dart代码规约》.非常重要，虽然是全英文的，使用Chrome浏览器，直接翻译成中文就好，阅读速度飞快，边学边看。

二、Flutter的准备

Flutter环境搭建
这里强调一点：flutter安装目录不要安装到系统目录下比如C盘，建议另装到其他盘，否则安装以后编译时会遇到一些意想不到的权限问题

第一个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'),
        ),
      ),
    );
  }
}

只有一个标题的简单页，Flutter采用的是Material设计风格

1.png

Material 设计风格介绍

"Material 是由 Google 创建的设计系统，旨在帮助团队为 Android、iOS、Flutter 和 Web 构建高质量的数字体验。"--引用

Flutter的风格是采用Material.风格，如果你是Android开发者，这种风格应该有所了解。这里可以看出Flutter也是谷歌的亲儿子。如果你还不熟悉，请点击查看.熟悉设计风格的同时，可以方便和产品经理以及UI设计师在必要的时候进行心灵的沟通，你懂得。

三、Android studio准备

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

1、必备插件安装

AS 必装： Flutter、Dart
Flutter Enhancement Suite：
WidgetGenerator： 快速创建flutter widget
windows系统【Settings】→【Plugins】→【Marketplace】
Mac系统【Preferences】→【Plugins】→【Marketplace】
搜索插件安装，安装完之后记得重启Android Studio否则无法立即生效

2、配置Dart模板

新建Dart类,像Java文件一样顺畅
windows系统
【Settings】→【Editor】→【File and Code Templates】→【Files】→【Dart File】，
Mac系统
【Preferences】→【Editor】→【File and Code Templates】→【Files】→【Dart File】，
这样载右键新增文件的时候，就会自动生成文件模板 这里增加一些文件头部

 import 'package:flutter/material.dart';

/// @author ${USER}

/// @date  ${DATE}

/// @email 

/// @description ${NAME}

此时新建Dart就可以生成.dart文件模板了

3.flutter快捷生成代码

1、stful
2、stless
...
这里网友有整理的非常全面的资料
flutter 生成文档_Flutter 快捷开发 Mac Android Studio 篇.

4.Flutter 入门

《Flutter实战-电子书》.都是参考的官方的资料，直接点击跳转链接就好，大概每天1小时，只用了一周的时间，其实《Flutter实战》看前三章，就可以开始写代码了。

image.png
对于第一个Flutter项目入手的小伙伴，看完前三章，直接跳转到第十五章）
一个完整的Flutter应用.
image.png