时间戳

首页 > 解决方案 > 如何在颤动中创建带有图标的向上滑动面板？

flutter - 如何在颤动中创建带有图标的向上滑动面板？

问题描述

如何创建这样的底部向上滑动面板？图片

我为颤振添加了插件向上滑动面板插件。这是以下代码

collapsed:Container(
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: radius
            ),
            child: Padding(
                padding: EdgeInsets.only(left: 5,right: 5),
                child:Container(
                  height: 90,
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Container(//first container 
                          height: 20,
                          width: 60,
                          child: Padding(
                            padding: EdgeInsets.only(bottom: 5,top: 5),
                            child:RaisedButton(
                                color: Colors.white,
                                onPressed: (){},
                                shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
                            ) ,
                          ),
                        ),
                        Container(//second container
                          height: 60,
                          child: ListTile(
                            onTap: (){},
                            title: Text('Cart: ',style: TextStyle(color: Colors.black),),
                            trailing: Text("Total( "+" :sum)"),
                          ),
                        )
                      ]
                  ),
                )
            )
        ),

结果是在此处输入图像描述

那么如何像第一个图像一样移动第一个容器呢？

标签： fluttersliding

解决方案

我将SlidingUpPanel颜色更改为透明，并且只在通缉页眉上使用背景颜色白色。也许您应该根据自己的喜好修复框阴影，我认为您应该稍微减少填充和图标高度。

SlidingUpPanel(
      minHeight: 90,
      maxHeight: MediaQuery.of(context).size.height / 2,
      backdropEnabled: true,
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(20),
      ),
      color: Colors.transparent,
      collapsed: Container(
        child: Container(
          height: 90,
          child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  //first container
                  height: 20,
                  width: 60,
                  child: Padding(
                    padding: EdgeInsets.only(bottom: 10),
                    child: RaisedButton(
                        color: Colors.white,
                        onPressed: () {},
                        shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(30.0))),
                  ),
                ),
                Container(
                  //second container
                  height: 60,
                  decoration: BoxDecoration(
                  color: Colors.white,
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(20),
                    ),
                  ),
                  child: ListTile(
                    onTap: () {},
                    title: Text(
                      'Cart: ',
                      style: TextStyle(color: Colors.black),
                    ),
                    trailing: Text("Total( " + " :sum)"),
                  ),
                )
              ]),
        ),
      ),
);

推荐阅读