【Flutter教程】从零构建电商应用(一)
在这个系列中,我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分,将学习如何安装Flutter开发环境并创建第一个Flutter应用,并学习Flutter应用开发中的核心概念,例如widget、状态等。
本系列教程包含如下四个部分,敬请期待:
- 如何从零构建flutter应用
- 如何在flutter中布局元素
- 如何在flutter中组织数据
- 如何在flutter中展示数据
1. 开发环境安装与Flutter项目创建
Flutter的开发文档相当出色,请参考官方文档先安装开发环境。
一旦开发环境安装好,我们可以创建一个新的测试项目。我倾向于使用android studio,因为它为flutter应用的开发提供了一个完备的集成开发环境。你需要在Android studio中安装一个Dard语言插件。
现在启动Android Studio,你会看到初始化Flutter项目的选项:
从配置列表中选择Flutter Application 。
可以为你的第一个Flutter应用起一个酷炫的名字,不过如果你和我一样不善于起名,就用timer好了。
对话框的最后一步,会要求我们填写应用的包名:
接下来Flutter SDK就会为应用创建一个初始的目录结构,main.dart是应用执行的入口。
2. 编写并测试应用代码
在Flutter中,一切都是控件(widget)。Flutter应用中的图像、图标和文本都是widget。布局元素例如行、列、栅格等用来安排其他widget的位置、大小和对齐,而这些布局元素本身也是widget。
参考如下代码修改你的main.dart文件:
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Welcome to Flutter',home: Scaffold(appBar: AppBar(title: Text('Welcome to Flutter'),),body: Center(child: Text('Hello World'),),),);}
}
现在启动Android模拟器:
注意widget的焦点,我们接下来将修改MaterialApp的内容。先看一下原始版本:
body: Center(child: Text('Hello World'),
)
Flutter中的布局元素(也是widget)可以根据其是否支持包含多个widget,而简单地归类为两种类型。例如,Container、Padding只能包含一个子widget,而Row、Column则可以包含多个。
现在我们在Row布局中引入三个文本widget:
body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('0'),Text('0'),Text('0'),],),
),
现在看起来是这样:
在我们开始设置组件的样式之前,建议先创建一个新的widget来处理样式问题,以便遵循DRY(Don't Repeat Yoursel)原则。
将三个子widget用一个自定义widget(后面解释)替换。现在main.dart文件变成:
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Welcome to Flutter',home: Scaffold(appBar: AppBar(title: Text('Timer'),),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[CustomTextContainer(),CustomTextContainer(),CustomTextContainer(),],),),),);}
}class CustomTextContainer extends StatelessWidget {@overrideWidget build(BuildContext context) {return Text('00');}
}
我不是很擅长用户界面,但是我们还是尽力吧,加点背景色,留点空白:
class CustomTextContainer extends StatelessWidget {CustomTextContainer({this.label, this.value});final String label;final String value;@overrideWidget build(BuildContext context) {return Container(margin: EdgeInsets.symmetric(horizontal: 5),padding: EdgeInsets.all(20),decoration: new BoxDecoration(borderRadius: new BorderRadius.circular(10),color: Colors.black87,),child: Column(mainAxisSize: MainAxisSize.min,children: <Widget>[Text('$value',style: TextStyle(color: Colors.white,fontSize: 54,fontWeight: FontWeight.bold,),),Text('$label',style: TextStyle(color: Colors.white70,),)],),);}
}
同时,在文本下面插入一个按钮widget,修改后的代码运行结果如下:
现在到了app最不可或缺的部分了:状态。状态将持有timer的当前值和运行标识。我
补充了一个TimerState类,它负责维护状态,同时构建widget树。
class Timer extends StatefulWidget {@overrideState<StatefulWidget> createState() {return new TimerState();}
}class TimerState extends State<Timer> {int secondsPassed = 0;bool isActive = false;@overrideWidget build(BuildContext context) {// Return Widget Tree}
}
按钮用来切换timer的运行或者停止:
RaisedButton(child: Text(isActive ? 'STOP' : 'START'),onPressed: () {setState(() {isActive = !isActive;});},
)
Dart有个用于异步操作的优雅的模块。我们可以使用其Timer类来实现读秒。修改后的TimerAppState代码如下,注意我们已经重构Timer类并改名为TimerApp以避免与异步模块中的Timer类混淆:
class TimerAppState extends State<TimerApp> {static const duration = const Duration(seconds:1);int secondsPassed = 0;bool isActive = false;Timer timer;void handleTick() {if (isActive) {setState(() {secondsPassed = secondsPassed + 1;});}}@overrideWidget build(BuildContext context) {if (timer == null)timer = Timer.periodic(duration, (Timer t) {handleTick();});int seconds = secondsPassed % 60;int minutes = secondsPassed ~/ 60;int hours = secondsPassed ~/ (60*60);return MaterialApp(...)}
}
好了,我们已经完成了第一个Flutter应用,完整的Dard代码可以在这里下载。
原文链接:【Flutter教程】从零构建电商应用(一)
汇智网翻译整理,转载请标明出处。
转载于:https://blog.51cto.com/13697184/2329763
【Flutter教程】从零构建电商应用(一)相关推荐
- 使用java开发flutter_Flutter教程从零构建电商应用(一)
在这个系列中,我们将学习如何使用google的移动开发框架flutter创建一个电商应用.本文是flutter框架系列教程的第一部分,将学习如何安装Flutter开发环境并创建第一个Flutter应用 ...
- 用Elasticsearch构建电商搜索平台(有赞)
随着互联网数据规模的爆炸式增长,如何从海量的历史,实时数据中快速获取有用的信息,变得越来越有挑战性. 电商数据系统主要类型 一个中等的电商平台,每天都要产生百万条原始数据,上亿条用户行为数据.一般来说 ...
- 干货:5个维度构建电商全景大数据分析
电商是一个伴随数据而生的行业,数据在电商平台上高速运转,由此也诞生了非常多的电商信息化平台,有物流系统.供应链系统.OA系统.流量分析平台等,而各平台产生的数据都被分散在各个系统中,无法发挥出数据的价 ...
- 构建电商网站业务安全系统,防止“薅羊毛”
构建电商网站业务安全系统,防止"薅羊毛" 2020-02-19 新零售安全 场景描述 业务运营活动是电商行业开展业务必不可少的手段,但大流量带来的系统可用性.优惠券带来的" ...
- 基于Flink+Alink构建电商全端智能AI个性化实时推荐系统
如今随着互联网发展,数据量不断增大,大数据已经成为各个互联网公司的重点方向,而推荐系统成为互联网必不可少的配置,一个好的推荐系统,能为企业带来了可观的用户流量和销售额,特别对于电商系统,好的推荐系统可 ...
- React Native 实战:构建电商 App
课程介绍 React Native 充分利用了 Facebook 的现有轮子,是一个很优秀的集成作品,使用 RN 即可做到无需编译就能远程热更新 App,再加上友好的开发方式.快到爆炸的开发效率.RN ...
- 用Elasticsearch构建电商搜索平台,一个极有代表性的基础技术架构和算法实践案例
转自:http://www.sohu.com/a/114545287_116235 电商数据系统主要类型 一个中等的电商平台,每天都要产生百万条原始数据,上亿条用户行为数据.一般来说,电商数据一般有3 ...
- 用Elasticsearch构建电商搜索平台,一个极有代表性的基础技术架构和算法实践案例(转)
转自:https://blog.csdn.net/jek123456/article/details/54562158 随着数据规模的爆炸式增长,如何从海量的历史,实时数据中快速获取有用的信息,变得越 ...
- 用Elasticsearch构建电商搜索平台
电商数据系统主要类型 一个中等的电商平台,每天都要产生百万条原始数据,上亿条用户行为数据.一般来说,电商数据一般有3种主要类型的数据系统: 关系型数据库 ,大多数互联网公司会选用mysql作为关数据库 ...
最新文章
- /etc/fstab文件损坏怎么办
- 炼数成金数据分析课程---16、机器学习中的分类算法(交叉内容,后面要重点看)...
- [css] 重置(初始化)css的作用是什么?
- nrf52840 gpiote如何配置中断输入_西门子S7-200 SMART PID回路控制,配置PID向导,查看项目组件...
- [总]Android高级进阶之路
- 【房价预测】基于matlab GM模型房价预测【含Matlab源码 346期】
- P4 用verilog描述单周期CPU的学习笔记和总结(基于P3)
- 51单片机8位数码管时钟c语言,51单片机8位数码管电子时钟(完结)
- cad批量选择相同块_在CAD中如何快速选择相同或类似的图形、图块?
- Effective C++中文版
- android实现开机自动运行程序,Android编程实现应用程序开机自启动的方法
- 毕索大学计算机科学怎么样,毕索大学计算机硕士介绍
- 1024 程序员节,拿个勋章
- 查询Linux中CPU的核数
- 奉劝那些想涨工资的程序员,这些 IT 大神们都在用的网站,你越早知道越好(建议收藏)!!...
- 【微信小程序】随机点名系统(点击开始滚动名字点击结束按钮结束滚动)
- 系统的软中断CPU使用率升高,我该怎么办?
- Android测试之logcat日志
- 团队管理之团队气氛篇
- RTX 4090来了!显卡换新,驱动别拉胯
热门文章
- 实现linux cp 命令和修改配置文件
- html复制文字兼容手机,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
- 梁兴珍 java_数据结构与算法_Java语言
- Android 第九课 常用控件-------ListView
- 三年经验前端社招——腾讯微保
- 面试官问:能否模拟实现JS的bind方法(高频考点)
- svg 线条动画浅尝
- ubuntu7.10安装到3D开启
- 力登:以智能化管理提升数据中心服务能力成熟度
- IOS-网络(文件上传)