'Is there a better way? Expandable rows
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 |
|---|

