我检查了你的dartpad代码。为了达到你想要的效果，我建议你在你的句柄两边放两个空的Containers，当你拖动句柄的时候减小它们的大小（你的中心Container也应该在一个Expanded小部件里面，以占据所有允许的空间）。下面是示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'Flutter Stateful Clicker Counter',
      theme: ThemeData(
        // Application theme data, you can set the colors for the application as
        // you want
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Clicker Counter Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double? rightContainerWidth, leftContainerWidth;

  @override
  Widget build(BuildContext context) {
    rightContainerWidth ??= MediaQuery.of(context).size.width / 2 - 20;
    leftContainerWidth ??= MediaQuery.of(context).size.width / 2 - 20;
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Wrap(
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              // left handle
              Container(
                width: leftContainerWidth,
              ),
              GestureDetector(
                  onHorizontalDragUpdate: (DragUpdateDetails details) {
                    setState(() {
                      leftContainerWidth = details.globalPosition.dx;
                    });
                  },
                  child: Container(
                      decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(20),
                            bottomLeft: Radius.circular(20),
                          )),
                      width: 10,
                      height: 200)),

              Expanded(
                child: Container(
                    //  padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),

                    child: ClipRect(
                        child: Container(
                  //   width: _counter+0.2,
                  height: 200,

                  color: Colors.green,
                ))),
              ),

              GestureDetector(
                  onHorizontalDragStart: (DragStartDetails details) {
                    print("st: ${details.localPosition.dx}");
                    // dx for start is the x offset of the mouse relative to the container
                    //   changeX = (_counter as double) - details.localPosition.dx.floor();
                  },
                  onHorizontalDragUpdate: (DragUpdateDetails details) {
                    setState(() {
                      // print(details.localPosition.dx);
                      rightContainerWidth = MediaQuery.of(context).size.width -
                          details.globalPosition.dx;
                    });
                  },
                  child: Container(
                      width: 10,
                      height: 200,
                      decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(20),
                            bottomRight: Radius.circular(20),
                          )))),
              Container(
                width: rightContainerWidth,
              ),
            ])
          ],
        ),
      ),
    );
  }
}

注意：我没有添加条件语句来防止溢出，请确保您也添加了它们！

使用Wrap小部件
在多个水平或垂直运行中显示其子项的小部件。
"环绕"会对每个子项进行布局，并尝试将子项放置在主轴上的前一个子项附近（按方向给定），并在它们之间留出间距。如果没有足够的空间来放置子项，"环绕"会在横轴上与现有子项相邻的位置创建一个新管路。
将所有子级分配给运行后，将根据主轴中的对齐方式和横轴中的crossAxisAlignment定位运行中的子级。
然后，根据runSpacing和runAlignment，在横轴中定位运行本身。
示例：

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('AH')),
      label: const Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('ML')),
      label: const Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('HM')),
      label: const Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('JL')),
      label: const Text('Laurens'),
    ),
  ],
)