Flutter中如何实现点击屏幕生成并设置随机RGB格式颜色

核心逻辑 #

RGB格式颜色的红、绿、蓝三个通道取值范围均为0-255，只需为三个通道分别生成该区间的随机整数，即可组合出合法的随机RGB颜色。

实现步骤 #

• 引入Dart内置随机数工具库：import 'dart:math';
• 借助Random类生成三个0-255区间的随机整数，分别对应R、G、B通道值
• 通过Flutter内置的Color.fromRGBO方法构造颜色对象，透明度设为1（完全不透明），赋值给_color变量即可

补全后的完整可运行代码 #

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Color _color = Colors.white;
  // 提前初始化随机数生成器，避免每次点击重复创建实例
  final Random _random = Random();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Color picker"),
        centerTitle: true,
      ),
      body: GestureDetector(
        onTap: () {
          setState(() {
            // 随机RGB颜色赋值核心逻辑
            _color = Color.fromRGBO(
              _random.nextInt(256), // R通道：0-255随机值
              _random.nextInt(256), // G通道：0-255随机值
              _random.nextInt(256), // B通道：0-255随机值
              1, // 固定完全不透明
            );
          });
        },
        child: Container(
          color: _color,
          padding: const EdgeInsets.all(20),
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    );
  }
}

注意：Random.nextInt(n)生成的随机数范围是[0, n)，即包含0不包含n，因此参数需要传256才能覆盖0-255的完整通道取值范围，不要误写为255导致通道值永远取不到255。

内容的提问来源于stack exchange，提问作者userName