Creating the bat

The bat is the shape we'll use to keep the ball from falling to the bottom of the screen. This will also require a separate file.

Create a new file called bat.dart:

  1. This will also contain a stateless widget, as the bat does not need to know its position or deal with the user. All these actions will be performed by the caller:
import 'package:flutter/material.dart';
class Bat extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}
  1. The bat will have a width and a height that will depend on the size of the screen. These will be passed from the caller, so in the bat class, create two final double variables called width and height:
final double width;
final double height;
  1. Next, create a constructor that will take two parameters, populating the two variables:
Bat(this.width, this.height);
  1. Again, the build method will return a Container, whose width and height are the values of the parameters passed in the constructor, and will have a decoration that will set the background color to be Colors.blue[900]. The final code for the class is shown here:
import 'package:flutter/material.dart';
class Bat extends StatelessWidget {
final double width;
final double height;
Bat(this.width, this.height);
@override
Widget build(BuildContext context) {
return Container(
width: width,
height: height,
decoration: new BoxDecoration(
color: Colors.blue[900],
),);
}}

At this time, we have the two main elements of the UI. We'll deal with the score text later on, when we incorporate the logic of the game. So now, we require a grid to contain the ball and the bat.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.217.95