Create Coin Toss App Using Flutter

Fri, Aug 25, 2023

Read in 2 minutes

This is fully functional Coin Toss App you can use in your application. Use it, modify it to your liking

Fully functional Coin Toss App

You can copy/paste the below code and run it on your device. It should work without an issue.

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CoinTossPage(),
    );
  }
}

class CoinTossPage extends StatefulWidget {
  const CoinTossPage({super.key});

  @override
  State<CoinTossPage> createState() => _CoinTossPageState();
}

class _CoinTossPageState extends State<CoinTossPage>
    with SingleTickerProviderStateMixin {
  late AnimationController animationCtrl;
  late Animation<double> verticalMovment;
  late Animation<double> rotation;
  final random = Random();
  late bool isHeads;
  @override
  void initState() {
    super.initState();

    animationCtrl = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    );

    verticalMovment = TweenSequence<double>([
      TweenSequenceItem<double>(
        tween: Tween<double>(begin: 0, end: -200),
        weight: 50,
      ),
      TweenSequenceItem<double>(
        tween: Tween<double>(begin: -200, end: 0),
        weight: 50,
      ),
    ]).animate(animationCtrl);

    rotation = Tween<double>(
      begin: 0,
      end: 2 * pi * 10,
    ).animate(animationCtrl);

    isHeads = random.nextBool();
  }

  void tossCoin() {
    double stopPosition = random.nextBool() ? 0.0 : 0.5;
    animationCtrl.value = stopPosition;
    animationCtrl.forward(from: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            AnimatedBuilder(
              animation: animationCtrl,
              builder: (BuildContext context, Widget? child) {
                double verticalOffset = verticalMovment.value;
                double value = rotation.value % (2 * pi);
                // isHeads = value < pi;
                isHeads = random.nextBool();

                return Transform.translate(
                  offset: Offset(0, verticalOffset),
                  child: Transform(
                    alignment: Alignment.center,
                    transform: Matrix4.identity()
                      ..setEntry(3, 2, 0.001)
                      ..rotateX(value),
                    child: Container(
                      height: 100,
                      width: 100,
                      decoration: BoxDecoration(
                        boxShadow: const [
                          BoxShadow(
                            offset: Offset(2, 3),
                            color: Colors.blueGrey,
                          )
                        ],
                        shape: BoxShape.circle,
                        color: isHeads ? Colors.blueAccent : Colors.blueGrey,
                      ),
                      child: Center(
                        child: Text(
                          isHeads ? 'Heads' : 'Tails',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 24,
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
            ElevatedButton(
              child: Text('Toss Coin'),
              onPressed: tossCoin,
            )
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    animationCtrl.dispose();
    super.dispose();
  }
}

Enjoy Coding!


Shohruh AK





See Also

How To Improve Your Coding Skills
Dark Sides of Being a Programmer
Build Flutter Calculator App - Tutorial for Beginners
Save any file in external storage in Flutter app: Full Guide
Gradient Text Effect in Flutter Without Package