文档章节

Flutter新手入门:从零构建电商应用

汇智网教程
 汇智网教程
发布于 2018/12/11 11:43
字数 1222
阅读 510
收藏 7

在这个系列中,我们将学习如何使用google的移动开发框架flutter创建一个电商应用。 本文是flutter框架系列教程的第一部分,将学习如何安装Flutter开发环境并创建第一个 Flutter应用,并学习Flutter应用开发中的核心概念,例如widget、状态等。

本系列教程包含如下四个部分,敬请期待:

  1. 如何从零构建flutter应用
  2. 如何在flutter中布局元素
  3. 如何在flutter中组织数据
  4. 如何在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 {
  @override
  Widget 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 {
  @override
  Widget 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 {
  @override
  Widget build(BuildContext context) {
    return Text('00');
  }
}

我不是很擅长用户界面,但是我们还是尽力吧,加点背景色,留点空白:

class CustomTextContainer extends StatelessWidget {
  CustomTextContainer({this.label, this.value});

  final String label;
  final String value;

  @override
  Widget 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 {
  @override
  State<StatefulWidget> createState() {
    return new TimerState();
  }
}

class TimerState extends State<Timer> {
  int secondsPassed = 0;
  bool isActive = false;
  
  @override
  Widget 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;
      });
    }
  }

  @override
  Widget 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教程】从零构建电商应用(一)

© 著作权归作者所有

汇智网教程
粉丝 16
博文 198
码字总数 231446
作品 0
东城
私信 提问
【Flutter教程】从零构建电商应用(一)

在这个系列中,我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分,将学习如何安装Flutter开发环境并创建第一个Flutter应用,并学习Flu...

笔阁
2018/12/13
1K
0
革命性移动端开发框架-Flutter时间简史

说到Flutter,可能很多同学都会将它和这几个词关联起来:新兴的、移动端、动态化、跨平台、开发框架。 从去年开始Flutter的热度在不断地上升,那么它对很多同学造成了一个误区:认为Flutter...

JiaPengHui
03/09
0
0
Flutter 开发实战资源推荐

这是一篇实战类资源推荐,其实Flutter的入门资料官方已经做得很好了,如果你是零基础,还是建议先啃一遍官方的教程,然后再看以下实战资源,相信在你看官方课程中涉及到的一些疑问,下面的资...

大灰狼的小绵羊哥哥
2018/10/08
0
0
我看完227篇文章,总结出一份Flutter入门教程

2018年6月21日,Google在GTMC大会上发布了 Flutter preview 1。这标志着 Flutter 发展已经进入到一个新阶段,即将迎来 1.0 的稳定版本。 本文致力于整理Flutter的入门的文章。作为自己学习 ...

掘金官方
2018/07/04
0
0
Flutter资源收集(持续更新)

我是小前端一枚,最近没事研究了一下flutter,顺手做了一下有关资源的收集 Flutter资源收集,持续更新一下,有好的资源欢迎来补充 Github 基础+资料 Flutter Flutter中文网 Flutter中文网2 F...

龙荩草
05/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
38分钟前
42
0
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
9
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部