技術記事

micomia株式会社の井上です。今回はSlidable ListTileについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。

1. Slidable ListTileとは

Slidable ListTileは、その名のとおりListTileをスライド可にしたものです。

ListTileについてご存知でない方は、前回の記事で詳しく解説しているので先にそちらを読んでいただく事をおすすめします。

ListTileとは？｜初心者向けのFlutterFlow徹底解説

2. Slidable ListTileの実装方法

Slidable ListTileの実装方法は至って簡単です。通常のListTileを実装後、Slidable PropertiesにあるSlidableをONにするだけです。

スライドした状態のUIを確かめたいときはOpen Slidableを押すことで

このようにスライドした状態が表示されます。元に戻したいときは「Close Slidable」を押すことで閉じることができます。

3. Slidable ListTileの詳細設定

ここからはSlidable ListTileでできる詳細な設定について解説していきます。特にできることはListTileと変わりないですが、1点特徴的な部分はスライドした時に出てくる部分の設定です。

まず、SlidableをONにするとWidget Panelに自動的に追加されるSlidable Action Widgetを選択します。

すると、Slidable Action Widget Propertiesの箇所にText, Color, Icon Selectorがあります。この部分からスライドした時に出てくる部分を変更できます。

今回は、以下のように変更してみました。

するとこのようなUIになりました。

このSlidable Actionに画面遷移などのActionを追加したい場合はAction Panelから他のWidgetと同じように追加できます。

「削除する」やその上のアイコンカラーは基本、先ほど設定したColorに合わせて自動的に変更されるようです。ちなみに、スライドした状態を見れるようにするOpen Slidable/Close Slidableの横にあるAdd Actionを押すと

このようにSlidable Actionが追加されます。お好みで複数のActionを追加してください。

4. さいごに

今回はSlidable ListTileについて解説しました。ListTileとあまり変わらないWidgetですが。これを使用することで、より細かい動きのできるアプリが作れるようになるのでぜひ本記事の内容を活用してみてください。

本記事の内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら