😇

Flutter AppBarTheme

2024/07/14に公開

Flutter

Dart

tech

対象者

Flutterアプリ全体のAppBarの色を変更する方法を知りたい人
ARGBを使いたい
１６新数を使いたい

数世紀前に記事を書いたのですが微妙だったので作り直すことにしました。MaterialApp Widgetのプロパティを使って、アプリに全体の色を変更するのをやっていこうと思います。

プロジェクトの説明

１６進数を使いた場合は、「そもそも１６進数って何？」から始まると思います。「詳しく知らなくても良いです。」

16進数とは、0から9までの10個の数字と、AからFまでの6個のアルファベットを使って数値を表現する方法である。 16進数では、ひとつの桁において0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、Fと並ぶ16個の数値を扱うことができる。

１６進数を使う

Google検索で探すと出てきます。color pickerで色を選択できるので、お好きなものを選んでください。
#の後の数字だけコピーします

4287f5

[example]

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        // 0xffの後に、16進数で色を指定 [4287f5] だと 0xff4287f5
        appBarTheme: const AppBarTheme(color: Color(0xff4287f5)),
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomePage'),
      ),
    );
  }
}

AppBarの背景色と、テキスト、アイコンの前景色を設定する場合は以下のように書く。

main.dart

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Color(0xffba61ed),// 背景色
          foregroundColor: Color(0xfff02b60),// 前景色
          centerTitle: true,
        )
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Icon(Icons.add),
        ],
        title: const Text('HomePage'),
      ),
    );
  }
}

RGBを使う場合

Flutterだと、fromARGBを使って、RGBの色を変換したものを使うみたいです。正しくは、ARGMを使うと言った方が良いか。

ARGB（アルファ、レッド、グリーン、ブルー）は、色を表すカラーモデルのひとつで、アルファ係数（不透明度）のアルファ（a）、赤の要素（r）、緑の要素（g）、青の要素（b）によって定義されます。各ピクセルの色は、アルファ、赤、緑、青（ARGB）ごとに 8 ビットの 32 ビット番号として表され、4 つの要素はそれぞれ、0 から 255 までの数値になります。0 は明度を表し、255 が最大の明度を表します。アルファ要素では、色の透明度を指定します。0 は完全に透明で、255 は完全に不透明です。

RGBとは何ですか？
RGBは『光の三原色』と呼ばれ、ディスプレイなどを発光させて表示する方式です。「Red」「Green」「Blue」の３光源で構成され、この3つの光を重ねると白色になります。色を重ねれば重ねる程白くなる(明度が増す)ため「加法混色」とも呼びます。

RGBの色を生成するツールで色を探して、　RGBAに変換してあげると使えます。

色を変換するツールがあるので使ってみてください。
https://tech-unlimited.com/color.html

[example]

main.dart

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Color.fromARGB(219, 127, 48, 1),
          // タイトルの文字色を白色に指定
          titleTextStyle: TextStyle(color: Colors.white),
          centerTitle: true,
        )
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Icon(Icons.add),
        ],
        title: const Text('HomePage'),
      ),
    );
  }
}

感想

今回は、１６進数とARGBを使った色の指定をアプリ全体に適用する方法について学びました。１ページごとに、AppBarに色を指定している人がもしいたら、こちらの方法を試してみるといい感じで良くなるかもですね。

対象者

プロジェクトの説明

１６進数を使う

RGBを使う場合

感想

Discussion