为了达到你想要的UI要求，你应该创建一个自定义的模态表。这是非常简单的，你只需要做一个容器，并使用补间动画使它可见，它的工作原理就像一个模态表，你可以改变容器的方向，从它开始动画和更多。我会尝试添加一个代码后。
此包帮您实现侧模单. https://pub.dev/packages/side_sheet
或者还有一种方法，你应该访问这个链接，我希望它能满足你的要求。https://pub.dev/packages/modal_side_sheet
我认为第一个软件包对你更有帮助，因为它有一些定制选项，比如你可以选择边等。

以防有人仍然需要帮助。您可以使用覆盖和补间的组合来创建自定义侧页。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Custom Sidesheet',
      theme: ThemeData(useMaterial3: true),
      home: const MyHomePage(title: 'Custom Sidesheet'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  OverlayEntry? sideSheetOverlayEntry;
  final sideSheetOverlayLayerLink = LayerLink();
  bool isSidebarShown = false;

  @override
  void initState() {
    super.initState();
  }

  void showSideSheet() {
    final sideSheetOverlay = Overlay.of(context)!;
    sideSheetOverlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        height: MediaQuery.of(context).size.height,
        child: isSidebarShown
            ? CompositedTransformFollower(
                link: sideSheetOverlayLayerLink,
                child: TweenAnimationBuilder(
                  tween: Tween<double>(begin: 150, end: 300),
                  duration: const Duration(milliseconds: 300),
                  builder: (BuildContext context, double size, Widget? child) {
                    return Material(
                      child: SafeArea(
                        child: Container(
                            width: size,
                            padding: const EdgeInsets.all(10.0),
                            decoration: BoxDecoration(
                              color: Theme.of(context).colorScheme.surface,
                            ),
                            child: Column(
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    InkWell(
                                      onTap: () {
                                        setState(() {
                                          isSidebarShown = false;
                                          showSideSheet();
                                        });
                                      },
                                      onHover: (value) {},
                                      child: const Icon(
                                        Icons.close,
                                        color: Colors.redAccent,
                                        size: 25.0,
                                      ),
                                    )
                                  ],
                                ),
                                Column(
                                  children: [
                                    Container(
                                      child: Text(
                                        "Custom Side Sheet",
                                        overflow: TextOverflow.ellipsis,
                                        style: const TextStyle(color: Colors.blueGrey),
                                      ),
                                    ),
                                    const Divider(
                                      height: 5.0,
                                      color: Colors.black,
                                    ),
                                    Container(
                                      child: Row(children: [
                                        Icon(
                                          Icons.dashboard,
                                          size: 25.0,
                                          color: Colors.blueGrey,
                                        ),
                                        Text(
                                          "Home",
                                          overflow: TextOverflow.ellipsis,
                                          style: TextStyle(color: Colors.blueGrey, fontSize: 25.0, fontWeight: FontWeight.w300),
                                        )
                                      ]),
                                    )
                                  ],
                                )
                              ],
                            )),
                      ),
                    );
                  },
                ))
            : SizedBox.shrink(),
      ),
    );
    sideSheetOverlay.insert(sideSheetOverlayEntry!);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
            leading: GestureDetector(
              onTap: () {
                setState(() {
                  isSidebarShown = true;
                  showSideSheet();
                });
              },
              child: Icon(
                Icons.menu_sharp,
                size: 30.0,
              ),
            ),
          ),
          body: Container(
            color: Color.fromRGBO(223, 230, 233, 1.0),
          )),
    );
  }
}

side sheet not active image
side sheet active image