Mastering Flutter Basics with This App | Programmer Hubs by Rohit Sharma

 Overview

In this article, you will learn about important concepts such as how to implement touch gestures, icon taps, and button taps in an Android application built with Flutter. Follow the steps outlined in this article to master these features.

Now, We step down all the point

• Create a new Project flutter create project_name
• Learn little bit more about Gesture detection
• A logic implement so dice is change (Random Number Generation)
• Little bit more Switch Case Statement Understanding
• Learn about the Static file (Assets Uses)

 Gesture Detection

In flutter or any other android application where we can tap or touch inside the entire screen or any specific place into screen that's time any event occur that's called in term of Gesture Detection
Gesture Detection widiget contains property like

1. A Child
2. Some function like-OnTap(),onLongPress(),onTapDown(),onTopUp() etc

Below code is define how to define the Gesture Detector.

GestureDetector(

              child: Image(

                image: diceimage,

                width: 100,

                height: 100,

              ),

              onTap: () => diceroller(),

            ),

 Logic for Random Number Generation

 void diceroller() {

    AssetImage newimage;

    var randomnum = (1 + Random().nextInt(6));

    switch (randomnum) {

      case 1:

        newimage = one;

        break;

      case 2:

        newimage = two;

        break;

      case 3:

        newimage = three;

        break;

      case 4:

        newimage = four;

        break;

      case 5:

        newimage = five;

        break;

      case 6:

        newimage = six;

        break;

    }

    setState(() {

      diceimage = newimage;

    });

  }

In this Random number(1 -6) generation logic we are using a library of dart math

import 'dart:math';

var randomnum = (1 + Random().nextInt(6));

By Default,it's start from 0 so next 6 integer values (0,1,2,3,4,5). So it's never generate the directly 6. Now we are using 1+ that's means max is 5 but now max convert into 6.

 Define the assets

when we are any type or other thing for configuration related define into pubsec.yaml file. So we can use anywhere into application.

assets:

  - images/one.png

  - images/two.png

  - images/three.png

  - images/four.png

  - images/five.png

  - images/six.png

 Define the state of dice

Now we are defining the initial State of Dice Image.

 AssetImage one = new AssetImage("images/one.png");

  AssetImage two = new AssetImage("images/two.png");

  AssetImage three = new AssetImage("images/three.png");

  AssetImage four = new AssetImage("images/four.png");

  AssetImage five = new AssetImage("images/five.png");

  AssetImage six = new AssetImage("images/six.png");

  AssetImage diceimage;

  void initState() {

    super.initState();

    setState(() {

      diceimage = two;

    });

  }

 Full Code

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,  // Change the primary color of your app
        textTheme: TextTheme(
          bodyMedium: TextStyle(color: Colors.black),  // Default text color
        ),
      ),
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  AssetImage one = AssetImage("images/one.png");
  AssetImage two = AssetImage("images/two.png");
  AssetImage three = AssetImage("images/three.png");
  AssetImage four = AssetImage("images/four.png");
  AssetImage five = AssetImage("images/five.png");
  AssetImage six = AssetImage("images/six.png");
  AssetImage diceimage = AssetImage("images/two.png");  // Default image
  String text = '';

  @override
  void initState() {
    super.initState();
    text = "Current dice roll: 2";  // Default dice roll text
  }

  void diceroller() {
    AssetImage newimage=two;
    var randomnum = 1 + Random().nextInt(6);  // Generate random dice number
    switch (randomnum) {
      case 1:
        newimage = one;
        break;
      case 2:
        newimage = two;
        break;
      case 3:
        newimage = three;
        break;
      case 4:
        newimage = four;
        break;
      case 5:
        newimage = five;
        break;
      case 6:
        newimage = six;
        break;
    }
    setState(() {
      diceimage = newimage;
      text = "Current dice roll: $randomnum";  // Update text
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dice Roller",
            style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.blue,  // Use a solid color for app bar
        elevation: 4.0,
      ),
      body: Container(
        color: Colors.blue.shade50,  // Set background color for the app
        padding: EdgeInsets.all(20.0),  // Add padding around the content
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: () => diceroller(),  // Trigger dice roll when tapped
                child: Image(
                  image: diceimage,  // Display the current dice image
                  width: 150,
                  height: 150,
                ),
              ),
              SizedBox(height: 20),  // Space between the dice image and text
              Text(
                text,  // Display the text with the dice roll
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,  // Text color
                ),
              ),
              SizedBox(height: 40),
              ElevatedButton(
                onPressed: diceroller,
                // Trigger dice roll when pressed
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                  //primary: Colors.blue,  // Button color
                  padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                child: Text(
                  "Roll the Dice",  // Button text
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Video lecture on that application so you can follow or watch it.

                                                                    Thank You!!!!!