Flutter expandable tiles inside grid view

Issue

So this is what I'm trying to acheive

I’m trying to achieve this functionality on flutter but honestly have no idea how to do it. I’ve been trying to figure it out for weeks, I tried flutter_staggered_grid_view, which was kind of the closest to this, but that didn’t help either. Does anyone have any idea on how to achieve this effect?

Solution

You can use the Wrap widget as grid, and use some custom widget with AnimatedContainer to expand and retract the bloc.

//number of childs used in the example
static const itemCount = 8;

//list of each bloc expandable state, that is changed to trigger the animation of the AnimatedContainer 
List<bool> expandableState = List.generate(itemCount, (index) => false);

Widget bloc (double width, int index) {
  bool isExpanded = expandableState[index];

  return GestureDetector(
    onTap: () {
      setState(() {
        //changing the current expandableState
        expandableState[index] = !isExpanded;
      });
    },
    child: AnimatedContainer(
      duration: Duration(milliseconds: 200),
      margin: const EdgeInsets.all(20.0),
      width: !isExpanded ? width * 0.4 : width * 0.8,
      height: !isExpanded ? width * 0.4 : width * 0.8,
      color: Colors.red,
    ),
  );
}

@override
Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width;

  return Scaffold(
    body: Align(
      child: SingleChildScrollView(
        child: Wrap(
          children: List.generate(itemCount, (index) {
            return bloc(width, index);
          }),
        ),
      ),
    ),
  );
}

Answered By – LOfG

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *