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.

I hope this flutter tutorial will be helpful for you.