Help us understand the problem. What is going on with this article?

Flutter グラデーションいろいろ 🎨

🏹 TL;DR

Flutter でのグラデーションの設定方法をまとめました。
サンプルコード、表示イメージを用意していますので、利用用途にマッチするものがあればコピペして使ってください。

また、「 ここにグラデーションつけたいんだけど? 」みたいなのがあれば調べて追記しますので、コメント欄にでもお書きください。

デフォルトの表示イメージ

新規 Flutter アプリケーションとして用意されているサンプルアプリを利用してグラデーションを施していきます。
default.png

AppBar

アプリの上に表示される AppBar にグラデーションを施します。
AppBar には backgroundColor プロパティが用意されていますが、単色でしか設定できないので gradient_app_bar パッケージを導入します。

コードサンプル

gradient_app_bar を利用するために pubspec.yml ファイルを編集します。

pubspec.yml
dependencies:
  flutter:
    sdk: flutter

  # https://pub.dev/packages/gradient_app_bar
  gradient_app_bar: ^0.0.1

あとは AppBar 実装部分を次のように変更するだけ。

appBar: GradientAppBar(
  title: Text(widget.title),
  backgroundColorStart: const Color(0xffe4a972),
  backgroundColorEnd: const Color(0xff9941d8),
),

変更内容をまとめると、

  • AppBarGradientAppBar
  • backgroundColorbackgroundColorStartbackgroundColorEnd

です。

シンプルなパッケージなので、グラデーションの向き(左上から右下など)は変更できません。

表示イメージ

app_bar.png

body

アプリの body 、つまりメインとなるウィジェットの背景色をグラデーションする方法です。

大雑把に説明するとグラデーションしているのは BoxDecorationContainer をデコレーションしています。
もともと body に設定していたウィジェットは、その Container の子要素として設定します。

コードサンプル

body: Container(
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: FractionalOffset.topLeft,
      end: FractionalOffset.bottomRight,
      colors: [
        const Color(0xffe4a972).withOpacity(0.6),
        const Color(0xff9941d8).withOpacity(0.6),
      ],
      stops: const [
        0.0,
        1.0,
      ],
    ),
  ),
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.display1,
        ),
      ],
    ),
  ),
),

もともと body に設定していた Center を、そのままグラデーションされた Containerchild にしてやれば OK です。

表示イメージ

body.png

FloatingActionButton

右下に表示されているいかにもマテリアルデザインって感じの FloatingActionButton
これもグラデーションすることができます。

やり方は body のときと同じで、 BoxDecoration でデコレーションされた Container でラップしてやります。

コードサンプル

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: Container(
    height: double.infinity,
    width: double.infinity,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      gradient: LinearGradient(
        begin: FractionalOffset.topLeft,
        end: FractionalOffset.bottomRight,
        colors: const [
          Color(0xffe4a972),
          Color(0xff9941d8),
        ],
      ),
    ),
    child: Icon(Icons.add),
  ),
),

もともと floatingActionButtonchild に設定していた Icon を、そのままグラデーションされた Containerchild にしてやれば OK です。

表示イメージ

floating_action_Button.png

テキスト

力技ではありますが、アプリに表示されるテキストにもグラデーションを施すことが可能です。

コードサンプル

まずはテキストのスタイルに設定するための Shader を用意します。

サンプルアプリでは _MyHomePageStatebuild メソッドの頭にでも追加してやればいいと思います。

final Shader _linearGradient = LinearGradient(
  colors: <Color>[
    Color(0xff1A2980),
    Color(0xff26D0CE),
  ],
).createShader(
  Rect.fromLTWH(
    0.0,
    0.0,
    250.0,
    70.0,
  ),
);

BoxDecoration のときとは異なり、座標指定で作成した Shader を文字に重ねているので、フォントサイズの変更などに柔軟に対応する場合は、ひと手間いりそうです。
(参考にサイトを下にまとめていますが、そちらでは座標を計算してくれるメソッドなども書かれていました)


あとはグラデーションしたい Text にスタイル設定してやれば OK 。

Text(
  'You have pushed the button this many times:',
  style: new TextStyle(
    fontSize: 32.0,
    fontWeight: FontWeight.bold,
    foreground: Paint()..shader = _linearGradient),
),

foreground: Paint()..shader = _linearGradient のところで用意した Shader を設定しています。
※表示イメージが見やすいようにフォントサイズも大きくしています

表示イメージ

text.png

まとめ

グラデーション好きーな僕ですが、普段やってる CSS などでの実装に比べて少し手間に感じました。
また、コンポーネントごとに実装方法も異なるので、もう少しシンプルに統一された実装ができるようになればな……、という感じです。


一応、今回のソースコードを GitHub にあげていますので、興味のある方はどうぞ。
:octocat: azukisiromochi/gradient_sample | GitHub


この記事はグラデーションを使いたい人のために随時更新していくつもりですので、グラデーションの設定方法がわからないものがあればお伝え下さい!
それでは、良い Flutter & グラデーションライフを~ :yum:

参考にしたサイト

:link: Flutter: How to Use Gradients and the GradientAppBar Plugin

:link: How to add Floating action Button in Bottom Navigation Bar in Center with border? | Stack Overflow

:link: Gradient text in Flutter | Medium

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした