FlutterでappBarの背景をグラデーションにする方法

4 min read読了の目安(約4100字

こんにちは🦭

今回はappBarの背景(下の画像の青色部分)をグラデーションにする方法を紹介したいと思います。





このありきたりなappBarを今回はnew_gradient_app_barというパッケージを使ってオシャレにしたいと思います。ちなみに、gradient_app_barという名前がそっくりのパッケージがありますが、GitHubを見ると最後のコミットが2019年の9月なので、new_gradient_app_barを使った方が良いのかなと個人的には思います。

手順

  1. パッケージのインストール
    まずはpub.devに従ってpubspec.yamlに記述を追加します。

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  new_gradient_app_bar: ^0.2.0 # 追加



パッケージのバージョンはこの記事を書いている時点のものなので、pub.devでしっかり確認するのをオススメします!

pub getもお忘れなく。


2. ファイルの編集
あとは使いたいファイルでインポートして使うだけです。今回はmain.dartファイルを編集したいと思います。

main.dart
import 'package:flutter/material.dart';
import 'package:new_gradient_app_bar/new_gradient_app_bar.dart'; // インポート

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: Scaffold(
        // ここから
        appBar: NewGradientAppBar(
          title: Text('Sample App'),
          gradient: LinearGradient(
            colors: [Colors.lightBlue.shade200, Colors.deepPurple.shade200],
          ),
        ),
	// ここまで
        body: Container(),
      ),
    );
  }
}



コメントアウトに挟まれた部分でappBarの設定をしています。よくあるAppBar()の代わりにNewGradientAppBar()を使います。NewGradientAppBar()gradient:に値を設定することでグラデーションを実装できます。

そして、上のコードで出来上がったのがこちらです。





いい感じにできました🎨

もう少し詳しく

グラデーションの設定に関してもう少し詳しく説明します。

色の設定

LinearGradient()LinearGradient(colors: [color1, color2, color3])のように色を2種類以上設定できます。以下のように設定を変えると

gradient: LinearGradient(
            colors: [
              Colors.lightBlue.shade200,
              Colors.yellow.shade200,
              Colors.deepPurple.shade200
            ],
          ),






こんな感じになります。

ちなみに、独自の色を設定したい場合はcolors: []の中身をColor.fromRGBO(r, g, b, opacity)にすることで好きな色を設定することができます。試しに以下のように変えてみると

gradient: LinearGradient(
            colors: [
              Color.fromRGBO(255, 105, 180, 1.0),
              Color.fromRGBO(64, 224, 208, 1.0),
            ],






こんな感じになって、ちゃんと描写されているのがわかります。

グラデーションの方向の設定

LinearGradient()begin:end:を設定することでグラデーションの方向を指定できます。試しにグラデーションの方向を上から下に変えてみます。

gradient: LinearGradient(
            colors: [
              Colors.lightBlue.shade200,
              Colors.deepPurple.shade200,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),






いい感じです。

色の分岐点の設定

最後にstops:を紹介します。LinearGradient()stops:を設定することで色の分岐点を指定できます。これは設定前と設定後の実物を見ながら説明したほうが分かりやすいと思うので早速やってみましょう。

// 設定前
gradient: LinearGradient(
            colors: [
              Colors.lightBlue.shade200,
              Colors.pink.shade200,
              Colors.deepPurple.shade200,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),

// 設定後
gradient: LinearGradient(
            colors: [
              Colors.lightBlue.shade200,
              Colors.pink.shade200,
              Colors.deepPurple.shade200,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: [0.0, 0.75, 1.0], // 追加
          ),





わかりにくいかもしれませんが、stops: [0.0, 0.75, 1.0]という設定を追加することでピンク色の濃い部分が下に変化しています。これはグラデーションの開始位置(0.0)がColors.lightBlue.shade200、75%進んだ位置でColors.pink.shade200、終了位置(1.0)でColors.deepPurple.shade200に変化するグラデーションという意味になります。


色々試してみましたが、誰でも簡単に使えそうなのでありがたいですね🎶

以上でFlutterでappBarの背景をグラデーションにする方法の説明を終わります。

最後までお読みいただきありがとうございました。