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 ), ], ), ), ); } } |
Contact Us