Resize 2 containers

user_13825439 0
Viewed 22

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?

image

flutter-layout flutter
1 Answers

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),
user_101571270
Related