Flutter for WebをGithubのProject Pagesで公開する

Flutterのバージョン1.9からFlutter for Webを正式にサポートしたのでGithubのProject Pagesで公開してみたい。Flutterのexamplesに含まれるFlutter galleryをそのまま公開する手順です。

FlutterのThemeを動的に変更する

Flutterにはアプリ全体のカラーリングを設定できるThemeWidgetがある。

基本的な使い方はMaterialAppのthemeに自作のThemeDataを渡すこと。これだけで配下のMaterialComponent全体のテーマを変更できるのだが、さらにStatefulWidgetでThemeDataを動的に変更できるようにするとアニメーションを加えた上でテーマを変えてくれる機能までついている。

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

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

Column Widgetの使い方

子Widgetを垂直方向に並べるWidget。

利用可能なスペースを埋めるためには子WidgetをExpandedでラップする。Columnはスクロールしない。スクロールするリストが必要ならListViewを使うことを検討したほうがいい。

AppBar Widgetの使い方

マテリアルデザインのアプリバーを実装するためのWidget。アプリバーは基本的なツールバーと、場合によってはTabBarやFlexibleSpaceBarなどの他のWidgetで構成される。