Skip to content

[Flutter] 使用 Random 隨機設定元件顏色

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(),
              )
            ],
          )
      ),
    );
  }
}



Tags:

Leave a Reply