Zenn
🌈

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

2021/05/20に公開
Flutter
Dart
tech

こんにちは😀

今回は 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 {
  @override
  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 の背景をグラデーションにする方法の説明を終わります。

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

GitHubで編集を提案

Discussion