Building Complex UI in Flutter: Magic 8-Ball

Jun 29 2021 , Dart 2.13, Flutter 2.0, VS Code Dart 2.13, Flutter 2.0, VS Code

Learn how to build complex user interfaces in Flutter by creating a nearly 3D Magic 8-Ball using standard Flutter components. By Nic Ford.

Leave a rating/review
Download materials
Save for later
Share
You are currently viewing page 5 of 5 of this article. Click here to view the first page.
Contents

Contents

Hide contents

Building Complex UI in Flutter: Magic 8-Ball

35 mins

Fading the Prediction

Finally, fade Prediction out while it’s being dragged and change its angle on release so that it comes back slightly askew, just like real-world 8-balls.

Add and update an angle of wobble field:

double wobble = 0.0;

...

void _end() {
  ...
  wobble = rand.nextDouble() * (wobble.isNegative ? 0.5 : -0.5);
  ...
}
Note: wobble is in the range -0.5 to 0.5 radians, roughly -30° to +30°. Checking negativity allows you to invert the sign on each new prediction, making the wobble clockwise then counter-clockwise in turn.

Surround Prediction with Transform and Opacity widgets that vary according to the controller:

child: Opacity(
  opacity: 1 - controller.value, // fading out when moving
  child: Transform.rotate( // convenience method for `rotateZ`
    angle: wobble,
    child: Prediction(text: prediction)
  )
)

Save. Drag. See the future predicted.

The finished Magic 8-Ball

Where to Go From Here?

Congratulations on completing the tutorial!

You can download the final project using the Download Materials button at the top or bottom of this tutorial. From here, you can run and install the finished version of the app and browse around the finished project to see all the code.

You’ve really only touched the surface of what 2.5D design can do. Play with Gradients and Offsets, or if you’re feeling really enthused, delve into Matrix4 transformations.

We hope you enjoyed this tutorial — thanks for reading! If you have any questions or comments, please join the forum discussion below.