[Flutter]Colorについて学ぼう

2023年4月12日2023年11月24日

lutterのColorは、ウィジェットやアプリケーションで使用される色を表すためのクラスです。Flutterは、多数の標準的な色を提供するために、Material DesignカラーパレットやCupertinoカラーパレットを含むいくつかのカラーセットを定義しています。この記事では、FlutterのColorについて、基本的な使い方と提供される機能について説明します。

FlutterのColorクラス

FlutterのColorクラスは、RGB値や透明度などのプロパティを使用して色を表します。RGB値は、赤、緑、青の色成分を0〜255の範囲で表します。透明度は、0.0（完全に透明）から1.0（完全に不透明）までの範囲で表します。Colorクラスは、以下のように定義されます。

Color(int value) // valueは、0から0xFFFFFFまでの整数であり、0xAARRGGBB形式で表される

Flutterの標準色

Flutterは、Material DesignカラーパレットとCupertinoカラーパレットの2つのカラーセットを提供しています。これらのカラーセットには、主要な色、セカンダリーカラー、エラーカラー、背景色などが含まれています。以下は、Material Designカラーパレットのいくつかの例です。(以降は children[…]の間を抜粋して記載します)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Image',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Row'),
          ),
          body: Center(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(color: Colors.red, child: Text('Colors.red')),
              Container(color: Colors.green, child: Text('Colors.green')),
              Container(color: Colors.blue, child: Text('Colors.blue')),
              Container(color: Colors.orange, child: Text('Colors.orange')),
              Container(color: Colors.yellow, child: Text('Colors.yellow')),
              Container(color: Colors.purple, child: Text('Colors.purple')),
            ],
          )),
        ));
  }
}

Cupertinoカラーパレットには、iOSアプリケーションで使用される色が含まれています。以下は、Cupertinoカラーパレットのいくつかの例です。

CupertinoColors.activeBlue
CupertinoColors.systemRed
CupertinoColors.systemGreen
CupertinoColors.systemOrange
CupertinoColors.systemYellow
CupertinoColors.systemPurple

FlutterのColorの使用例

以下は、Colorクラスの使用例です。

Container(
  color: Colors.red, // 背景色を赤に設定
  child: Text('Hello World!'),
)

Color myColor = Color(0xFF008000); // 0xFF008000はRGB値の緑色を表す

まとめ

FlutterのColorクラスは、ウィジェットやアプリケーションで使用される色を表すためのクラスであり、RGB値や透明度などのプロパティを使用して色を表します。Flutterは、多数の標準的な色を提供しており、Material DesignカラーパレットやCupertinoカラーパレットなどが含まれています。

Colorクラスは、簡単に使用でき、アプリケーションで色を設定するために必要な強力な機能を提供しています。Colorクラスは、UIの構築において必須のクラスの一つであり、Flutterのウィジェットツリーで幅広く使用されています。

しかし、Colorクラスは単純な使い方だけでなく、高度な使い方もできます。例えば、ColorTweenクラスを使用して、アニメーションに使用する色を滑らかに変化させることができます。また、ColorSchemeクラスを使用して、テーマのカラースキームを定義することができます。