Flutter

AppBarの背景をグラデーションにする

Flutter Widget Basics AppBar

AppBarでは背景色を指定できるが、それにグラデーションを効かせたい。しかし、AppBarcolorにはGradientを設定できないのでAppBarをラップしたGradientAppBarを実装してみる。

PreferredSizeWidget

StatelessWidgetextendsした新しいクラスを定義したいが、ScaffoldappBarのクラスはPreferredSizeWidgetで宣言されているため、PreferredSizeWidgetinterfaceを実装しておく必要がある。

そこでGradientAppBarclassはPreferredSizeWidgetimplementsしてpreferredSizeoverrideする。GradientAppBarをメンバ変数とし、指定できるようにする。preferredSizeAppBarpreferredSizeをそのまま使う。

GradientAppBarの使用例

GradientAppBarを実際に使ってみた例。

gradientLinearGradienttopCenterからtopBottomへのグラデーションとし、カラーを二色設定した。

Flutterを使ったアプリをリリースしてます。良ければ使ってみてください。