How To Change Flutter OutlinedButton Elevation [Easy Flutter Guide]

In this tutorial, we’ll learn how to properly customize Flutter outlinedButton elevation by using practical Flutter code examples.

After reading this post, you’ll have a detailed knowledge of how to practically customize Flutter outlinedButton elevation.

Introduction: Flutter OutlinedButton Elevation

It specifies the shadow that Flutter outlined button spreads which gives this button an elevated effect. We’ll first see the default elevation of outlined button. After that, we’ll practically customize it using multiple Flutter code examples.

Default Flutter OutlinedButton Elevation

For that, we’ll implement a simple Flutter outlinedButton widget. See below code:

OutlinedButton(
               onPressed: () {},
                    child: Text(
                      'Flutter Outlined Button',
                    ))

flutter outlinedbutton default elevation

We can see that no elevation is implemented by default.

Customizing Flutter OutlinedButton Elevation (Multiple Examples)

For that, we’ve to use the style constructor of our Flutter outlinedButton widget and pass OutlinedButton.styleFrom( ).

Now by using its elevation constructor, we can easily customize its shadow. This elevation constructor takes a double(decimal) value but we can pass integer as well. See below example:

 style: OutlinedButton.styleFrom(elevation: 1)

As no background color of outlined button is specified, so the shadow is shown in the background of button.

We can give a background color to outlined button. See below code:

OutlinedButton(
              onPressed: () {},
              style: OutlinedButton.styleFrom(
                        elevation: 1, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    ))

Now let’s see multiple examples of Flutter outlinedButton elevation.

Example 1

flutter outlinedbutton widget elevation

 style: OutlinedButton.styleFrom(
              elevation: 3, backgroundColor: Colors.blue.shade400)

Example 2

 style: OutlinedButton.styleFrom(
              elevation: 7, backgroundColor: Colors.blue.shade400)

Example 3

 style: OutlinedButton.styleFrom(
              elevation: 15, backgroundColor: Colors.blue.shade400)

Example 4

flutter outlined button widget elevation

 style: OutlinedButton.styleFrom(
              elevation: 20, backgroundColor: Colors.blue.shade400)

So this is how we can easily customize Flutter outlinedButton elevation. Do try it with other examples as well. Hope you like this post.

The complete source code of custom Flutter outlinedButton elevation is given in the below section.

Custom Flutter OutlinedButton Elevation Source Code

flutter outlinedbutton elevation

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: SizedBox(
      height: double.infinity,
      width: double.infinity,
      child: SingleChildScrollView(
          padding: EdgeInsets.only(top: 40),
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        elevation: 1, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        elevation: 5, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        elevation: 10, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        elevation: 15, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        elevation: 20, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        elevation: 30, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        elevation: 40, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        elevation: 50, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                        elevation: 60, backgroundColor: Colors.blue.shade400),
                    child: Text(
                      'Flutter Outlined Button',
                      style: TextStyle(color: Colors.white),
                    )),
              ),
            ],
          )),
    )));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter outlinedButton elevation. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.