11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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(
          ),
        ),
      );
  }
}
11
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?