flutter 我想要一个这样的按钮,但是我不能设置边框或宽度

kqqjbcuj  于 2022-11-30  发布在  Flutter
关注(0)|答案(4)|浏览(179)

我想要一个像这样的按钮,但是我做不出来
请告诉我怎样才能使

我试过了

ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
backgroundColor: Colors.lightBlue[400],
side:BorderSide(width: 2, color: Colors.black)),

结果

gc0ot86w

gc0ot86w1#

Container(
  height: 50,
  width: 200,
  decoration: BoxDecoration(
    color: Color(0xff92fcd1),
    border: Border.all(color: Colors.black),
    borderRadius: BorderRadius.circular(100),
    boxShadow: <BoxShadow>[
      BoxShadow(
        color: Colors.black,
        offset: Offset(2.5, 2.5),
        spreadRadius: 0.1
      )
    ], 
  ),
  child: Center(
    child: Text('LOGIN'),
  )
),

fxnxkyjh

fxnxkyjh2#

Container(
      width: 100,
      height: 30,
      decoration: BoxDecoration(
        border: Border.all(
          width: 1,
          color: Colors.black,
        ),
        color: const Color(0xff93fbd1),
        borderRadius: BorderRadius.circular(15),
        boxShadow: const [
          BoxShadow(
            color: Colors.black,
            blurRadius: 1,
            offset: Offset(1, 2), // Shadow position
          ),
        ],
      ),
      child: TextButton(
        child: const Text(
          'LOGIN',
          style: TextStyle(
              fontStyle: FontStyle.italic,
              color: Colors.black,
              fontWeight: FontWeight.bold),
        ),
        onPressed: () {
          // TODO: button onTap events
        },
      ),
    );
afdcj2ne

afdcj2ne3#

我通常自己创建按钮,您可以添加更多功能

Card(
    elevation: 8,
    color: Color.fromARGB(255, 132, 255, 199),
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
        side: BorderSide(width: 2)),
    child: InkWell(
        borderRadius: BorderRadius.circular(15),
        onTap: () {},
        child: Container(
            padding:
                EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10),
            child: Text(
              "LOGIN",
              style: TextStyle(fontWeight: FontWeight.w700),
            ))),
  )

yftpprvb

yftpprvb4#

我创建这个按钮与完成所有您的需要,有框阴影,斜体登录,响应设计的基础上设备的宽度。

GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {},
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.4,
                  height: MediaQuery.of(context).size.height * 0.05,
                  decoration: BoxDecoration(
                    color: const Color(0xff92fcd1),
                    border: Border.all(color: Colors.black),
                    borderRadius: BorderRadius.circular(100),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.7),
                        spreadRadius: 2,
                        offset:
                            const Offset(2, 2), // changes position of shadow
                      ),
                    ],
                  ),
                  child: const Center(
                    child: Text("Login",
                        style: TextStyle(
                            fontStyle: FontStyle.italic, color: Colors.black)),
                  ),
                ),
              )

这是结果

相关问题