Flutter快速入门 五步搞定Flutter环境配置
Flutter是什么?
Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。
Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。
为什么要使用Flutter?
Flutter有什么优势?它可以帮助你:
- 提高开发效率
同一份代码开发iOS和Android
用更少的代码做更多的事情
- 轻松迭代
在应用程序运行时更改代码并重新加载(通过热重载)
修复崩溃并继续从应用程序停止的地方进行调试
- 创建美观,高度定制的用户体验
受益于使用Flutter框架提供的丰富的Material Design和Cupertino(iOS风格)的widget
实现定制、美观、品牌驱动的设计,而不受原生控件的限制
主要有以下特点
快速开发
毫秒级的热重载,修改后,您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。
Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载,并且不会丢失状态。
这里写图片描述
富有表现力和灵活的UI
快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义,从而实现难以置信的快速渲染和富有表现力、灵活的设计。
使用Flutter内置美丽的Material Design和Cupertino(iOS风格)widget、丰富的motion API、平滑而自然的滑动效果和平台感知,为您的用户带来全新体验。
这里写图片描述
这里写图片描述
这里写图片描述
原生性能
Flutter包含了许多核心的widget,如滚动、导航、图标和字体等,这些都可以在iOS和Android上达到原生应用一样的性能。
使用Flutter的现代、响应式框架,和一系列基础widget,轻松构建您的用户界面。使用功能强大且灵活的API(针对2D、动画、手势、效果等)解决艰难的UI挑战。
class CounterState extends State<Counter> {
int counter = 0;
void increment() {
// 告诉Flutter state已经改变, Flutter会调用build(),更新显示
setState(() {
counter++;
});
}
Widget build(BuildContext context) {
// 当 setState 被调用时,这个方法都会重新执行.
// Flutter 对此方法做了优化,使重新执行变的很快
// 所以你可以重新构建任何需要更新的东西,而无需分别去修改各个widget
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: increment,
child: new Text('Increment'),
),
new Text('Count: $counter'),
],
);
}
}
心动不如行,动快速入门
1.下载flutter SDK(此步骤可以省略通过android studio安装亦可)
git clone -b master https://github.com/flutter/flutter.git
./flutter/bin/flutter --version
当然也可以直接下载
https://github.com/flutter/flutter/tags
2.下载完解压配置环境变量
;G:\flutter\flutter_windows_v0.7.3-beta\flutter\bin
3.打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装:
flutter doctor
这里写图片描述
可以看到,检查的有android sdk,android studio版本等等。对于android开发者相信这些都配置好了。
4.为android 安装Flutter环境
File -> Settings -> Plugins -> Browse Respositories -> 搜索`Flutter`
点击install 重启android studio。会自动安装dart插件。
这里写图片描述
5.创建工程
- 选择 File>New Flutter Project
- 选择 Flutter application 作为 project 类型, 然后点击 Next
- 输入项目名称 (如 myapp), 然后点击 Next
- 点击 Finish
- 等待Android Studio安装SDK并创建项目.(ps:首次加载过慢直接关闭AS重启即可)
最终运行效果
这里写图片描述Flutter的学习之路才刚刚开始。。。