How to Change Background Color, Size, Border Radius of Elevated Button in Flutter

DevOps

MOTOSHARE šŸš—šŸļø
Turning Idle Vehicles into Shared Rides & Earnings

From Idle to Income. From Parked to Purpose.
Earn by Sharing, Ride by Renting.
Where Owners Earn, Riders Move.
Owners Earn. Riders Move. Motoshare Connects.

With Motoshare, every parked vehicle finds a purpose. Owners earn. Renters ride.
šŸš€ Everyone wins.

Start Your Journey with Motoshare

Previously, there was the provision of property onĀ RaisedButtonĀ to change background color, but it is deprecated now. So, you have to useĀ ElevatedButtonĀ instead of RaisedButton. On ElevatedButton, there is the provision ofĀ styleĀ property that is used to style the button. See the example below to know more about it.Ā 

To change Background Color, Broder Radius, Border, Elevation, and Padding of Button.

UseĀ styleĀ property of ElevatedButton and implementĀ ElevatedButton.styleFrom()Ā on it.

ElevatedButton(
    style: ElevatedButton.styleFrom(
       primary: Colors.redAccent, //background color of button
       side: BorderSide(width:3, color:Colors.brown), //border width and color
       elevation: 3, //elevation of button
       shape: RoundedRectangleBorder( //to set border radius to button
                borderRaius: BorderRadius.circular(30)
            ),
        padding: EdgeInsets.all(20) //content padding inside button
   )
)Code language: JavaScript (javascript)

To change the size of Elevated Button

Wrap ElevatedButton() widget with SizedBox() widget to change height and widget of button like below:

SizedBox( 
     height:100, //height of button
     width:300, //width of button
     child:ElevatedButton(
           //parameters of Button class
     )
)Code language: JavaScript (javascript)

To makeĀ Elevated Button’s width equal to parent widget’s width, pass width like below:

SizedBox( 
     height:100, //height of button
     width:double.infinity, //width of button equal to parent widget
     child:ElevatedButton(
           //parameters of Button class
     )
)Code language: JavaScript (javascript)

Complete Flutter Dart Code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Test App",
        home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title:Text("Elevated Button"), 
            backgroundColor: Colors.redAccent, //background color of app bar
        ),
        body:Center( 
            child: SizedBox( 
              height:100, //height of button
              width:300, //width of button
              child:ElevatedButton(
              style: ElevatedButton.styleFrom(
                  primary: Colors.redAccent, //background color of button
                  side: BorderSide(width:3, color:Colors.brown), //border width and color
                  elevation: 3, //elevation of button
                  shape: RoundedRectangleBorder( //to set border radius to button
                      borderRadius: BorderRadius.circular(30)
                  ),
                  padding: EdgeInsets.all(20) //content padding inside button
                ),
                onPressed: (){ 
                    //code to execute when this button is pressed.
                }, 
                child: Text("Elevated Button") 
              )
            )
        )
    );
  }
}Code language: JavaScript (javascript)

Output Screenshot:

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x