How to Make Random Color Generator In Flutter ?

How to Make Random Color Generator In Flutter?

To make a Random Color Generator user can make use of an inbuilt Random class. User needs to make changes in the color when the button is pressed, you have to use a StatefulWidget. Code Snippet will look like the below:

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

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  List colors = [Colors.red, Colors.green, Colors.yellow];
  Random random = new Random();

  int index = 0;

  void changeIndex() {
    setState(() => index = random.nextInt(3));
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () => changeIndex(),
        child: Text('Click'),
        color: colors[index],
      ),
    );
  }
}

User can also try with below code snippet:

Random class is a generator of an int, bool, or double values.

Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0)

There is also an in-built list of available Colors. Users can also select a desire Color as per his or her end-user requirement. Consider a code snippet like the below:

Colors.primaries[Random().nextInt(Colors.primaries.length)]

Import a package like the below:

import 'dart:math';

Icon(
    Icons.account_circle,
    size: 40,
    color:   Colors.primaries[Random().nextInt(Colors.primaries.length)],
)

import 'dart:math';
import 'dart:ui';

class Util {
  static Color randomColor() {
    return Color(Random().nextInt(0xffffffff));
  }
}

For opaque color:

static Color randomOpaqueColor() {
  return Color(Random().nextInt(0xffffffff)).withAlpha(0xff);
}

There is also a different color for the button every time the build method for the app is called.

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

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

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
     // TODO: implement build
       return new MaterialApp(
           title: "Raised Button",
           theme: new ThemeData(
              primarySwatch: Colors.teal,
           ),
           home: new HomePage());
     }
   }

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

   class HomePageState extends State<HomePage> {
     //contains the colours for the circle Avatars
     final List<Color> circleColors = [Colors.red, Colors.blue, Colors.green];

     Color randomGenerator() {
       return circleColors[new Random().nextInt(2)];
     }

     @override
     Widget build(BuildContext context) {
       return Center(
         child: RaisedButton(
           onPressed: () => {},
           child: Text('Click'),
           color: randomGenerator(),
         ),
       );
     }
 }

User can also try the below way:

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

void main() {
  runApp(MaterialApp(home: MyPage()));
}

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => new _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final Random _random = Random();

  Color _color = Color(0xFFFFFFFF);

  void changeColor() {
    setState(() {
      _color = Color.fromARGB(
        //or with fromRGBO with fourth arg as _random.nextDouble(),
        _random.nextInt(256),
        _random.nextInt(256),
        _random.nextInt(256),
        _random.nextInt(256),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InkWell(
        onTap: changeColor,
        child: Container(
          color: _color,
        ),
      ),
    );
  }
}

If you use Color.fromRGBO:

The fourth argument should be within 0.0 to 1.0 and fortunately, we have _random.nextDouble() that gives a value between 0.0 to 1.0 randomly.

By the way:

R – Red
B – Blue
G – Green
O – Opacity
A – Alpha

User can also create a custom function like below:

import 'dart:math' as math;

final rnd = math.Random();

Color getRandomColor() => Color(rnd.nextInt(0xffffffff));

There is a random_color plugin in the Flutter that can help us for generating random color and also we can select high saturation colors with this code:

import 'package:random_color/random_color.dart';

RandomColor _randomColor = RandomColor();

Color _color = _randomColor.randomColor(
  colorSaturation: ColorSaturation.highSaturation
);

And light colors with this code:

import 'package:random_color/random_color.dart';

RandomColor _randomColor = RandomColor();

Color _color = _randomColor.randomColor(
  colorBrightness: ColorBrightness.light
);

Conclusion:

In this article, We have been through How to Make Random Color Generator In Flutter?

Hope you Guys are Enjoying Our Articles !!! Drop us your valuable feedback to serve you better.

Keep Learning !!! Keep Fluttering !!!

In this article, we have been through How to Multiline TextField In Flutter?

FlutterAgency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.