【Flutter】ReorderableListViewの並び替え時の背景色を変更する方法

Flutter の ReorderableListView を使用して項目の並べ替えをする際に、デフォルトでは選択した項目の背景色が白色になっていますが、この背景色を変更する方法について調べました。

こちらの Issue にある通り、Theme ウィジェットでラップすることで解決することができます。

以下解説。

ReorderableListViewはリスト表示された項目をドラッグアンドドロップで簡単に並び替えることができるウィジェットです。

並び替え可能なリストを簡単に実装できる便利なウィジェットですが、並び替える項目の背景色はデフオルトでは白色になっています。

そのため背景色が白色でない場合は、並び替えをする時だけ部分的に背景が白色になってしまい、全体のデザインを損なう可能性があります。

return Theme(
    data: ThemeData(
        canvasColor: Colors.transparent
    ),
    child: ReorderableListView(...)
)

並べ替え時の背景色を変更するには、上記のように ReorderableListView ウィジェットを Theme ウィジェットでラップします。

さらに、ThemeDataのcanvasColorプロパティを使い、背景色を透過することで本来の背景色が表示されるようにします。

上書きする際に指定する色は Colors.transparent を指定しています。

これは背景を透過する指定のため、デフォルトでは白色になっているものを透過させ、本来の背景色を表示しています。

Theme は、テーマカラーやフォントスタイルを指定する事でアプリ全体のデザインを統一するために利用されます。今回は Theme ウィジェットを使って部分的に上書きをする事で背景色を変更しています。

Flutter の Theme はトップレベルで一度設定するだけと思っていましたが、部分的にスタイルを上書きする場合にも使える事が分かりました。ただ、もっとスマートなやり方は無いのかなという気もします。（ReorderableListView のプロパティで設定できるとありがたい）

らばーいもっきんぐ