【Flutter】ランダムな色を生成｜RGBから無制限に色を作る

2022年12月27日

こんにちは、フラメルです。

今回はランダムな色(カラー)を生成する方法を紹介します。

ランダムにカラーを生成する方法

まずはmathライブラリを導入します。

import 'dart:math';

次にColor.fromRGBO()とRandomを使用してランダムに色を生成します。

下記コードをコピペすればOK。

Random random = Random();
Color rc = Color.fromRGBO(
    random.nextInt(255),
    random.nextInt(255),
    random.nextInt(255),
    1,
);

サンプルコード

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

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Color color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('Change Color'),
            style: ElevatedButton.styleFrom(backgroundColor: color),
            onPressed: () {
              Random random = Random();
              Color rc = Color.fromRGBO(
                random.nextInt(255),
                random.nextInt(255),
                random.nextInt(255),
                1,
              );

              setState(() {
                color = rc;
              });
            },
          ),
        ),
      ),
    );
  }
}

以上です。

参考サイト

https://www.fluttercampus.com/guide/157/how-to-generate-random-color-in-flutter/