首页 > 编程技术 > Android > Flutter之道-入门教程
2018
12-06

Flutter之道-入门教程

——路漫漫其修远兮,吾将上下而求索
为了保持对新技术的学习,决定对Google推出的Flutter技术进行研究一番。首先得将Flutter的环境给搭建起来,详尽的教程可参考官网,
https://flutter.io/docs/get-started/install/windows
如果嫌英文太麻烦,也可以参考下面的快速搭建教程。

安装Flutter SDK

1. 下载并安装最新的SDK
2. 解压zip文件,将flutter目录移到心仪的目录下,比如D:\flutter
3. 将flutter\bin目录添加到PATH下

搭建Android环境

1. 下载安装Android Studio
2. 更新Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools
3. 安装Flutter和Dart插件,在AndroidStudio设置中(File > Settings > Plugins),选择Browse repositories后, 再选中Flutter plugin,然后点击Install按钮

新建工程

  1. 打开File > New Flutter Project
  2. 选中Flutter application并点击Next
  3. 配置好Flutter SDK 的路径
  4. 输入工程名字(比如 myapp)点击Finish

于是,Flutter工程已经创建完成了~看一下目录结构

Flutter之道-入门教程 - 第1张  | FreemanApp

其中,android目录与ios目录分别是Android工程和iOS工程。android目录跟普通的Android工程目录一样,有src目录、drawable目录、AndroidManifest等。Flutter的dart代码是放在lib目录下,当前仅有main.dart。下面看下main.dart中的代码

Flutter之道-入门教程 - 第2张  | FreemanApp

这里有两个类,MyApp与MyHomePage。其中MyApp是应用入口,继承StatelessWidget,表明app本身是一个Widget,在Flutter,几乎所有一切都是Widget。MyHomePage是首页,继承StatefulWidget。

StatelessWidget是不可改变的,它的所有属性都不能改变,所有的值都是固定的;StatefulWidget在Widget的生命周期内,可能会改变状态。

Flutter之道-入门教程 - 第3张  | FreemanApp

MyHomePage的createState方法中创建了_MyHomePageState对象,这是继承State,并重写build方法,这方法中的代码就是展示首页的内容。

运行工程

下面,来运行一下这个demo,在AndroidStudio的快捷菜单中,选好target selector,然后执行Run按钮

Flutter之道-入门教程 - 第4张  | FreemanApp

等待编译完成后,在手机上就可看到这个demo了

Flutter之道-入门教程 - 第5张  | FreemanApp

本篇主要介绍了怎么搭建Flutter环境,以及运行Android端的工程。后续我们会看下iOS平台的运行效果,以及深入了解下Flutter的基本原理与框架。

欢迎关注FreemanApp订阅号

Flutter之道-入门教程 - 第6张  | FreemanApp

最后编辑:
作者:freeman
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据