How to use Elevated Button in flutter 2021

This tutorial gives you basic understanding of ElevatedButton.

ElevatedButton is a material widget that uses feature rich experience, button allow to use press interact.

Note: To use ElevatedButton you should update flutter version 1.22.0 or higher,use command flutter upgrade

Getting started with elevated button

const ElevatedButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  })

ElevatedButton basic usage

ElevatedButton(
    child: Text('addypress.com'),
    onPressed: () {
      print('ok');
    },
  )

ElevatedButton Callback

two function in ElevatedButton onPressed and onLongPressed

 ElevatedButton(
                child: Text('addypress.com'),
                onPressed: () {
                  print('onPressed');
                },
                onLongPress: (){
                  print('onLongPress');
                },
                
              ),

ElevatedButton Shape

ElevatedButton(
                style: ButtonStyle(
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                        RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(18.0),
                            side: BorderSide(color: Colors.blueAccent)))),
                child: Text('addypress.com'),
                onPressed: () {
                  print('ok');
                },
              ),

ElevatedButton Border

ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      side: BorderSide(
                    width: 1.0,
                    color: Colors.green,
                  )),
                  child: Text('addypress.com'))

ElevatedButton Shadow

 ElevatedButton(
                child: Text('addypress.com'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.yellow,
                  onPrimary: Colors.black,
                  shadowColor: Colors.yellow,
                  elevation: 5,
                  textStyle: TextStyle(
                      color: Colors.black,
                      fontSize: 20,
                      ),
                ),
                onPressed: () {
                  print('ok');
                },
              )

ElevatedButton Elevation

 ElevatedButton(
                style: ButtonStyle(
                  elevation: MaterialStateProperty.all<double>(5.0),
                ),
                child: Text('addypress.com'),
                onPressed: () {
                  print('ok');
                },
              ),

ElevatedButton Icon

 ElevatedButton.icon(
                icon: Icon(Icons.add),
                label: Text('addypress.com'),
                onPressed: () {
                  print('ok');
                },
              ),

Using ButtonStyle to style an ElevatedButton:

style: ButtonStyle({
  MaterialStateProperty<TextStyle> textStyle,    
  MaterialStateProperty<Color> backgroundColor,   
  MaterialStateProperty<Color> foregroundColor, 
  MaterialStateProperty<Color> overlayColor, 
  MaterialStateProperty<Color> shadowColor, 
  MaterialStateProperty<double> elevation, 
  MaterialStateProperty<EdgeInsetsGeometry> padding, 
  MaterialStateProperty<Size> minimumSize, 
  MaterialStateProperty<BorderSide> side, 
  MaterialStateProperty<OutlinedBorder> shape, 
  MaterialStateProperty<MouseCursor> mouseCursor,    
  VisualDensity visualDensity, 
  MaterialTapTargetSize tapTargetSize, 
  Duration animationDuration, 
  bool enableFeedback
})

Full source code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(title: 'ElevatedButton'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton(
                child: Text('addypress.com'),
                onPressed: () {
                  print('ok');
                },
              ),
               ElevatedButton(
                child: Text('addypress.com'),
                onPressed: () {
                  print('onPressed');
                },
                onLongPress: (){
                  print('onLongPress');
                },
                
              ),
              ElevatedButton.icon(
                icon: Icon(Icons.add),
                label: Text('addypress.com'),
                onPressed: () {
                  print('ok');
                },
              ),
              ElevatedButton(
                style: ButtonStyle(
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                        RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(18.0),
                            side: BorderSide(color: Colors.blueAccent)))),
                child: Text('addypress.com'),
                onPressed: () {
                  print('ok');
                },
              ),
              ElevatedButton(
                style: ButtonStyle(
                  elevation: MaterialStateProperty.all<double>(5.0),
                ),
                child: Text('addypress.com'),
                onPressed: () {
                  print('ok');
                },
              ),
              ElevatedButton(
                child: Text('addypress.com'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.yellow,
                  onPrimary: Colors.black,
                  shadowColor: Colors.yellow,
                  elevation: 5,
                  textStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 20,
                  ),
                ),
                onPressed: () {
                  print('ok');
                },
              ),
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      side: BorderSide(
                    width: 1.0,
                    color: Colors.green,
                  )),
                  child: Text('addypress.com'))
            ],
          ),
        ),
      ),
    );
  }
}

Follow Resources:

https://api.flutter.dev/flutter/material/ElevatedButton-class.html

Conclusion

this post show example of elevated button we set colors ,border,shadow,elevation,icon.

Read more

Leave a Comment