Building dice using nothing but basic components in Flutter. If you want to know where this idea came from, check out this article.
Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.
Jumping straight to the code
When building the individual views, I decided to break out the dot for the dice into it’s own widget. The other sides of the dice are built with their own individual widgets in their own files, for the sake of simplicity all the files have been added to the same code block below.
import 'package:flutter/material.dart';
class Dot extends StatelessWidget {
const Dot({super.key});
@override
Widget build(context) {
return Container(
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
width: 20,
height: 20,
);
}
}
class Dice1 extends StatelessWidget {
const Dice1({super.key});
@override
Widget build(context) {
return Container(
width: 190,
height: 190,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
)),
child: const Center(
child: Dot(),
),
);
}
}
class Dice2 extends StatelessWidget {
const Dice2({super.key});
@override
Widget build(context) {
return Container(
width: 190,
height: 190,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
],
),
);
}
}
class Dice3 extends StatelessWidget {
const Dice3({super.key});
@override
Widget build(context) {
return Container(
width: 190,
height: 190,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
Dot(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
],
),
);
}
}
class Dice4 extends StatelessWidget {
const Dice4({super.key});
@override
Widget build(context) {
return Container(
width: 190,
height: 190,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
],
),
);
}
}
class Dice5 extends StatelessWidget {
const Dice5({super.key});
@override
Widget build(context) {
return Container(
width: 190,
height: 190,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
Dot(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
],
),
);
}
}
class Dice6 extends StatelessWidget {
const Dice6({super.key});
@override
Widget build(context) {
return Container(
width: 190,
height: 190,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
Padding(
padding: EdgeInsets.all(12.0),
child: Dot(),
),
],
),
],
),
);
}
}When displaying all the sides of the dice at the same time in both iOS and Android, we use the following code.
import 'package:dice_challenge_flutter/dice_1.dart';
import 'package:dice_challenge_flutter/dice_2.dart';
import 'package:dice_challenge_flutter/dice_3.dart';
import 'package:dice_challenge_flutter/dice_4.dart';
import 'package:dice_challenge_flutter/dice_5.dart';
import 'package:dice_challenge_flutter/dice_6.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Padding(
padding: const EdgeInsets.all(12.0),
child: GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
children: const [
Dice1(),
Dice2(),
Dice3(),
Dice4(),
Dice5(),
Dice6()
],
),
));
}
}Don’t forget to add your solution in the comments and share it with all your friends who code.
If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.
If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it. If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!
Dice Gallery from users who have shared their code
