google移动开发框架flutter创建一个电商应用

2019-04-0317:09:01APP与小程序开发Comments1,788 views字数 3410阅读模式

学习如何安装Flutter开发环境并创建第一个 Flutter应用，并学习Flutter应用开发中的核心概念，例如widget、状态等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

本系列教程包含如下四个部分，敬请期待：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

如何从零构建flutter应用
如何在flutter中布局元素
如何在flutter中组织数据
如何在flutter中展示数据

1. 开发环境安装与Flutter项目创建

Flutter的开发文档相当出色，请参考官方文档先安装开发环境。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

一旦开发环境安装好，我们可以创建一个新的测试项目。我倾向于使用android studio，因为它为flutter应用的开发提供了一个完备的集成开发环境。你需要在Android studio中安装一个Dard语言插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

现在启动Android Studio，你会看到初始化Flutter项目的选项：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

从配置列表中选择**Flutter Application **。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

可以为你的第一个Flutter应用起一个酷炫的名字，不过如果你和我一样不善于起名，就用timer好了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

对话框的最后一步，会要求我们填写应用的包名：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

接下来Flutter SDK就会为应用创建一个初始的目录结构，是应用执行的入口。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

2. 编写并测试应用代码

在Flutter中，一切都是控件（widget）。Flutter应用中的图像、图标和文本都是widget。布局元素例如行、列、栅格等用来安排其他widget的位置、大小和对齐，而这些布局元素本身也是widget。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

参考如下代码修改你的文件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

import 'package:flutter/';

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模拟器：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

注意widget的焦点，我们接下来将修改MaterialApp的内容。先看一下原始版本：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

body: Center(
  child: Text('Hello World'),
)

Flutter中的布局元素（也是widget）可以根据其是否支持包含多个widget，而简单地归类为两种类型。例如，Container、Padding只能包含一个子widget，而Row、Column则可以包含多个。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

现在我们在Row布局中引入三个文本widget：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

body: Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('0'),
      Text('0'),
      Text('0'),
    ],
  ),
),

现在看起来是这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

在我们开始设置组件的样式之前，建议先创建一个新的widget来处理样式问题，以便遵循DRY（Don't Repeat Yoursel）原则。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

将三个子widget用一个自定义widget（后面解释）替换。现在文件变成：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

import 'package:flutter/';

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');
  }
}

我不是很擅长用户界面，但是我们还是尽力吧，加点背景色，留点空白：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

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

  final String label;
  final String value;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: (horizontal: 5),
      padding: (20),
      decoration: new BoxDecoration(
        borderRadius: new BorderRadius.circular(10),
        color: ,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            '$value',
            style: TextStyle(
              color: Colors.white,
              fontSize: 54,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            '$label',
            style: TextStyle(
              color: ,
            ),
          )
        ],
      ),
    );
  }
}

同时，在文本下面插入一个按钮widget，修改后的代码运行结果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

现在到了app最不可或缺的部分了：状态。状态将持有timer的当前值和运行标识。我补充了一个TimerState类，它负责维护状态，同时构建widget树。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

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的运行或者停止：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

RaisedButton(
  child: Text(isActive ? 'STOP' : 'START'),
  onPressed: () {
    setState(() {
      isActive = !isActive;
    });
  },
)

Dart有个用于异步操作的优雅的模块。我们可以使用其Timer类来实现读秒。修改后的 TimerAppState代码如下，注意我们已经重构Timer类并改名为TimerApp以避免与异步模块中的Timer类混淆：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

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 = (duration, (Timer t) {
        handleTick();
      });

    int seconds = secondsPassed % 60;
    int minutes = secondsPassed ~/ 60;
    int hours = secondsPassed ~/ (60*60);

    return MaterialApp(...)
  }
}

好了，我们已经完成了第一个Flutter应用，完整的Dard代码可以在这里下载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11127.html

google移动开发框架flutter创建一个电商应用

1. 开发环境安装与Flutter项目创建

2. 编写并测试应用代码

小程序备案详细操作流程

微信小程序备案怎么做？5步极简教程版

小程序开发是什么价格？贵不贵？

广东、湖北、内蒙古多地通管局：4月1日起未备案APP小程序将被下架

微信小程序简便注销方法及流程（无需对公打款免备案烦恼）

App备案流程、时间要求和常见问题

企业、商家和工作室抖音小程序备案流程步骤教程

jenkins构建微信小程序并展示二维码教程

商城小程序开发功能有哪些？

微信小程序制作教程：自开或外包

Comment