flutter 自定义侧边栏showDialog

showDialog+添加平移动画效果

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../common/Global.dart';
import '../../common/colors.dart';
import '../../router.dart';
import '../widget/myText.dart';

//小说目录
class NovelCatalogue extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => NovelCatalogueState();
}

class NovelCatalogueState extends State<NovelCatalogue> with SingleTickerProviderStateMixin{
  bool hasShowCatalogue = false;
  late AnimationController controller;
  late Animation<Offset> animation;

  @override
  void initState() {
    controller = AnimationController(
        duration: const Duration(milliseconds: 200), vsync: this);
    animation = Tween(begin: const Offset(1, 0), end: const Offset(0, 0))
        .animate(controller);
    if (controller.isCompleted || controller.isDismissed) {
      controller.forward();
      hasShowCatalogue=true;
    }
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _requestPop,
      child: SlideTransition(
        position: animation,
        child: GestureDetector(
          onTap: () {
            hasShowCatalogue=false;
            controller.reverse();
            Future.delayed(Duration(milliseconds: 100), () {
              MyRouter.pop(context);
            });
          },
          child: Material(
            color: Colors.transparent,
            child: GestureDetector(
              onTap: () {},
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    alignment: Alignment.centerRight,
                    height: Global.screenHeight,
                    width: Global.screenWidth - 70,
                    color: Colors.white,
                    child: Column(
                      children: [
                        addHeadView(),
                        Expanded(
                            child: SingleChildScrollView(
                              child: Column(
                                children: [
                                  MediaQuery.removePadding(
                                      removeTop: true,
                                      context: context,
                                      child: ListView.builder(
                                          itemCount: 10,
                                          physics:
                                          const NeverScrollableScrollPhysics(),
                                          shrinkWrap: true,
                                          itemBuilder: (BuildContext context,
                                              int index) {
                                            return Container(
                                              margin: EdgeInsets.only(
                                                  left: 10.r, right: 10.r),
                                              child: Column(
                                                children: [
                                                  Row(
                                                    children: [
                                                      ConstrainedBox(
                                                        constraints: BoxConstraints(
                                                            maxWidth: Global
                                                                .screenWidth -
                                                                20 -
                                                                70),
                                                        child: Text(
                                                          '第九百八十章 不经意的指点是一个是佛啊后方熬哦跌幅为地上',
                                                          style: TextStyle(
                                                              color: Colors
                                                                  .black,
                                                              fontSize:
                                                              16.sp),
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                  Container(
                                                    margin: EdgeInsets.only(
                                                        top: 10.r,
                                                        bottom: 10.r),
                                                    height: 1,
                                                    color: Colors.grey,
                                                  )
                                                ],
                                              ),
                                            );
                                          }))
                                ],
                              ),
                            ))
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget addHeadView() {
    return Container(
        padding: EdgeInsets.only(
            top: Global.topHeight, left: 10.r, bottom: 5.r, right: 15.r),
        margin: EdgeInsets.only(bottom: 10.r),
        child:
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: const Image(
              image: AssetImage('assets/images/icon_back@2x.png'),
              width: 24,
              height: 25,
              color: Colors.black,
            ),
          ),
          GestureDetector(
              onTap: () {
                //点击后清空列表数据，获取最底部的数据
              },
              child: ContentText('顺序', 16.0, CommonColors.getColor1A1A1A))
        ]));
  }

  //监听物理返回键，限制返回
  Future<bool> _requestPop() {
    print('是否展示目录}');
    if(mounted){
      if (Navigator.canPop(context)) {
        if(hasShowCatalogue){
          controller.reverse();
          hasShowCatalogue=false;
          print('返回键进到这里1');
          Future.delayed(Duration(milliseconds: 100),(){
            MyRouter.pop(context);
          });
        }else{
          MyRouter.pop(context);
          print('返回键进到这里2');
        }
        // MyRouter.pop(context);
      }
    }
    return Future.value(false);
  }
}

使用时

  showBroadSide() {
    showDialog(
        useSafeArea:false,
        context: context,
        builder: (context) => NovelCatalogue());
  }