how to close ExpansionTileCard when clicking on another card

Question

I have a ListView with ExpansionTileCard. Everything is displayed normally, but there is a problem, when I click on the ExpansionTileCard widget, additional information opens, and when I click on another card, the previous one does not close. I want to call up some card so that only it is open. Here is my code:

  Widget _buildList(OrdersEntity ordersEntity) {
    return ListView.separated(
      itemCount: ordersEntity.length,
      itemBuilder: (BuildContext context, int position) {
        return _withButton(ordersEntity, position);
      },
      separatorBuilder: (BuildContext context, int index) {
        return const Divider(
          height: 0,
        );
      },
    );
  }

  Widget _withButton(OrdersEntity ordersEntity, int position) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        _getRow(
            name: ordersEntity.itemAtPositionName(position),
            date: ordersEntity.itemAtPositionDate(position),
            status: ordersEntity.itemAtPositionStatus(position),
            id: ordersEntity.idAtPosition(position),
            cost: ordersEntity.itemAtPositionCost(position),
            warranty: ordersEntity.itemAtPositionWarranty(position),
            master: ordersEntity.itemAtPositionMasterName(position),
            bonus: '122',
            onTap: (regionId) {
            }),
      ],
    );
  }

  Widget _getRow({
    required String name,
    required String date,
    required String status,
    required String cost,
    required String warranty,
    required String master,
    required String bonus,
    required String id,
    required ValueChanged<String> onTap,
  }) {
    return Material(
      color: Colorz.white,
      child: InkWell(

        splashColor: Colorz.selectedListItemBG2,
        child: BlocBuilder<OrderHistoryBloc, OrderHistoryState>(
            buildWhen: (previous, current) =>
            current is OrdersRemoveItemState,
            builder: (context, state) {
              bool progress;
              if (state is OrdersRemoveItemState && id == state.nameId) {
                progress = state.isProgress;
              } else {
                progress = false;
              }
              return Stack(
                children: [
                  progress
                      ? Center(
                    child: Container(
                        color: Colorz.transparent30,
                        child: const PlatformProgressIndicator()),
                  )
                      : const EmptyWidget(),
                  _listItemColumn(
                      name: name,
                      date: date,
                      status: status,
                      cost: cost,
                      warranty: warranty,
                      bonus: bonus,
                      master: master,
                      id: id
                  )
                ],
              );
            }),
        onTap: () {},
      ),
    );
  }

  _listItemColumn({
    required String name,
    required String date,
    required String status,
    required String master,
    required String bonus,
    required String cost,
    required String warranty,
    required String id,
  }) {

    return Column(children: [
      Padding(
          padding: EdgeInsets.all(10),
          child: Container(
            padding: EdgeInsets.only(top: 5), //control green
            decoration: BoxDecoration(
              color: _colorStatus(status),
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(24),
                topRight: Radius.circular(24),
              ),
            ),
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius:BorderRadius.only(
                  topLeft: Radius.circular(24),
                  topRight: Radius.circular(24),
                ),
              ),

              child: ExpansionTileCard(
               initiallyExpanded: false,
                title: Text(name),
                subtitle: Text(date),
                trailing: Wrap(
                  spacing: 12, // space between two icons
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Material(
                          color: Colorz.transparents,
                          child: InkWrapper(
                            splashColor: Colorz.lighterGray,
                            child: IconButton(
                                alignment: Alignment.center,
                                icon: SvgPicture.asset(
                                  Img.listItemMenu,
                                ),
                                onPressed: null
                            ),
                            onTap: () {
                            },
                          ),
                        ),
                        Text(
                          status,
                          textAlign: TextAlign.left,
                          maxLines: 1,
                          style: TextStyle(
                            color: _colorStatus(status),
                            overflow: TextOverflow.ellipsis,
                            fontSize: FontSize.tiny,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
                children: [
                  _buildTextLine(
                    Titles.orderMaster,
                    null,
                    master,
                  ),
                  Container(
                    height: Margins.tiny,
                  )

                ],
              ),
            ),
          )
      ),
    ]
    );

  }
}

Answer 1

I think it would be better to use ExpansionPanelList in this case. A int to hold the state.

 int? _selectedIndex;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: ExpansionPanelList(
          expansionCallback: (i, b) {
          if (_selectedIndex == i)
            _selectedIndex = null;
          else
            _selectedIndex = i;
          setState(() {});
          },
          children: List.generate(
            23,
            (index) => ExpansionPanel(
              canTapOnHeader: true,
              isExpanded: index == _selectedIndex,
              headerBuilder: (context, isExpanded) {
                return Text("header $index");
              },
              body: Column(
                children: [
                  Text("body $index"),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }