The first screen that we will create in the app is a screen that will allow the user to "throw" a single dice: no rules, no play. We'll just give the user a random value between 1 and 6. This will give us the opportunity to see a Flare animation in action in a Flutter screen. To do this, perform the following steps:

1. Create a new file in the lib folder of the project, called single.dart.
2. At the top of the file, import three files—the usual material.dart, our dice.dart file, and the library that will allow us to use Flare, which is flare_actor.dart, as follows:

import 'dice.dart';
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

3. Create a stateful widget, using the stful shortcut, and call this class Single.
4. Declare a String called currentAnimation at the top of the _SingleState class, as follows:

class _SingleState extends State<Single> {
String currentAnimation;

5. Override the initState() method, and inside it, set the currentAnimation String so that it contains Start. This is the name of the Flare animation that we want to show at the beginning when the screen is loaded for the first time, and the necessary code can be seen in the following snippet:

@override
void initState() {
    currentAnimation = 'Start';
    super.initState();
}

6. At the top of the build() method, find the available height and width for the app, calling the MediaQuery.of(context) size properties.
7. Still in the build() method, return a Scaffold, whose appBar contains a title of Single Dice.
8. The body of the Scaffold contains a Center widget, whose child is a Column.
9. The first widget of the Column is a Container. Set the height of the Container to be height / 1.7, and the width to be width * 0.8. You may adjust this setting according to your preferences.
10. The child of the Container widget is, finally, the Flare animation. In order to show it, call the FlareActor constructor, which, as a first parameter, takes the name of the asset that we want to show—in this case, it's assets/dice.flr.
11. The second parameter is the fit property. Set it to BoxFit.contain so that the Flare content is included within the bounds of the widget. The last parameter is the name of the animation that will be shown. Here, we'll place the currentAnimation String.
12. Under the animation, insert a button that will allow the user to play. As we want to make this button rather large, based on the available width and height of the screen, use a SizedBox as a parent of the MaterialButton. The text of the button will be just Play.
13. When the button is pressed, we want to show the Roll animation.
14. After 3 seconds, we want to show the animation containing the result, and in order to achieve this, we will create a function called callResult().

At the end of this process, your code should look like the following:

@override
Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height ;
    return Scaffold(appBar: AppBar(
        title: Text('Single Dice'),
    ),
    body: Center(
        child: Column(
        children: <Widget>[
            Container(
                height: height / 1.7,
                width: width * 0.8,
                child: FlareActor(
                    'assets/dice.flr',
                    fit: BoxFit.contain,
                    animation: currentAnimation,
                )),
            SizedBox(
                width: width/2.5,
                height: height / 10,
                child:RaisedButton(
                    child: Text('Play'),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24)
                    ),
                    onPressed: () {
                        setState(() {
                            currentAnimation = 'Roll';
                        });
                        Dice.wait3seconds().then((_){
                        callResult();
    });},))],)),);}

15. Now, in order to complete the screen, add the callResult() method, which will be asynchronous.
16. Inside the method, declare a Map of type int, String called animation, which will call the getRandomAnimation() static method from the Dice class.
17. Once the animation is ready, just call the setState() method to set the currentAnimation to be the one that was randomly returned. You may remember that the getRandomAnimation() method returns Set1, Set2, and so on. The necessary code can be seen in the following snippet:

void callResult() async {
    Map<int, String> animation = Dice.getRandomAnimation();
        setState(() {
            currentAnimation = animation.values.first;
        });
}

18. The last step before trying the animation in our app is calling the screen from the MyApp class in the main.dart file: we'll need to import single.dart and set the Single class as the home of the MaterialApp, like this:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: Single(),
    );
  }
}

Now, just try the app. When you open the app, you should see the dice at the top of the screen. When you press the Play button, the rolling animation is shown for 3 seconds, and after that, you get a random number.

To sum everything up, on this screen, you added a Flare animation and interacted with it. You are now ready to create the screen and logic for the Knockout game.