Background color is most important part for every android & iOS application. Because using background color application screen look will set. Basically in most of applications we would see single background color but sometimes app developer wants to change the background color dynamically. In today’s tutorial we would learn about Flutter Dynamically Generate Random Background Color on Button Click Dart Android iOS Example Tutorial. We are using Random class in our tutorial to generate random Integer value and put that value in Color.fromARGB() function. So let’s get started:) .
Contents in this project Flutter Dynamically Generate Random Background Color on Button Click Dart Android iOS Example Tutorial:
1. Import material.dart and math package in your app’s main.dart file.
|
1 2 |
import 'package:flutter/material.dart'; import 'dart:math'; |
2. Create void main runApp() method and here we would call our main MyApp view class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extend with State less widget. In this class we would call View() class in body section of Scaffold widget.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: View() ) ); } } |
4. Create a class named as View extends with StatefulWidget. In this class we would make createState() method of state and pass ViewState() class along with it to enable mutable state management in given class tree.
|
1 2 3 4 5 |
class View extends StatefulWidget { ViewState createState() => ViewState(); } |
5 Create a class named as ViewState extends with State. This is our main View children class.
|
1 2 3 4 |
class ViewState extends State{ } |
6. Create a Color string named as colorCode with default light background color. In flutter we use Color type variable to hold all type of color strings.
|
1 2 |
// Default Background Color. Color colorCode = Colors.lightBlue; |
7. Create a Random type of variable . We would use this to generate random type of string.
|
1 |
final Random random = Random(); |
8. Create a function named as generateRandomColor(). In this function we would use Color function Color.fromARGB() with random number generate object and generate color code between 0 to 256. After generating color we would store the color in Color variable using State.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
generateRandomColor(){ Color tmpColor = Color.fromARGB( random.nextInt(256), random.nextInt(256), random.nextInt(256), random.nextInt(256), ) ; setState(() { colorCode = tmpColor ; }); } |
9. Create Widget Build are and here we would make Scaffold widget and use backgroundColor property of scaffold widget to set background color. We would also make a Raised Button and call the above function on button click event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Widget build(BuildContext context) { return Scaffold( backgroundColor: colorCode, appBar: AppBar(title: Text('Generate Random Background Color')), body: Center( child: Container( margin: const EdgeInsets.fromLTRB(10, 0, 10, 0), child: RaisedButton( onPressed: () => generateRandomColor(), child: Text('Click Here To Generate Random Background Color'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), )) ) ); } |
10. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
import 'package:flutter/material.dart'; import 'dart:math'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: View() ) ); } } class View extends StatefulWidget { ViewState createState() => ViewState(); } class ViewState extends State{ // Default Background Color. Color colorCode = Colors.lightBlue; final Random random = Random(); generateRandomColor(){ Color tmpColor = Color.fromARGB( random.nextInt(256), random.nextInt(256), random.nextInt(256), random.nextInt(256), ) ; setState(() { colorCode = tmpColor ; }); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: colorCode, appBar: AppBar(title: Text('Generate Random Background Color')), body: Center( child: Container( margin: const EdgeInsets.fromLTRB(10, 0, 10, 0), child: RaisedButton( onPressed: () => generateRandomColor(), child: Text('Click Here To Generate Random Background Color'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), )) ) ); } } |
Screenshots:
