1
@Hyperbolic_____

【Flutter】AppBarの背景色と文字の色を変更する

AppBarの背景色と文字の色を変更する

2020-10-10 15.58のイメージ.jpg
画像のように背景色と文字の色をそれぞれ指定する方法を紹介します。他にやり方やアドバイス等あれば教えて欲しいです。

背景色の設定

appBarのパラメータにはtitleの他,backgroundColorというものがあるので,Colorクラスから色を選択します。

文字の色の指定

titleに指定したTextの文字の色をstyleから変更します。

Text("テスト",
                   style: TextStyle(color: Colors.black),

ソースコード

コピペしてそのまま使えます。

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("テスト",
                   style: TextStyle(color: Colors.black),
      ),
                    backgroundColor: Colors.red),
        body: Center(
          ),
        ),
      );
  }
}
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
Hyperbolic_____
記事について誤っているところがあればコメントして欲しいです。m._.m まとまった記事はZennに書くようにしています。(https://zenn.dev/hyperbola) iOSアプリやGeoGebra、ビジュアルプログラミングが好きです。

コメント

この記事にコメントはありません。
あなたもコメントしてみませんか :)
ユーザー登録
すでにアカウントを持っている方はログイン