Flutter从入门到实战
Flutter从入门到实战
Flutter概述
Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。
Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。
无需移动开发经验即可开始使用。应用程序是用Dart语言编写的,如果您使用过Java或JavaScript之类的语言,则该应用程序看起来很熟悉。使用面向对象语言的经验绝对有帮助,但一些Flutter应用程序甚至是没有编程经验的人写的!
Flutter的优势
- 提高开发效率
- 同一份代码开发iOS和Android
- 用更少的代码做更多的事情
- 轻松迭代
- 在应用程序运行时更改代码并重新加载(通过热重载)
- 修复崩溃并继续从应用程序停止的地方进行调试
- 创建美观,高度定制的用户体验
- 受益于使用Flutter框架提供的丰富的Material Design和Cupertino(iOS风格)的widget
- 实现定制、美观、品牌驱动的设计,而不受原生控件的限制
Flutter环境搭建
Flutter可以在Windows、MacOS、Linux操作系统都可以安装,本文主要以MacOS为例。
Flutter 安装
1、获取Flutter SDK
1、首先,点击下面的链接下载flutter SDK
* flutter_macos_v0.4.4-beta.zip
2、将下载的flutter解压到指定目录,在终端执行下面命令
$ cd ~/development $ unzip ~/Downloads/flutter_macos_v0.4.4-beta.zip
3、添加flutter到环境变量
在终端执行第一句,打开配置文件,然后在末尾加上flutter的环境变量,然后再编译配置文件使之生效。
$ open -e .bash_profile $ export PATH=`pwd`/flutter/bin:$PATH $ source .bash_profile
2、设置IOS
1、安装Xcode
1、通过App Store下载安装Xcode 9.0以后的版本。
2、配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
3、确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license
同意过了。
使用Xcode,您可以在iOS设备或模拟器上运行Flutter应用程序。
2、设置IOS 模拟器
如果要在IOS模拟器上测试程序,请按一下步骤:
1、在终端输入命令打开模拟器 open -a Simulator
2、检查模拟器中的设置,确认模拟器是64位版本并且不低于Iphone5s
3、根据您的开发机器的屏幕大小,模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例
4、运行flutter run
启动您的应用。
3、安装到IOS 设备
要将您的Flutter应用安装到iOS真机设备,您需要一些额外的工具和一个Apple帐户,您还需要在Xcode中进行设置。
1、安装 homebrew (如果已经安装了brew,跳过此步骤)。
2、打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具
brew update brew install --HEAD libimobiledevice brew install ideviceinstaller ios-deploy cocoapods pod setup
如果这些命令中的任何一个失败并出现错误,请运行brew doctor并按照说明解决问题。
3、安装Android Studio
至于安装Android Studio及相关环境变量的配置,这个就很简单了,这里就不做说明了。有一点就是在Android Studio安装完成之后要安装Flutter插件;步骤Preference>plugins>Browes repositories 搜索Flutter
安装并重启Android Studio,就OK了。
检查Flutter环境配置
如果您做完了上述的所有准备工作,那么我们可以在终端运行一下命令检查环境是否OK。
flutter doctor
如果出现下面的结果说明已全部安装完成
[] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale zh-Hans-CN) [] Android toolchain - develop for Android devices (Android SDK 27.0.3) [] iOS toolchain - develop for iOS devices (Xcode 9.3.1) [] Android Studio (version 3.1) [] Connected devices (2 available) • No issues found!
踩过的坑
Missing Xcode dependency: Python module “six”.
如果有其他问题按照提示一步一步做就可以了。不过我遇到一个很坑的东西,就是明明已经安装了Python但是提示说Missing Xcode dependency: Python module "six".
按照提示安装sudo easy_install six
但是又提示已安装。找了好久最终在GitHub上找到解决办法,就是在终端执行下面的命令,在此附上链接解决办法
$ python2.x -m pip install six by or $ brew reinstall python@2 $ pip install six
Flutter实战
前面介绍了好多可能大家没啥概念,光说不练假把式,下面我们就来构建一个简单的Flutter工程。
如果我们Android Studio 安装了Flutter插件,那么我们打开Android Studio 的时候会看到如下图所示有,第二行多了一个start a new Flutter project
点击我们创建一个新的Flutter程序
我们创建完进入编辑界面后,我们可以看到主要有4块区域:
1、工程文件目录.
2、构建区域在这里可以选择,运行IOS Android 模拟器。
3、Flutter 程序当前页面的组件树,Flutter 程序的核心原则是一切都是组件(Widget)
,所以他的所有都是组件。
4、dart语法分析,我们通过前面的介绍知道,Flutter程序是通过dart语言来写的。
这样创建完成之后,我们会看到lib
目录下有一个main.dart
文件,这个就是源代码:
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), ); } }
这段代码其实很简单,首先我们看到main()
函数调用了runAPP()
,这里简单说下
runApp函数接受指定的控件(Widget),并使其作为控件树(widget tree)的根控件。
runAPP的入参是下面定义的MyAPP,在MyAPP里面创建了_MyHomePageState
的对象作为首页,我们可以看到下面_MyHomePageState
里面定义了中间是两个个Text ,底部是一个floatingActionButton。关于dart的语法后续文章详细说明,这里就简单了解一下这个demo:就是点击一次下面的悬浮按钮,中间的数字会加1。
完了之后我们就可以运行,根据上面的介绍我们选择模拟器运行,如下图所示:
小结
总的来说Flutter入门还是非常简单的,dart语法也比较容易上手,个人觉得是一项非常不错的技术。以上如有哪些写的不对的地方欢迎指正。最后附上几个Flutter学习的相关链接
flutter官网
flutter中文开发者论坛
dart中文社区
demo源码地址
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
[Android]大牛直播SDK基于unity3d平台的rtmp/rtsp直播播放端SDK接口说明
最近,好多开发者在unity3d平台面临一个问题,难于找到一个真正靠谱的低延迟rtmp播放器或rtsp播放器。 不少开发者联系我们,希望大牛直播SDK能出官方版的unity3d直播播放器SDK,以下是Android端的SDK接口: /// <summary> /// Init /// </summary> public int NT_U3D_Init() { return DANIULIVE_RETURN_OK; } /// <summary> /// 开始 /// 返回播放句柄 /// </summary> public long NT_U3D_Open() { if ( 0 != player_obj_.Call<int>("Init", java_obj_cur_activity_) ) { return 0; } return player_obj_.Call<long>("Open"); } /// <summary> /// Register Game Object,用于消息传递 /// &...
- 下一篇
【对讲机的那点事】手把手教你安装公网4G对讲机读写频的驱动及写码?
大家都知道专业的对讲机需要通过写频软件来和原有的频率对频,专业的对讲机销售公司人员都能够熟练的操作,但是4G公网集群对讲机和专业对讲机读写频操作都是大同小异,但是需要装载一个USB驱动安装包,今天小编就和你来聊聊安装如何公网4G对讲机读写频的驱动及写码: 安装对讲机标准的驱动 XP电脑安装Quectel_Windows_USB_Drivers_for_EC21&EC25_V1.0.zip WIN7以上版本安装Quectel_LTE_Windows_USB_Driver_V1.0.0.zip 安装完成后电脑的设备管理器上会生成以下几个虚拟串口: 注意:设备管理器打开位置 Win7 以上操作系统:右键点击桌面的计算机图标,点击属性,在左边导航菜单中选择设备管理器 XP 操作系统:右键点击桌面的我的电脑图标,点击属性,选择硬件选项卡,在选项卡中点击设备管理器 安装安卓标准调试接口驱动 XP操作系统使用win32_X86_adb_interface_usb_driver.rar驱动文件 WIN7以上操作系统使用Android_USB_Driver.rar驱动文件 打开设备驱动器,在带?...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS7设置SWAP分区,小内存服务器的救世主