我怎样才能在Flutter中实现这样的按钮呢?

nafvub8i  于 2023-03-09  发布在  Flutter
关注(0)|答案(2)|浏览(167)

我怎样才能在flutter中实现这样的按钮呢?我希望这些按钮可以粘在屏幕的侧面并在屏幕中浮动,就像底部导航一样,但是要在侧面而不是在底部。我希望你们都能明白这个想法。

vtwuwzda

vtwuwzda1#

您可以使用RotatedBox小部件,如下所示:

class NewButton extends StatelessWidget {
  const NewButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("App Today")),
      body: Column(
        children: [
          GestureDetector(
            onTap: () {},
            child: Container(
              width: 40,
              height: 100,
              decoration: BoxDecoration(
                  color: Color.fromARGB(255, 54, 105, 247),
                  borderRadius:
                      BorderRadius.horizontal(right: Radius.circular(20)),
                  border: Border.all(
                      width: 2.0, color: Color.fromARGB(221, 8, 1, 24))),
              child: const RotatedBox(
                  quarterTurns: 1,
                  child: Text('REGISTER',
                      style: TextStyle(
                        fontSize: 18,
                        color: Colors.white,
                      ),
                      textAlign: TextAlign.center)),
            ),
          )
        ],
      ),
    );
  }
}

erhoui1w

erhoui1w2#

坚持以下步骤:
1.创建一个简单的ElevatedButton
1.自定义它,使它看起来像你想要的
1.用Stack小部件 Package Scaffold
1.设置Stackalignment: Alignment.center的对齐方式
1.在Stack的子节点中,此时Scaffold应该是Stackchildren属性中的直接子节点,请确保这一点
1.将ElevatedButton也添加到children属性,它应该是Scaffold小部件的同级
1.用Postioned小部件 Package 您创建的ElevatedButton
1.将Positionedleft属性设置为0,left: 0,
1.现在用一个Transform.rotate小工具来旋转这个按钮。
1.将dart的dart:math构建库中的angle属性设置为pi

相关问题