Flutter从零学起：创建一个简单的番茄计时器APP

2023-11-15 02:15:16

从零开始学习Flutter

Flutter是一个由谷歌开发的跨平台应用开发框架，它允许你使用相同的代码构建iOS、Android和Web应用程序。Flutter之所以如此受欢迎，是因为它提供了快速开发、跨平台支持和丰富的组件库等优势。

搭建Flutter项目

首先，创建一个新的Flutter项目。你可以使用Flutter CLI工具或Android Studio来完成这个步骤。如果你使用Flutter CLI工具，只需在终端中运行以下命令：

flutter create my_app

如果你使用Android Studio，则可以按照以下步骤操作：

打开Android Studio。
单击“文件”>“新建”>“项目”。
在“新建Flutter项目”对话框中，选择“Flutter应用”并单击“下一步”。
在“项目名称”字段中，输入你的项目名称。
在“项目位置”字段中，选择要保存项目的目录。
单击“完成”。

创建第一个页面

现在，让我们创建一个简单的页面来显示番茄计时器。

在lib/main.dart文件中，添加以下代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '番茄计时器',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('番茄计时器'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

保存文件并运行应用程序。你应该会看到一个简单的页面，上面写着“Hello, World!”。

处理用户输入

现在，让我们添加一个按钮来启动计时器。

在MyHomePage类的build方法中，添加以下代码：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('番茄计时器'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello, World!'),
            RaisedButton(
              onPressed: () {
                // TODO: 启动计时器
              },
              child: Text('启动计时器'),
            ),
          ],
        ),
      ),
    );
  }

保存文件并运行应用程序。你应该会看到一个简单的页面，上面有一个按钮，上面写着“启动计时器”。

实现倒计时功能

现在，让我们实现倒计时功能。

在MyHomePage类的build方法中，添加以下代码：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('番茄计时器'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello, World!'),
            RaisedButton(
              onPressed: () {
                // TODO: 启动计时器
              },
              child: Text('启动计时器'),
            ),
            Text('剩余时间:'),
            Text('00:00'),
          ],
        ),
      ),
    );
  }