We'll deal with the ball first. This deserves a new file in our project, called ball.dart:
- Create a new file called ball.dart, and inside it create a stateless widget, which you can call "Ball". This widget is stateless because it does not need to know its position or state during the app. The animation will change the position of the ball widget from the calling class.
Remember that, in order to create a stateless widget, if you are using Visual Studio Code, Android Studio, or IntelliJ Idea, just type stless, and the boilerplate code will be created for you by the editor itself.
You can find the complete version of the file here:
import 'package:flutter/material.dart';
class Ball extends StatelessWidget {
@override
Widget build(BuildContext context) {
final double diam = 50;
return Container(
width: diam,
height: diam,
decoration: new BoxDecoration(
color: Colors.amber[400],
shape: BoxShape.circle,
),);
}}
- In the Ball class, first, we can set the diameter of the shape at 50 logical pixels. Of course, feel free to reduce or expand it based on your preferences.
- Then we return a container, whose height and width will be the diameter we have just set, and the decoration will have the shape of BoxShape.circle.
When you create a container, the default shape is a rectangle. By specifying BoxShape.circle, you can avoid dealing with angles in an extremely easy way.
Let's also set the color to be Colors.amber[400].
In the preceding example, we use Colors.amber[400]. Most colors have values from 100 to 900 in increments of 100, plus the color 50. Greater numbers mean darker colors. The accent colors, such as Colors.blueAccent, have a smaller set of values: 100, 200, 400, and 700.
And this is everything we need for the ball. In the next section, we'll deal with the bat.