设计这个按钮在颤栗？

Question

我怎么设计这种扣子呢？

​

​

Answer 1

给你，适应你的需要：

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),
              ),
            ),
          ),

第一个容器的存在只是为了突出显示它的子容器，所以它并不重要

Answer 2

您可以使用带有透明颜色和白色边框和阴影的高电平按钮。

Answer 3

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

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,
              ),
            ),
          ),
        ),
      ),
    ),

结果屏幕->

​