'Is there a better way? Expandable rows

enter image description here

Hello. I was stuck for some time with this problem but I achieved what is shown in the gif with the following code:

class _EntitiesState extends State<Entities> {
  bool selected = false;
  bool selected2 = false;
  bool selected3 = false;

  var xwidth = 1;

  final activeColor = Colors.red;

  var flex1 = 1;
  var flex2 = 1;
  var flex3 = 1;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: flex1,
          child: GestureDetector(
            onTap: () => {
              setState(() {
                flex1 = 0;
                flex2 = 1;
                flex3 = 1;
                selected3 = !selected3;
              })
            },
            child: AnimatedContainer(
              color: selected3 ? activeColor : Colors.green,
              width: MediaQuery.of(context).size.width *
                  (selected3 ? xwidth : 0.33),
              duration: const Duration(seconds: 1),
              child: Container(),
            ),
          ),
        ),
        Expanded(
          flex: flex2,
          child: GestureDetector(
            onTap: () => {
              setState(() {
                flex1 = 1;
                flex2 = 0;
                flex3 = 1;
                selected2 = !selected2;
              })
            },
            child: AnimatedContainer(
              color: selected2 ? activeColor : Colors.yellow,
              width: MediaQuery.of(context).size.width *
                  (selected2 ? xwidth : 0.33),
              duration: const Duration(seconds: 1),
              child: Container(),
            ),
          ),
        ),
        Expanded(
          flex: flex3,
          child: GestureDetector(
            onTap: () => {
              setState(() {
                flex1 = 1;
                flex2 = 1;
                flex3 = 0;
                selected = !selected;
              })
            },
            child: AnimatedContainer(
              color: selected ? activeColor : Colors.blue,
              width: MediaQuery.of(context).size.width *
                  (selected ? xwidth : 0.33),
              duration: const Duration(seconds: 1),
              child: Container(),
            ),
          ),
        ),
      ],
    );
  }
} 

I have a question. Is there a better, more elegant way to do this? Maybe there is a suitable flutter element that does it? My solution is kinda primitive and doesn't work well with a lot of expandable rows.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source