Flutter : raised button width issue

0

I have issue with raised button on flutter, my codes ran without error but visually the raised button have background and taking too much width, I want get rid of it.

This is the code:

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

and this is the raised button screenshot:

raised button

flutter
dart
flutter-layout
asked on Stack Overflow Mar 5, 2020 by dexdim • edited Mar 5, 2020 by dexdim

2 Answers

2

I wrote this snippet that you can run on DartPad. Is this what you were looking for? I think the issue was having a big Container as a child of the RaisedButton, you did not need that at all, you can determine the shape and styling of the button in the button itself, there's no need to add extra children, apart from the text.

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

Here is the result:

RaisedButton

answered on Stack Overflow Mar 5, 2020 by drogel
0

Try OutlineButton

    OutlineButton(
            shape: const StadiumBorder(),
            child: Text(
              'SUBMIT',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w400,
                  color: const Color(0xffD67219)),
            ),
            onPressed: validateAndSubmit,
          )

If it is style of your button in app. you should be config in your theme

    accentColor: AppStyle.orange,
    buttonTheme: const ButtonThemeData(
        height: 40,
        shape: StadiumBorder(),
        buttonColor: AppStyle.orange,
        textTheme: ButtonTextTheme.accent,
      ),
answered on Stack Overflow Mar 5, 2020 by Ping

User contributions licensed under CC BY-SA 3.0