在 Flutter 上使用图标按钮打开容器

Question

好morning/afternoon还是晚上。我是学习 Flutter 的新手，我想在我的应用程序上使用 OpenContainer 转换，但我不知道如何使用。这是应用程序中我的图标按钮代码之一：

        Container(

          margin: EdgeInsets.all(30),
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: <Color>[Color(0xff61A534), Color(0xff5bd3a4)])),
          child: IconButton(
            icon: Icon(Icons.eco_rounded),
            iconSize: 40.0,
            color: Colors.white,
            onPressed: () {
              Navigator.push(context, Transicao(widget: TelaCatalogo()));
            },
          ),
        ),
        Container(
            margin: const EdgeInsets.only(bottom: 20.0),
            child: Text('Catálogo',
                style: TextStyle(
                    color: Colors.greenAccent.shade200, fontSize: 16.0))),

Answer 1

可以使用animations package。 OpenContainer 小部件提供现成的动画。

你只需要用它包裹你的card/button，并提供一个closedBuilder（它构建按钮并在按下时调用openContainer）和一个openBuilder（构建 TelaCatalogo 页面）。

      OpenContainer(
        transitionType: _transitionType,
        openBuilder: (BuildContext context, VoidCallback _) {
          return MyPage();
        },
        closedBuilder: (BuildContext context, VoidCallback openContainer) {
          return MyCard(onPressed: openContainer);
        },
      ),

在 Flutter 上使用图标按钮打开容器

Open Container using Icon Buttons on Flutter

transition

flutter

iconbutton