Flutter:凸起的按钮宽度问题

问题描述 投票:0回答:1

我在颤振器上的凸起按钮有问题,我的代码正常运行,但从外观上看,凸起的按钮具有背景并且占用了太多宽度,我想摆脱它。

这是代码:

  Widget _loginButton() {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Container(
              child: Text(
                'SUBMIT',
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w400,
                    color: Color(0xffD67219)),
              ),
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.symmetric(vertical: 10),
              margin: EdgeInsets.symmetric(
                  horizontal: MediaQuery.of(context).size.width / 3.5),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Color(0xffffffff),
                border: Border.all(
                  width: 1,
                  color: Color(0xffd67219),
                ),
                borderRadius: BorderRadius.circular(25.00),
              )),
          onPressed: validateAndSubmit,
        )
      ],
      mainAxisSize: MainAxisSize.min,
    );
  }

这是凸起的按钮屏幕截图:

raised button

flutter dart flutter-layout
1个回答
0
投票

我编写了可以在DartPad上运行的代码段。这是您要找的东西吗?我认为问题是Container的子元素很大RaisedButton,您根本不需要它,您可以确定按钮本身的按钮的形状和样式,无需添加额外的子元素,除文字外。

Widget _loginButton() {
    return Row(
      children: <Widget>[
        RaisedButton(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25.00),
            side: BorderSide(
              color: Color(0xffd67219),
              width: 1,
            ),
          ),
          color: Color(0xffffffff),
          padding: EdgeInsets.symmetric(
            vertical: 10,
            horizontal: MediaQuery.of(context).size.width / 3.5,
          ),
          child: Text(
            'SUBMIT',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.w400,
              color: Color(0xffD67219),
            ),
          ),
          onPressed: () {},
        )
      ],
      mainAxisSize: MainAxisSize.min,
    );
  }

这里是结果:

RaisedButton

© www.soinside.com 2019 - 2024. All rights reserved.