Flutter浮动操作按钮定制

Question

我正在尝试创建一个 Flutter 应用程序，其中可以单击浮动操作按钮以使容器向上滑动。我附上了一张图片，它是如何工作的。请帮助我实现这一目标。

AnimatedOpacity(
 duration: Duration(milliseconds: 300),
 opacity: ref.watch(floatingButtionShow) ? 0.5 : 0.0,
 child: AnimatedPositioned(
         duration: Duration(milliseconds: 300),
         bottom: ref.watch(floatingButtionShow) ? 100 : -10,
         child: Container(
                   width: 200,
                   height: 150,
                   color: Colors.blue,
                   child: Center(
                          child: Text(
                            'Floating Container',
                            style: TextStyle(color: Colors.white, fontSize: 18),
     ),
    ),
  ),
 ),
 ),

我试图在单击浮动操作按钮时使该容器出现在屏幕中央。

Answer 1

你可以使用它做任何你想做的事。

floatingActionButton: FloatingActionButton(
    onPressed: () {
      showDialog(
        context: context,
        builder: (context) => Padding(
          padding: const EdgeInsets.only(bottom: 70.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(20),
                    bottomRight: Radius.circular(20),
                  ),
                  color: Colors.green,
                ),
                margin: EdgeInsets.only(left: 16, right: 16),
                width: double.infinity,
                height: 150,
                child: Text(
                  'Floating Container',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
              ClipPath(
                clipper: MyClipper(),
                child: Container(
                  height: 20,
                  width: 400,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        ),
      );
    },
    child: const Icon(Icons.add),
  ),


 class MyClipper extends CustomClipper<Path> {
 @override
 Path getClip(Size size) {
 var firstOffset = Offset(size.width * 0.45, 0.0);
 var secondPoint = Offset(size.width * 0.50, size.height);
 var lastPoint = Offset(size.width * 0.55, 0.0);
 var path = Path()
   ..moveTo(firstOffset.dx, firstOffset.dy)
   ..lineTo(secondPoint.dx, secondPoint.dy)
   ..lineTo(lastPoint.dx, lastPoint.dy)
   ..close();

 return path;
 }

 @override
 bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
   return true;
 }
}