第一章●第三节:Hello World!
2019-04-28 本文已影响23人
白晓明
Flutter 特点
- 快速开发:Flutter提供了毫秒级的热重载,可以帮助我们快速的进行测试、构建UI、添加功能并更快的修复错误。
- 富有表现和灵活的UI:使用Flutter内置的Material Design和Cupertino 组件、丰富的motion API、平滑而自然的滑动小伙和平台感知。
- 响应式框架:在Flutter中一切皆为组件,我们可以通过组件组装来构建复杂的用户界面。使用功能强大且灵活的API(针对2D、动画、手势、效果等)解决艰难的UI挑战。
- 访问本地功能和SDK:Flutter允许混合开发,即可以复用现有的Java、Swift或Object-c代码,访问IOS或Android原生系统功能和系统SDK。
- 统一的应用开发体验:Flutter拥有丰富的工具和库,可以帮助我们轻松完成IOS和Android应用程序的开发。
创建第一个APP
- 打开Flutter,点击Start a new Flutter project。
![](https://img.haomeiwen.com/i113610/4d80c7c92689b984.jpg)
- 选择Flutter Application,并点击Next。
![](https://img.haomeiwen.com/i113610/50b23663c7f54a76.jpg)
- 填写Flutter应用程序名称,选择Flutter SDK安装目录,并点击Next。
![](https://img.haomeiwen.com/i113610/2ace5b7611169f74.jpg)
- 设置Flutter应用程序包名,一般为公司域名反写,并点击Next。
![](https://img.haomeiwen.com/i113610/a19820738c6aeef9.jpg)
- 初次创建Flutter应用程序打开时比较慢,因为需要下载一些依赖项。目录结构如下所示。
![](https://img.haomeiwen.com/i113610/2bbf96043f631ae2.jpg)
由于创建时带有官方案例,因此修改main.dart代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(
new MaterialApp(
debugShowCheckedModeBanner: false,//取消右上角显示的debug样式
home: new Scaffold(
appBar: new AppBar(
title: new Text('Hello World'),
),
body: new Center(
child: new Text("Hello World !"),
),
),
)
);
}
选择我们的模拟器,并运行程序。
![](https://img.haomeiwen.com/i113610/c51ea55b0267ae5a.jpg)
程序最终效果如下所示:
![](https://img.haomeiwen.com/i113610/9039a83f40b91626.jpg)
我们修改main.dart中页面文字为“我的第一个Flutter应用程序”,来体验一下热重载。
![](https://img.haomeiwen.com/i113610/9668ec14386294e5.jpg)
本节内容到此结束,若在使用过程中遇到问题,欢迎留言交流,我们一起成长。