Question 78614 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I upgrade a "RaisedButton" to "ElevatedButton" in Flutter?

I got the following code and want to make it work:

              RaisedButton(
                child:
                    Text(_authMode == AuthMode.Login ? 'LOGIN' : 'SIGN UP'),
                onPressed: _submit,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
                padding:
                    EdgeInsets.symmetric(horizontal: 30.0, vertical: 8.0),
                color: Theme.of(context).primaryColor,
                textColor: Theme.of(context).primaryTextTheme.button.color,
              ),

I tried to change it to some point as the following:

          ElevatedButton(
            child:
                Text(_authMode == AuthMode.Login ? 'LOGIN' : 'SIGN UP'),
            onPressed: _submit,
            style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30),
                )
              )
            ),

            padding:
                EdgeInsets.symmetric(horizontal: 30.0, vertical: 8.0),
            color: Theme.of(context).primaryColor,
            textColor: Theme.of(context).primaryTextTheme.button.color,
          ),

But I don’t know what to do with padding, color, and textColor?

Tags:

2

Answers


  1. 0

    Here’s how to convert the RaisedButton to an ElevatedButton.

    On the ElevatedButton use:

    • For the textColor use the TextStyle on the Text widget.
    • For rounded corners, instead of shape, use the style property.
    • For the color, use the style property.
    • For padding, use the style property.

    Your code should look like this:

    ElevatedButton(
      style: ElevatedButton.styleFrom(
        padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 8.0),
        backgroundColor: Theme.of(context).primaryColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30),
        ),
      ),
      child: Text(
        _authMode == AuthMode.Login ? 'LOGIN' : 'SIGN UP',
        style: TextStyle(
            color: Theme.of(context).primaryTextTheme.button?.color),
      ),
      onPressed: _submit,
    )

    See also:

    Login or Signup to reply.
  2. 0

    Try this

        ElevatedButton(
          child: Text(_authMode == AuthMode.Login ? 'LOGIN' : 'SIGN UP',
           style:TextStyle(color: 
              Theme.of(context).primaryTextTheme.button?.color)),
          onPressed: _submit,
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
            padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 8.0),
            backgroundColor: Theme.of(context).primaryColor,
          ),
        )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search