How can I change the colour of the border of the selected tile in Flutter?

Question

I have list of tile that shows list of available flights. I want to change the colour of the border of the selected tile. At the moment, it changes the colour of all tiles instead of only the selected one.

final flightState = Provider.of<AppState>(context);
return new Material(
    child: ListView.builder(
        itemCount: entityContainer.inbound.length,
        itemBuilder: (BuildContext context, i) => ListTile(
            title: new Row(
              children: <Widget>[
                new Results(
                  entityContainer.inbound[i].departureAirportName,
                  entityContainer.inbound[i].arrivalAirportName,
                  entityContainer.inbound[i].serviceProvider,
                  entityContainer.inbound[i].departureTime,
                  entityContainer.inbound[i].arrivalTime,

                ),
              ],
            ),
            onTap: () {
              if (flightState.getInboundIndex() == i) {
                flightState.updateInboundIndex(-1);
                flightState.unSelectTile();
              } else {
                flightState.updateInboundIndex(i);
                flightState.selectTile();

              }
            })));

I have used provider to keep the state

AppState.dart

class AppState with ChangeNotifier {
  int _inboundIndex;
  bool _selected;

  AppState(this._inboundIndex, this._selected);

  getInboundIndex() => _inboundIndex;
  getSelected() => _selected;

  void updateInboundIndex(i) {
    _inboundIndex = i;
    notifyListeners();
  }

  void selectTile() {
    _selected = true;
    notifyListeners();
  }

  void unSelectTile() {
    _selected = false;
    notifyListeners();
  }}

This is where the drawing taking place based on the state

Result.dart

  .....
  .....
  decoration: BoxDecoration(
    border: Border.all(
        color: flightState.getSelected() ? Colors.green : Colors.black26,
        width: flightState.getSelected() ? 8.0 : 1.0),
  ),
 .....
 .....

Is `flightState` making use of a unique instance for each flight(or item in the list)? It would be helpful if you would add where and how you have defined `flightState`. — 10101010, Jul 15 '19 at 14:36

score 0 · Answer 1 · answered Jul 15 '19 at 15:30

In case someone has similar problem. This is how I do to solve the issue:

I have passed the index as bellow

          new Results(
              entityContainer.inbound[i].departureAirportName,
              entityContainer.inbound[i].arrivalAirportName,
              entityContainer.inbound[i].serviceProvider,
              entityContainer.inbound[i].departureTime,
              entityContainer.inbound[i].arrivalTime,
              i
            ),

And, changed the render as bellow:

    decoration: BoxDecoration(
    border: Border.all(
        color: (flightState.getSelected() &&
                currentIndex == flightState.getInboundIndex())
            ? Colors.green
            : Colors.black26,
        width: flightState.getSelected() ? 2.0 : 1.0),
    ),

How can I change the colour of the border of the selected tile in Flutter?

1 Answers1