【Flutter】Colorsの使い方｜色・色の濃さ・透明度を指定する

2023年7月13日2023年7月15日

FlutterのウィジェットColorsの使い方を紹介します。

ColorsはcolorやbackgroundColorなど色を指定する際に使用できます。

Colorsの使い方

Colorsでの色の指定方法にはColors.色[数値]とColors.色.shade数値の２通りがありますが、どちらの書き方でも同じです。

色の部分でColorsでサポートされている色を指定し、数値の部分で色の濃さを指定できます。

数値は「50」または、100区切りで「100」から「900」までの全部で10段階あり、数値が低いと色は薄く、高いと濃くなります。

Container(
  color: Colors.amber[50],
),

//または

Container(
  color: Colors.amber.shade50,
),

Colorsの色を半透明化させる

Colorsで指定した色を半透明化（透過）させるにはwithOpacity()またはwithAlpha()を使用できます。

withOpacity()で透明度を調整する場合は、引数にdouble値を渡し「0」から「1」の範囲で透明度を指定します。値が「0」の場合は透明、「1」の場合は不透明になります。

withAlpha()で透明度を調整する場合は、引数にint値を渡し「0」から「255」の範囲で透明度を指定します。値が「0」の場合は透明、「255」の場合は不透明になります。

Stack(
  alignment: Alignment.center,
  children: [
    Text(
      'Hello World',
      style: TextStyle(fontSize: 20),
    ),
    Container(
      color: Colors.amber.withOpacity(0.5),
      height: 200,
      width: 300,
    ),
  ],
),

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              child: Text('Colors.amber[50]'),
              color: Colors.amber[50],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[100]'),
              color: Colors.amber[100],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[200]'),
              color: Colors.amber[200],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[300]'),
              color: Colors.amber[300],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[400]'),
              color: Colors.amber[400],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[500]'),
              color: Colors.amber[500],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[600]'),
              color: Colors.amber[600],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[700]'),
              color: Colors.amber[700],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[800]'),
              color: Colors.amber[800],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[900]'),
              color: Colors.amber[900],
              height: 50,
              width: double.infinity,
            ),
          ],
        ),
      ),
    );
  }
}

以上です。

【Flutter】Colorsの使い方｜色・色の濃さ・透明度を指定する

Colorsの使い方

Colorsの色を半透明化させる

サンプルコード

合わせて読みたい

参考サイト