[Flutter] 將元件渲染成不同顏色、漸層顏色

Last Updated on 2021-05-17 by Clay

在使用 Flutter 開發 App 時，想必大家都希望可以將自己界面上的顏色渲染得非常好看，因為我自己就是如此。

悲憤的是，由於本人沒有什麼美術天份，故常常會很纖細地一直調整元件顏色。好在在使用 IDE 進行 Flutter 撰寫的時候，由於有 Hot Reload 的關係，導致這方面開發速度比以前使用 Android Studio 來得快。

今天的主要目的，就是記載在 Flutter 當中如何進行元件的顏色設定。

如果對於直接看 Flutter 官方的 Tutorial 有興趣，可以直接參考這個網站： https://flutter.dev/docs/reference/tutorials

如果想要了解 Flutter 的 IDE 怎麼安裝，可以參考我的這篇文章《Flutter 學習心得筆記 (0) 下載 Intellij IDEA》。

好，那我們馬上來簡單瀏覽下該怎麼設定顏色吧！

使用 Colors 簡單設定顏色

首先我們來看段簡單的程式碼：

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Color Component'),
          centerTitle: true,
        ),
        body: setColor(),
      ),
    );
  }
}


class setColor extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 100,
      height: 100,
      child: Text('TEST'),
    );
  }
}

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Color Component'),
          centerTitle: true,
        ),
        body: setColor(),
      ),
    );
  }
}


class setColor extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 100,
      height: 100,
      child: Text('TEST'),
    );
  }
}

Output:

這個程式非常單純，基本上就是我們在界面上繪製了一個簡單的 Container，尺寸是 100 x 100，會顯示文字 "TEST"。

當然這樣有點不好判斷我們的 Container 位置，所以我們可以給這個元件上顏色。

我們可以任意挑選我們要的顏色，這是最簡單的辦法之一，比如說我們選擇 red：

如何，這個方法是不是很簡單呢？

Color RGBO

當然，看到剛才那種設定顏色的方法，各位一定會想著：我只能使用它預設的顏色嗎？萬一我有想要客製化的顏色怎麼半？

因此，其實我們也還有另外一種也相當簡單的辦法：使用 RGB 來進行顏色設定。

這次我們不再使用 Colors，而是使用 Color.fromRGBO 來取代。

RGB 三個值都是要選擇 0-255 的值，最後的 opacity 則要選擇 0-1 之間的小數，影響透明度。

比如我們設定 (100, 100, 100, 0.5)：

大家可以任意調整自己想要的顏色試試看。

漸層式渲染顏色

如果我們要把元件渲染成漸層改變顏色怎麼辦？

幸好在 Flutter 中，我們可以使用 decoration 屬性底下的 gradient，這樣一來我們只需要選擇要使用什麼樣的顏色來漸層渲染，不用在意底層的實作。

以下來看段簡單的程式碼：

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Color Component'),
          centerTitle: true,
        ),
        body: setColor(),
      ),
    );
  }
}


class setColor extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 500,
      height: 100,
      child: Text('TEST'),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.red, Colors.orange, Colors.yellow]
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Color Component'),
          centerTitle: true,
        ),
        body: setColor(),
      ),
    );
  }
}


class setColor extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 500,
      height: 100,
      child: Text('TEST'),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.red, Colors.orange, Colors.yellow]
        ),
      ),
    );
  }
}

Output:

由於我挑選的顏色為 red => orange => yellow，故我的 Container 就是依此渲染的，是不是挺漂亮的？

[Flutter] 將元件渲染成不同顏色、漸層顏色

使用 Colors 簡單設定顏色

Color RGBO

漸層式渲染顏色

分享此文：

Leave a Reply取消回覆