Last Updated on 2021-05-18 by Clay
在 Flutter 當中，我們可以使用 Random 直接設定不同的元件顏色，雖然這不算是相當實用的功能，但是還滿有趣的。
基本上，只要掌握了 Random 的使用方法以及 Color 的顏色設定方法，就能輕鬆製作出這樣的功能。
對於開發 Flutter 有興趣的話，可以參考我之前寫過的《Flutter 學習心得筆記 (0) 下載 Intellij IDEA》。以及官方的教學： https://flutter.dev/docs/cookbook/design/drawer
Math 當中的 Random 使用方法
Flutter 當中 Random 的使用方法非常簡單，只需要 import "math" 就可以使用。以下我們簡單地測試十次 Random 的指令：
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
nextInt(n) 當中，會隨機出現的數字範圍介於 [0-n-1] 之間，資料型態很明顯便是 "int" （整數）。
元件設定顏色
假設我們有以下四個簡單的 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:
然後我們在外部簡單自定義一個顏色。
Color MyColor(){ return Color.fromARGB(255, 120, 120, 120); }
然後我們將所有元件都放置這個由我們定義的顏色。
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:
這樣我們的四個元件看起來都是同一種顏色了！
然後，我們可以開始自己設定隨機的顏色了。由於 RGB 三色數值範圍為 [0-255]，故我們應該這樣設定：
Color MyColor(){ return Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)); }
Output:
每次熱重載都會是隨機顏色的元件呢！
完整程式碼
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(), ) ], ) ), ); } }