Skip to content

[Flutter] Use Random() to set component color randomly

If Flutter, if we want to randomly to set the component's color, we can use Random() to do it. It is not a very useful effect, but it is very funny.

Basically, if you know how to use Random() and Colors, you can make it easily.

If you are interesting in developing Flutter application, you can refer:

How to User Random

If we want to use Random(), we need to import 'dart:math' first.

import 'dart:math';

void main() {
  for (int i=0; i<10; i++){
    print(Random().nextInt(2));
  }
}



Output:

0
0
1
1
1
0
0
1
1
0

in nextInt(n) , it will generate a random number between 0 to n-1 and its data type is Int.

Set the component's color

Suppose we have the following four Container:

import 'package:flutter/material.dart';

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

class testPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
            children: <Widget>[
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.brown,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.yellow,
              )
            ],
          )
      ),
    );
  }
}



Output:


And we customize a color class:

Color MyColor(){
  return Color.fromARGB(255, 120, 120, 120);
}






Then set all of Container the same color.

class testPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
            children: <Widget>[
              Container(
                width: 100,
                height: 100,
                color: MyColor(),
              ),
              Container(
                width: 100,
                height: 100,
                color: MyColor(),
              ),
              Container(
                width: 100,
                height: 100,
                color: MyColor(),
              ),
              Container(
                width: 100,
                height: 100,
                color: MyColor(),
              )
            ],
          )
      ),
    );
  }
}



Output:

As you can see, we have the same color in all of Container.

But we can set random color.

Color MyColor(){
  return Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256));
}



Output:

Every time we hot reload, the Container will be a new random color component.

Complete Code

import 'dart:math';

import 'package:flutter/material.dart';

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

Color MyColor(){
  return Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256));
}


class testPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
            children: <Widget>[
              Container(
                width: 100,
                height: 100,
                color: MyColor(),
              ),
              Container(
                width: 100,
                height: 100,
                color: MyColor(),
              ),
              Container(
                width: 100,
                height: 100,
                color: MyColor(),
              ),
              Container(
                width: 100,
                height: 100,
                color: MyColor(),
              )
            ],
          )
      ),
    );
  }
}



Tags:

Leave a Reply