Flutter – Make a Random Number Generator App

In Flutter we can create a random object using the Random() method to create a random number. We can use this concept to make an OTP that can be used for various authentication. In this article, we are going to Generate a 4-digit random pin in every click. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

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

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

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

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RandomNumberGenerator(),
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

Step 5: Create RandomNumberGenerator Class

In this class we are going to generate the 4 digit random number in every click and display it by the help of a TextView. This class contains a method named as generateRandomNumber() that is responsible for generating a 4 digit random number in every call. Comments are added for better understanding .

// Method ffor generating a random 4 digit number  
void generateRandomNumber() {
    setState(() {
      _randomNumber =
          1000 + _random.nextInt(9000); // Generates a random 4-digit number
    },);
  }

Dart

class RandomNumberGenerator extends StatefulWidget {
  @override
  _RandomNumberGeneratorState createState() => _RandomNumberGeneratorState();
}

class _RandomNumberGeneratorState extends State<RandomNumberGenerator> {
  final Random _random =
      Random(); // Create a Random object for generating random numbers
  int _randomNumber = 0;

  // Method ffor generating a random 4 digit number
  void generateRandomNumber() {
    setState(() {
      _randomNumber =
          1000 + _random.nextInt(9000); // Generates a random 4-digit number
    },);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Random 4-Digit Number Generator'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Random 4-Digit Number:', // Display a label for the random number
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_randomNumber', // Display the generated random number
              style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed:
                  generateRandomNumber, // Call the function to generate a random number
              child: Text(
                  'Generate Random 4-Digit Number'), // Button to trigger number generation
            ),
          ],
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file:

Dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RandomNumberGenerator(),
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

class RandomNumberGenerator extends StatefulWidget {
  @override
  _RandomNumberGeneratorState createState() => _RandomNumberGeneratorState();
}

class _RandomNumberGeneratorState extends State<RandomNumberGenerator> {
  final Random _random =
      Random(); // Create a Random object for generating random numbers
  int _randomNumber = 0;

  // Method ffor generating a random 4 digit number
  void generateRandomNumber() {
    setState(() {
      _randomNumber =
          1000 + _random.nextInt(9000); // Generates a random 4-digit number
    },);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Random 4-Digit Number Generator'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Random 4-Digit Number:', // Display a label for the random number
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_randomNumber', // Display the generated random number
              style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed:
                  generateRandomNumber, // Call the function to generate a random number
              child: Text(
                  'Generate Random 4-Digit Number'), // Button to trigger number generation
            ),
          ],
        ),
      ),
    );
  }
}

Output: