Closed5

Flutter備忘録

Flutter
Dart
はるはる

Flutterの備忘録などをここに載せていきます。

はるはる

Appbar

基本

Scaffold(
  appBar: AppBar(
    // 左側のアイコン
    leading: Icon(Icons.arrow_back),
    // タイトルテキスト
    title: Text('Hello'),
    // 右側のアイコン一覧
    actions: <Widget>[
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.favorite),
      ),
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.more_vert),
      ),
    ],
  ),
)

下のような画面になります。

引用：AppBarを表示 | Flutterで始めるアプリ開発

背景色とタイトルの色を変える

title: const Text(
  'タイトル名',
  style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.red,

参考：【Flutter】AppBarの背景色と文字の色を変更する #Flutter - Qiita

自分用AppBarとBody

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            'デモアプリ',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: const Color(0xff2C98F0),
        ),
        body: const Center(
          child: Text(
            'デモアプリ',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
はるはる

色を指定する

1つ目の方法 fromRGBOを使う

//red, green, blueには、「０〜２５５」の値を指定
//opacityには、透明度を「０〜１」で指定（0に近づくほど透明、1に近づくほど不透明）
Color.fromRGBO(red, green, blue, opacity)

2つ目の方法 Color()を使う

Color(0xffffffff)

参考：［Flutter］色（color）をRGBで指定するには？ | ちょげぶろぐ

このスクラップは16日前にクローズされました