Resize 2 containers - flutter

Question

I wanted to ask how I can automatically resize the two containers here when it is dragged (see picture). It should work so that I can drag in the middle (where the two meet), and the one then becomes larger or smaller.
I can't find anything helpful on the internet :c
At the moment, both containers are in a row.
My code:
Row(children: [
Container(
color: Colors.red,
width: MediaQuery.of(context).size.width * .5,
height: double.infinity),
Container(
color: Colors.blue,
width: MediaQuery.of(context).size.width * .5,
height: double.infinity)
])
Can someone here maybe help me?

Answer 1

Try this widget
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double? leftPart;
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(builder: (context, constraints) {
leftPart ??= constraints.maxWidth / 2; // if you need initially half
return GestureDetector(
onPanUpdate: (details) {
double tapPos = details.globalPosition.dx;
const double softPX = 20; //user flexibility
if (tapPos - 20 < leftPart! && tapPos + 20 > leftPart!) {
leftPart = details.globalPosition.dx;
setState(() {});
}
},
child: Row(
children: [
Expanded(
child: Container(
color: Colors.red,
width: leftPart,
height: double.infinity),
),
Container(
color: Colors.blue,
width: constraints.maxWidth - (leftPart ?? 0.0),
height: double.infinity)
],
),
);
}),
);
}
}
If you like to handle overflow on drag, use
color: Colors.blue,
width: constraints.maxWidth - (leftPart ?? 0.0) >
constraints.maxWidth
? constraints.maxWidth
: constraints.maxWidth - (leftPart ?? 0.0) < 0
? 0
: constraints.maxWidth - (leftPart ?? 0.0),