web-dev-qa-db-ja.com

Flutterでの選択時にListTileの背景色を変更する

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,),
  );
}
listviewuser-interfacedartbackground-colorflutter
13
Robbert

ListTileプロパティを持つのはstyleではありません。しかし、ListTileTheme。 ListTileThemeは、継承されたウィジェットです。そして、他と同様に、downデータ（ここのテーマなど）を渡すために使用されます。

使用するには、任意のウィジェットをラップする必要があります上記 ListTileに目的の値を含むListTileThemeを使用します。

ListTileは、最も近いListTileThemeインスタンスに応じてテーマ自体になります。

7
Rémi Rousselet

リップル効果を持つonTapリスナーも必要な場合は、Inkを使用できます。

ListView(
  children: [
    Ink(
      color: Colors.lightGreen,
      child: ListTile(
        title: Text('With lightGreen background'),
        onTap() { },
      ),
    ),
  ],
);

Ripple Effect

11
herbert

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')
            )
        )
    ]
)
10
Bagata

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,
        ),
      ));
    }

enter image description here

0
Subir Chakraborty