学习flutter已经有一段时间了,现在已经开始到了具体项目中。想着刚开始学习的时候,好多文档资料说的都不一样,就准备把新项目的过程记录下来。可能有不对的地方,欢迎大家指出。废话不多说,开整~
flutter 官方推荐的开发工具是Android studio、visual studio 、intellij IDEA,由于习惯了android 开发,所以这里选择的还是Android studio。没有开发环境的需要看下前一篇搭建开发环境。
一、安装插件
flutter 提供了android的插件我们需要安装一下。打开studio的设置-->plugins-->Marketplace
搜索 dart 和 flutter 安装,安装完毕之后会进行重启。下面是安装完成后的样子。
注意:这个地方有个坑,可能你的插件Marketplace根本搜索不出来任何插件。解决办法是,打开 studio system settings --> Updates --> 去掉 use secure connection的勾选。如图:
二、新建工程
安装完插件之后,我们就可以创建flutter 工程了。
选择 开始一个flutter project
这里有4种类型,我们先选择第一种 Flutter Application 其他的类型,后面的工程里会使用到,到时候我们在讲。
这个地方值得注意,因为之前提前下载了 flutter sdk 所以这个地方配置以下就可以了,如果没有下载,在这个地方点击install,并且指定好目录同样会进行下载。一路next之后,新创建的工程就准备好了。这里值得多说一下,我第一次开发的时候,在这个页面卡了好久好久,后来找到原因是gradle下载的问题,解决了之后,再也没有遇到过。
由于我之前使用了 i18n的国际化资源插件,所以在创建好工程后会多出两个文件夹,这篇文章不涉及资源文件,大家可以忽略。
打开main.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// 这个地方是设置主题颜色
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
后面我会继续更新具体的业务需求,这里就不对控件做具体描述。
三、运行
然后我们打开模拟器,运行一下程序。我这里选择的是iOS模拟器,如果有android真机或者模拟器也可以同样运行。
flutter的一个特点就是fast development,官方传说热启动可以达到亚秒级别。我们现在来修改一下屏幕中间的文字。
You have pushed the button this many times:--->改成 哈哈哈逗比123~~~~~~ emmmmm 有点偏离主题,还是改成hellow world吧!然后保存在来看模拟器,也跟着几乎同步变化了。这样的加载机制会大大提高我们的开发效率,不过这套机制也有不足,我现在在开发项目的时候,就经常遇到热加载不能把最新的代码载入的情况,如果出现这样的事情,大家可以执行一下 flutter clean 将之前的缓存清理掉,然后在重新开始编译运行。
hello world 完美运行!请期待下篇