Flutter – Magic 8 Ball 应用程序

📌 相关文章

📜 Flutter – Magic 8 Ball 应用程序

📅 最后修改于: 2021-09-02 05:31:10 🧑 作者: Mango

我们将构建一个 Magic 8 Ball 应用程序，它将为您提供所有有趣的棘手问题的答案(基本上它是一个有趣的游戏应用程序，它将使用 Stateful 小部件更改其图像 Flatbutton 的状态)。为此，我们将使用无状态和有状态Flutter小部件，一个 Flatbutton。

我们将在此项目中使用VS Code IDE，您也可以使用 Android Studio 或任何其他 IDE。现在，首先，按照初始步骤创建Flutter项目，然后按照以下步骤操作：

第一步：在项目目录下创建一个images文件夹，添加需要的图片。

注意：文章中使用的图片可以从这里下载图片，如果你想跟随。

第 2 步：现在，将图像包含在 pubspec.yaml文件以在应用程序中使用它们。

注意：使用适当的缩进，否则您的图像将不会被包含在内。

第 3 步：现在，在 main.js 中添加以下代码。dart文件：

Dart

// importing flutter and dart packages
import 'package:flutter/material.dart';
import 'dart:math';
  
// Creates a Material App
void main() => runApp(
      MaterialApp(
        home: BallPage(),
      ),
    );
  
// Creates a Scaffold with
// appbar using Stateless widget 
class BallPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green[100],
      appBar: AppBar(
        backgroundColor: Colors.green[600],
        title: Text('GeeksforGeeks'),
      ),
      body: Ball(),
    );
  }
}
  
// Creates a Stateful widget 
class Ball extends StatefulWidget {
  Ball({Key key}) : super(key: key);
  
  @override
  _BallState createState() => _BallState();
}
  
class _BallState extends State {
  int ballNumber = 1;
    
  @override
    
  // Returns app with centered image Flatbutton  
  Widget build(BuildContext context) {
    return Center(
      child: FlatButton(
        onPressed: () {
          setState(() {
              
            // Random.nextInt(n) returns random
            // integer from 0 to n-1
            ballNumber = Random().nextInt(5) + 1;
          });
        },
          
        // Adding images
        child: Image.asset('images/ball$ballNumber.png'),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?