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:
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:
 drogel
 drogelTry 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,
      ),
 Ping
 PingUser contributions licensed under CC BY-SA 3.0