flutter – Random material color with shade

main.dart

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

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.amber),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Random Material Color With Shade")
          ),
          body: bodyContent()
      ),
    ),
  );
}

bodyContent(){
  return Column(children: [box(),box(),box(),box(),box()]);
}

box(){
  MaterialColor randomMaterialColor = Colors.primaries[
  Random().nextInt(Colors.primaries.length)
  ];
  var shadeList = [50,100,200,300,400,500,600,700,800,900];
  var randomShade = shadeList[Random().nextInt(shadeList.length)];
  Color? finalColor = randomMaterialColor[randomShade];

  return Container(
      height: 85, width: double.infinity,
      color: finalColor, margin: const EdgeInsets.all(8),
      child: Text(
        finalColor.toString().toUpperCase() + " [$randomShade]",
        style: const TextStyle(fontWeight: FontWeight.bold),
        textAlign: TextAlign.center,
      ),
      alignment: Alignment.center
  );
}

More flutter tutorials

• flutter – OutlinedButton style
• flutter – How to use IconButton onPressed
• flutter – FloatingActionButton with Scaffold
• flutter – ListTile remove padding
• flutter – Space between ListTile leading and title
• flutter – ListTile shape
• flutter – ListTile separator
• flutter – How to use Table
• flutter – Random number in range
• flutter – Random material color
• flutter – Get random element from a list
• flutter – How to generate random string
• flutter – How to generate random bool
• flutter – Random bool custom probability
• flutter – How to generate random uuid