📜  Flutter – Magic 8 Ball 应用程序

📅  最后修改于: 2021-09-23 06:31:36             🧑  作者: 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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!