Build Roll The Dice Game in Flutter – SwiftUI – Jetpack Compose

Flutter :

import 'dart:math';

import 'package:flutter/material.dart';

class RollTheDiceScreen extends StatefulWidget {
  const RollTheDiceScreen({Key? key}) : super(key: key);

  @override
  State<RollTheDiceScreen> createState() => _RollTheDiceScreenState();
}

class _RollTheDiceScreenState extends State<RollTheDiceScreen> {
  String url = 'assets/dice/start.png';
  int counter = 0;
  int score = 0;
  
  final random = Random();

  void generateNumber() {
    counter = random.nextInt(6) + 1;
    score = score + counter;
    changeImage(counter);
  }

  void changeImage(int value) {
    switch (value) {
      case 1:
        url = 'assets/dice/dice1.png';
        break;
      case 2:
        url = 'assets/dice/dice2.png';
        break;
      case 3:
        url = 'assets/dice/dice3.png';
        break;
      case 4:
        url = 'assets/dice/dice4.png';
        break;
      case 5:
        url = 'assets/dice/dice5.png';
        break;
      case 6:
        url = 'assets/dice/dice6.png';
        break;
      default:
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            Text('Score: $score'),
            Text('Current Number: $counter'),

            Image.asset(
              url,
              width: 150,
              height: 150,
              color: Colors.redAccent,
            ),

            ElevatedButton(
              onPressed: () {
                setState(() {
                  generateNumber();
                });

              }, 
              child: const Text('Roll The Dice'),
            )

          ],
        ),
      ),
    );
  }
}

SwiftUI :

import SwiftUI

struct RollTheDiceView: View {
    @State var url = "Start"
    @State var counter = 0
    @State var score = 0
    
    var body: some View {
        VStack {
            Text("Score: \(score)")
            Text("Current Number: \(counter)")
            Image(url)
                .resizable()
                .frame(width: 150,height: 150)
                .colorMultiply(.red)
            Button {
                generateNumber()
                
            } label: {
                Text("Roll The Dice")
            }
            
        }
    }
    
    func generateNumber() {
        counter = Int.random(in: 1...6)
        score = score + counter
        changeImage()
    }
    
    func changeImage() {
        switch counter {
            case 1:
                url = "Counter1"
            case 2:
                url = "Counter2"
            case 3:
                url = "Counter3"
            case 4:
                url = "Counter4"
            case 5:
                url = "Counter5"
            case 6:
                url = "Counter6"
                
            default:
                print("No implementation")
                
            }
    }
}

struct RollTheDiceView_Previews: PreviewProvider {
    static var previews: some View {
        RollTheDiceView()
    }
}

Jetpack Compose :

package com.example.composeuidemo.dice


import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import com.example.composeuidemo.R

import androidx.compose.ui.unit.dp


@Composable
fun RollTheDice() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        val score = remember {
            mutableStateOf(0)
        }
        val counter = remember {
            mutableStateOf(0)
        }
        val url = remember {
            mutableStateOf(R.drawable.start)
        }

        Text(text = "Score: ${score.value}")
        Text(text = "CurrentCounter: ${counter.value}")

        Image(
            modifier = Modifier
                .padding(8.dp)
                .size(150.dp, 150.dp)
                .clip(RectangleShape)
                .background(Color.Red)
                .border(
                    width = 4.dp,
                    color = Color.White,
                    shape = RectangleShape
                ),
            contentScale = ContentScale.Crop,
            painter = painterResource(id = url.value),
            contentDescription = "Profile image"
        )

        OutlinedButton(
            onClick = {
                counter.value = (1..6).random()
                score.value +=  counter.value

                when( counter.value) {
                    1 -> url.value = R.drawable.dice1
                    2 -> url.value = R.drawable.dice2
                    3 -> url.value = R.drawable.dice3
                    4 -> url.value = R.drawable.dice4
                    5 -> url.value = R.drawable.dice5
                    6 -> url.value = R.drawable.dice6
                }
            }
        ) {
            Text(text = "Roll The Dice")

        }
    }
}