FlutterでListView
を作成しましたが、このListTiles
にいくつかのListView
を選択できます。選択時に、背景色を選択した色に変更する必要があります。どうすればいいのかわかりません。 ドキュメント では、ListTile
にはプロパティstyle
があることを記載しています。ただし、それを追加しようとすると(次のコードの最後の3行目)、このstyle
プロパティは下に波線状の赤い線を取得し、コンパイラはThe named parameter 'style' isn't defined
。
Widget _buildRow(String string){
return new ListTile(
title: new Text(string),
onTap: () => setState(() => toggleSelection(string)),
selected: selectedFriends.contains(string),
style: new ListTileTheme(selectedColor: Colors.white,),
);
}
ListTile
プロパティを持つのはstyle
ではありません。しかし、ListTileTheme
。 ListTileTheme
は、継承されたウィジェットです。そして、他と同様に、downデータ(ここのテーマなど)を渡すために使用されます。
使用するには、任意のウィジェットをラップする必要があります上記 ListTileに目的の値を含むListTileTheme
を使用します。
ListTile
は、最も近いListTileTheme
インスタンスに応じてテーマ自体になります。
BoxDecoration inside Containerを使用して、ListTileの背景色を変更できました。
ListView (
children: <Widget>[
new Container (
decoration: new BoxDecoration (
color: Colors.red
),
child: new ListTile (
leading: const Icon(Icons.euro_symbol),
title: Text('250,00')
)
)
]
)
ListTileをContainer Widgetの子にし、Container Widgetに色を追加することで、ListTileの背景色を変更できました。
ここで、drawerItemはisSelected値を保持するモデルクラスです。背景の色はisSelected値に依存します。
注:選択されていないアイテムでは、色を透明のままにして、さざ波効果を得ます。
for (var i = 0; i < drawerItems.length; i++) {
var drawerItem = drawerItems[i];
drawerOptions.add(new Container(
color: drawerItem.isSelected
? Colors.orangeAccent
: Colors.transparent,
child: new ListTile(
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text(drawerItem.title), drawerItem.count],
),
leading: SvgPicture.asset(
drawerItem.icon,
width: 34,
height: 34,
),
onTap: () {
_handleNavigation(i);
},
selected: drawerItem.isSelected,
),
));
}