Flutter - 在 SliverList 中更改容器高度

Question

I can't figure out a way to change the height of the container when taped in a SliverList. I tried using GestureDetector with setState but I couldn't make it work. I would like to extend the container from 86 to 400 height and add more text when taped.

And alse make it come back to basic height of 86 when taped again.

    return CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          double heightToChange = 86;

          return Container(
            height: heightToChange,
            color: Colors.grey[900],
            width: MediaQuery.of(context).size.width,
            padding: const EdgeInsets.only(
              top: 5,
              bottom: 5,
              left: 15,
              right: 15,
            ),
            margin: const EdgeInsets.only(
                left: 16, right: 16, top: 5, bottom: 5),
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: const EdgeInsets.only(right: 10),
                    alignment: Alignment.center,
                    height: 60,
                    width: 60,
                    child: Image.asset('assets/clef.png'),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'Item $index',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: GoogleFonts.orbitron(textStyle: textStyle3),
                      ),
                      const SizedBox(
                        height: 2,
                      ),
                      Text(
                        'TAG1 > TAG2',
                        style: TextStyle(
                            color: backColor, fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'PRICE 1',
                        textAlign: TextAlign.end,
                        style: textStyle4,
                      ),
                      Text(
                        'PRICE 2',
                        textAlign: TextAlign.end,
                        style: textStyle4,
                      ),
                    ],
                  ),
                )
              ],
            ),
          );
        },
        childCount: 10,
      ),
    ),
  ],
);

Answer 1

You need to make new StatefulWidget as your Item to separate each item's height and state

class ListItem extends StatefulWidget {
  final int index;
  const ListItem(this.index, {Key? key}) : super(key: key);

  @override
  State<ListItem> createState() => _ListItemState();
}


class _ListItemState extends State<ListItem> with AutomaticKeepAliveClientMixin {
  ///Put heightToChange as a parameter to change the height of the list item.
  double heightToChange = 86;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GestureDetector(
      behavior: HitTestBehavior.translucent, //Use translucent to make the list item clickable.
      onTap: () {
        ///Change the height of the list item once the user taps on it.
        setState(() {
          if (heightToChange == 86) {
            heightToChange = 400;
          } else {
            heightToChange = 86;
          }
        });
      },
      child: Container(
        height: heightToChange,
        color: Colors.grey[900],
        width: MediaQuery.of(context).size.width,
        padding: const EdgeInsets.only(
          top: 5,
          bottom: 5,
          left: 15,
          right: 15,
        ),
        margin: const EdgeInsets.only(left: 16, right: 16, top: 5, bottom: 5),
        child: Row(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                margin: const EdgeInsets.only(right: 10),
                alignment: Alignment.center,
                height: 60,
                width: 60,
                child: Image.asset('assets/clef.png'),
              ),
            ),
            Expanded(
              flex: 2,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Item $index',
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: GoogleFonts.orbitron(textStyle: textStyle3),
                  ),
                  const SizedBox(
                    height: 2,
                  ),
                  Text(
                    'TAG1 > TAG2',
                    style: TextStyle(color: backColor, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'PRICE 1',
                    textAlign: TextAlign.end,
                    style: textStyle4,
                  ),
                  Text(
                    'PRICE 2',
                    textAlign: TextAlign.end,
                    style: textStyle4,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  ///Make sure height not changed when scroll
  @override
  bool get wantKeepAlive => true;
}

and then you can simply use it like this

return CustomScrollView(
  slivers: [
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return ListItem(index);
            },
            childCount: 10,
          ),
        ),
   ]
)