Google Flutter移动开发框架创建电商应用

学习如何安装Flutter开发环境并创建第一个Flutter应用，学习Flutter应用开发中的核心概念如widget、status等？显示数据

1。安装开发环境并创建Flutter项目

Flutter的开发文档相当优秀。请先参考官方文档安装开发环境。

开发环境安装完成后，我们就可以新建一个测试项目了。我通常使用Android Studio，因为它为flutter应用程序开发提供了完全集成的开发环境。您需要在 Android Studio 中安装 Dard 语言插件。

现在启动 Android Studio，您将看到初始化 Flutter 项目的选项：

从配置列表中选择 **Flutter Application**。

你可以给你的第一个 Flutter 应用程序起一个很酷的名字，但如果你像我一样不擅长命名，就使用 timer。

在对话框的最后一步，我们需要输入应用程序的包名：

接下来，Flutter SDK 会为应用程序创建一个初始目录结构，这是运行应用程序的入口点。

2。编写和测试应用程序代码

在 Flutter 中，一切都是小部件。 Flutter 应用程序中的图像、图标和文本都是小部件。行、列、网格等布局元素用于控制其他widget的位置、大小和对齐方式，这些布局元素本身也是widget。

参考以下代码来自定义您的文件：

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模拟器：

注意小部件的焦点，接下来我们将自定义MaterialApp的内容。我们先看一下原始版本：

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

Flutter 中的布局元素（也称为 widget）根据是否支持多个 widget 可以很容易地分为两种类型。例如，容器和填充只能包含一个底层小部件，而行和列可以包含多个。

现在我们在行布局中引入三个文本小部件：

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

现在看起来像这样：

在我们开始设置组件样式之前，建议创建一个新的小部件来显示，以解决 DRY 之后的样式问题（原理就不重复了。

用自定义的widget替换三个底层widget（稍后解释）。现在文件变成：

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

我不太擅长用户界面，但我们尽力而为，添加一些背景颜色并留出一些空白：

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: ,
            ),
          )
        ],
      ),
    );
  }
}

同时在文本下方插入一个按钮小部件，自定义代码如下：

现在是应用程序中最重要的部分：状态。状态包含计时器的当前值和运行 ID。我添加了一个 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
  }
}

按钮用于在运行或停止计时器之间切换：

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

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

    return MaterialApp(...)
  }
}

好了，我们已经完成了第一个 Flutter 应用程序，完整的 Dard 代码可以在这里下载。