在 Flutter 中设计这个按钮？

Question

如何在flutter中设计这种按钮？

Answer 1

您可以使用带有透明颜色和白色边框和阴影的提升按钮

Answer 2

试试下面的代码希望对你有帮助。

Container(
      padding: EdgeInsets.all(10),
      height: 80,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(80),
      ),
      child: InkWell(
        onTap: () {
          //Write your onPressed function here
          print('Button Pressed');
        },
        child: Card(
          color: Colors.teal[100],
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(70),
          ),
          child: Center(
            child: Text(
              'Sign In',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
        ),
      ),
    ),

您的结果屏幕->

Answer 3

给你，根据你的需要调整：

Container(
            color:  Color.fromRGBO(133,208,212,1),
            padding: const EdgeInsets.all(15),
            child: Container(
              padding: EdgeInsets.all(8),
              decoration: ShapeDecoration(
                shape: StadiumBorder(),
                color:  Color.fromRGBO(133,208,212,1),
                shadows: <BoxShadow>[
                  BoxShadow(
                    color: Colors.white,
                    spreadRadius: 8,
                    blurRadius: 3,
                    offset: Offset(0, 0),
                  ),
                  BoxShadow(
                    color: Colors.grey.shade300,
                    spreadRadius: 3,
                    blurRadius: 3,
                    offset: Offset(5, 2),
                  ),
                ],
              ),
              child: Text(
                'Sign in',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),

第一个 Container 只是为了突出它 child，所以并不重要

在 Flutter 中设计这个按钮？

Design this Button in Flutter?

button

flutter