開発

【Flutter】Flutterでグラデーションを使用する

こんにちは。

スマホアプリをメインに開発しているロッキーカナイです。

今回はFlutterでグラデーションを使用する方法を記事にしたいと思います。

特に難しいことはひとつもなく簡単に実装可能です。

 

実装

 

解説しますと、ContainerのBoxDecorationのgradientのLinearGradientでグラデーションの設定ができます。

今回は円形にしてグラデーションの設定は上左から下右に赤から青になるように行なってます。

 

flutter_gradientsライブラリを使う方法

グラデーションの便利なライブラリがありますので、それも紹介します。

Dart pubにあるflutter_gradientsの使用方法です。

 

使用方法は、下記になります。

 

このライブラリ内で、グラデーションの設定がたくさん入っているのでその設定値を代入しています。

FlutterGradients.alchemistLab()の設定値がそれに当たります。

サイトに一覧があるので、イメージも湧きやすいですし、もし近いものがなくてもその値から近づけることで実装可能ですね。

 

最後に

 

これがやりたかったのです。(わかる人にはわかるw)

では。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。