Today I’m creating the Dice Challenge. This is where we will build a six sided dice using whatever language or framework you want to use. You can make your dice look anyway you want them to. They can be as fancy or as plane as you want them to be. They can scale to any size or be a fixed size. It’s completely up to you!
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.
If your looking for the article using Jetpack Compose, you can find it here: https://medium.com/@jpmtech/dice-challenge-in-jetpack-compose-b5ec7962f1b5
If you are looking for the article using Flutter, you can find it here: https://medium.com/@jpmtech/dice-challenge-in-flutter-81f1600d420d
Why a dice challenge
I want others to be able to build and share what they are learning. The point of this challenge is not necessarily to spend a huge amount of time building a thing. The point is to work on our craft and/or take a little time to learn something new. Again feel free to use any language or framework you want. There is almost always more than one way to do anything with code. We are all developers and we are all working towards a common goal “solving problems using computers”. Let’s all take a short break from the hustle of our everyday problems and remember the fun we can have working together and solving problems as a community.
Rules of the Challenge
The only rules are you have to share your code and if you want me to share the images of the dice you created in this article let me know and I will try to get them added to this post (please keep the images G rated there are already enough bad images in the world, I will not share any inappropriate images). Since your here, be sure to put a comment on this article with your code (or a link to your code). There is no end date for this challenge so whenever you happen across it, feel free to try it out and share it with you friends and coworkers get them in on the fun with you.
My code
I choose to use SwiftUI for this solution. I started by breaking the dot for the dice out into its own view, then created a unique view for each side of the dice, and then use all of them inside a list view so that I can see all the sides at once on an iPhone 15 Pro in the simulator.
// Dice.swift
import SwiftUI
struct Dot: View {
var body: some View {
Circle()
.frame(width: 20, height: 20)
}
}
struct Dice1: View {
var body: some View {
ZStack {
Rectangle()
.stroke(lineWidth: 1.0)
Dot()
}
}
}
struct Dice2: View {
var body: some View {
ZStack {
Rectangle()
.stroke(lineWidth: 1.0)
VStack {
HStack {
Spacer()
Dot()
}.padding()
Spacer()
HStack {
Dot()
Spacer()
}.padding()
}
}
}
}
struct Dice3: View {
var body: some View {
ZStack {
Rectangle()
.stroke(lineWidth: 1.0)
VStack {
HStack {
Dot()
Spacer()
}.padding()
Spacer()
HStack {
Spacer()
Dot()
}.padding()
}
Dot()
}
}
}
struct Dice4: View {
var body: some View {
ZStack {
Rectangle()
.stroke(lineWidth: 1.0)
VStack {
HStack {
Dot()
Spacer()
Dot()
}.padding()
Spacer()
HStack {
Dot()
Spacer()
Dot()
}.padding()
}
}
}
}
struct Dice5: View {
var body: some View {
ZStack {
Rectangle()
.stroke(lineWidth: 1.0)
VStack {
HStack {
Dot()
Spacer()
Dot()
}.padding()
Spacer()
HStack {
Dot()
Spacer()
Dot()
}.padding()
}
Dot()
}
}
}
struct Dice6: View {
var body: some View {
ZStack {
Rectangle()
.stroke(lineWidth: 1.0)
VStack {
HStack {
Dot()
Spacer()
Dot()
}.padding()
Spacer()
HStack {
Dot()
Spacer()
Dot()
}.padding()
Spacer()
HStack {
Dot()
Spacer()
Dot()
}.padding()
}
}
}
}To display them all on the simulator at once, I used the following code.
// ContentView.swift
// Dice Challenge
import SwiftUI
struct ContentView: View {
var body: some View {
LazyVGrid(columns: [
GridItem(.flexible()),
GridItem(.flexible())
]) {
Dice1()
.frame(width: 180, height: 180)
Dice2()
.frame(width: 180, height: 180)
Dice3()
.frame(width: 180, height: 180)
Dice4()
.frame(width: 180, height: 180)
Dice5()
.frame(width: 180, height: 180)
Dice6()
.frame(width: 180, height: 180)
}.padding()
}
}
#Preview {
ContentView()
}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!
