Flutter – 掷骰子应用程序

本篇文章将介绍一个使用 Flutter 开发的简单应用程序 – 掷骰子。本应用程序的目的是在一个固定的范围内随机得到一个数字，可以用于许多需要随机数的场合。

开发环境

• Flutter 2.0.6
• Dart 2.12.3

项目结构

• main.dart: 应用程序的入口点，启动应用程序的 MyApp。
• myapp.dart: 应用程序的主体，包含一个用于显示随机数的 Text 组件和一个用于执行随机数生成的 FlatButton 组件。
• randomizer.dart: 随机数生成器，使用 dart:math 库中的 Random 类来生成随机数。

代码实现

主体部分

myapp.dart 文件：

import 'package:flutter/material.dart';
import 'randomizer.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _randomNumber = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dice Randomizer'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_randomNumber',
              style: TextStyle(fontSize: 80),
            ),
            SizedBox(
              height: 20,
            ),
            FlatButton(
              onPressed: () {
                setState(() {
                  _randomNumber = Randomizer.getRandomNumber();
                });
              },
              child: Text(
                'Roll Dice',
                style: TextStyle(fontSize: 32),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这里，我们定义了一个包含两个组件(Text 和 FlatButton) 的主体部分。其中，Text 组件用于显示随机数，FlatButton 组件用于执行随机数生成器并更新显示的随机数。在 FlatButton 的 onPressed 回调函数中，我们调用了 setState 来更新 _randomNumber 的值，以便在 Text 组件中显示出随机的数字。

随机数生成器

randomizer.dart 文件：

import 'dart:math';

class Randomizer {
  static int getRandomNumber() {
    final random = Random();
    return random.nextInt(6) + 1;
  }
}

Randomizer 类是一个静态类，并且只包含一个名为 getRandomNumber 的静态方法，用于生成一个范围在 1-6 之间的随机数。在 getRadomNumber 函数中，我们使用 dart:math 库中的 Random 类来生成随机数，然后加 1 以确保生成的数字在 1-6 之间。

入口点

main.dart 文件：

import 'package:flutter/material.dart';
import 'myapp.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Dice Randomizer',
      home: MyApp(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

在这里，我们定义了一个 MaterialApp，并将 MyApp 作为它的 home 属性。我们还将 debugShowCheckedModeBanner 设置为 false，以便在应用程序中不显示 Debug 模式的横幅。

效果演示

启动应用程序后，你将能够在应用程序的主界面中看到一个用于展示随机数的 Text 组件和一个用于执行随机数生成器的 FlatButton 组件。当你点击 FlatButton 后，Text 组件中的数字将随机更新，从而达到投掷骰子的效果。

总结

在本篇文章中，我们使用 Flutter 开发了一个简单的投掷骰子的应用程序。我们讨论了 Flutter 的开发环境和项目结构，以及如何在 Dart 中使用 dart:math 库来生成随机数。我们也分享了本应用程序的完整代码。