How to Add an Elevated Button in Flutter

Flutter has made the RaisedButton class obsolete and it recommends using ElevatedButton class. In this blog post, let’s check how to create a button using ElevatedButton class.

An elevated button is a button which is based on the material design. It’s elevation increases when the button is pressed. It has a default style and you can change it by using its style parameter. Following is the code for a simple elevated button in flutter.

ElevatedButton(onPressed: () {},                
               child: Text(' Elevated Button'))

Following is the complete flutter raised button example.


import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ElevatedButton Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  FlutterExample({Key key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(30),
            child:ElevatedButton(onPressed: () {},
                  style: ElevatedButton.styleFrom(elevation: 10), 
                  child: Text(' Elevated Button'))),));
}

}

As you can see I used the style and styleFrom to change the default elevation of the elevated button. Following is the output of this flutter elevated button example.

elevatedbutton flutter example

I hope this flutter tutorial will be helpful for you.

1 thought on “How to Add an Elevated Button in Flutter”

  1. Your content is very nice and theme also very good. May i know i your are refreshing your Ads, could you pls share info about your ads. I want to start a blog regarding programming languages. It will be more helpful if you share info about your ads

Leave a Reply to Chandramouli Cancel Reply

Your email address will not be published. Required fields are marked *