【Flutter】背景全体の色を変える

Flutterでアプリの背景全体（バックグラウンド）の色を変えたい！

概要

今回の記事では、Flutterでアプリの背景全体（バックグラウンド）の色を変える手順を掲載する。

仕様書

環境

Android Studio Giraffe | 2022.3.1
Flutter 3.10.5

手順書

16進数で色指定する方法と整数＆実数で色指定する方法がある。

16進数で色指定する

背景全体の色を16進数で色を指定して変える例。

...
class AppPageState extends State<AppPage> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: const Color(0xff008751),
            appBar: AppBar(
...

backgroundColor: const Color(0xff008751),の部分のColor(0xff008751)なんだけどもColor関数に16進数で色を指定する。

ARGBという感じの順番になってて、先頭のサンプルでいうとffの部分はアルファ値になってて、不透明の場合（アプリ全体の背景の場合は大抵不透明）は、サンプルと同様にffにする。

整数＆実数で色指定する

背景全体の色を整数＆実数で色を指定して変える例。

...
class AppPageState extends State<AppPage> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: const Color.fromRGBO(0, 135, 81, 1.0),
            appBar: AppBar(
...

backgroundColor: const Color.fromRGBO(0, 135, 81, 1.0),の部分のColor.fromRGBO(0, 135, 81, 1.0)なんだけどもColor.fromRGBO関数に引数で色を指定する。

fromRGBOという関数名の通りでR（赤）、G（緑）、B（青）、O（アルファ値）の順の引数で数値を渡す。RGBは0~255の整数。Oは0～1の実数。

まとめ（感想文）

ライトテーマとかダークテーマとかに対応したい場合はテーマを使うっぽい。それはまた別の記事で。