学习是轻松的,做项目是痛苦的。
学习flutter的过程非常轻松的,按照官方教程一步一步实现就可以了。遇到无法调通的部分,直接看教程的源码就解决了。而且完成之后似乎就有一种莫名的满足感。
然而一旦开始做实际的项目,作为一个初学者您将遇到各种千奇百怪的问题。
开发项目时遇到两个困惑
问题1 是否能够复用之前项目的思维流程
脑子里的流程还是之前开发项目的成功经验。如果之前流程和flutter的流程一致,那么恭喜您方向走对了,剩下的就是如何实现的问题了。如果流程和flutter的流程不一致,那么只能撞破南墙后才知道应该向北走。
解决方案: 平时多总结相关流程和经验,多研究设计模式,多关注新的模式和业内开发新流程。
问题2 想实现但是不知道该如何写
流程和模式都定了,剩下的就是如何实现的问题。通过我们会思考之前学习的demo是如何写的,然后通过改写demo来完成一个一个模块的功能。有时我们积累的demo代码不够时,我们需要去Google或官网上去搜索,看看类似功能别人是如何写的
解决方案: 这个层次的问题比较好解决,主要是拼的是代码量。平时要多积累好的代码,多写心得,多去github看看别人是如何写的。
实际案例
这两天打算的做个《燕京八景》的小App,思路都写这篇文章里了《flutter作品之燕京八景App》
今天是做个app第二天,第一页和第二页都已经完成了,接下来就是实现两页之间的切换问题。在iOS里面我们可以通过点击函数来实现。但是在flutter中也差不多,因此我从github上面找了了demo来学习。实现方法果然很简单,如下
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => SecondScreen(pair.toString())));
},
于是我打算在自己项目里面试试看,由于之前自己的项目也是从基于另外一个开源代码修改的《flutter作品之燕京八景App》,没想到之前代码竟然拥有更为复杂的row widget。
class _AwesomeListItemState extends State<AwesomeListItem> {
@override
Widget build(BuildContext context) {
return new Row(
children: <Widget>[
new Container(width: 10.0, height: 180.0, color: widget.color),
new Expanded(
child: new Padding(
padding:
const EdgeInsets.symmetric(vertical: 40.0, horizontal: 20.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
widget.title,
style: TextStyle(
color: Colors.grey.shade800,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
new Padding(
padding: const EdgeInsets.only(top: 16.0),
child: new Text(
widget.content,
style: TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
new Container(
height: 150.0,
width: 150.0,
color: Colors.white,
child: Stack(
children: <Widget>[
new Transform.translate(
offset: new Offset(50.0, 0.0),
child: new Container(
height: 100.0,
width: 100.0,
color: widget.color,
),
),
new Transform.translate(
offset: Offset(10.0, 20.0),
child: new Card(
elevation: 20.0,
child: new Container(
height: 120.0,
width: 120.0,
decoration: new BoxDecoration(
color: Colors.white,
border: Border.all(
width: 10.0,
color: Colors.white,
style: BorderStyle.solid),
image: DecorationImage(
image: AssetImage(widget.image),
)),
),
),
),
],
),
),
],
);
}
相信看到此处的朋友都能体会我此刻的心情,看了前路有茫茫了。
网友评论