In this tutorial, we’ll learn how to properly customize Flutter outlinedButton background color by using practical Flutter code examples.
After reading this post, you’ll have a detailed knowledge of how to practically customize Flutter outlinedButton background color.
Introduction: Flutter OutlinedButton Background Color
As the name suggests, it specifies the color that will fill the Flutter outlined button. We’ll first see the default background color of outlined button. After that, we’ll customize it using practical code examples.
Default Flutter OutlinedButton Background Color
For that, we’ll implement a simple Flutter outlinedButton widget. See below code:
OutlinedButton(
onPressed: () {},
child: Text('Flutter Outlined Button'))
We can see that no background color is specified by default.
Customizing Flutter OutlinedButton Background Color
For that, we’ve to use the style constructor of our Flutter outlinedButton widget and pass OutlinedButton.styleFrom( ).
Now by using its background color constructor, we can easily customize its color. This constructor takes a color so for demonstration, we’ll pass it a green color. See below code example:
OutlinedButton(
style: OutlinedButton.styleFrom(
backgroundColor: Colors.green),
onPressed: () {},
child: Text(
'Flutter Outlined Button',
style: TextStyle(color: Colors.white),
))
We can see that the background color of outlined button is now green. We also have given a white color to the child text so its more visible.
Now let’s see multiple examples of custom Flutter outlinedButton background color.
Example 1
style: OutlinedButton.styleFrom( backgroundColor: Colors.blue)
Example 2
style: OutlinedButton.styleFrom( backgroundColor: Colors.purple)
Example 3
style: OutlinedButton.styleFrom( backgroundColor: Colors.blue.shade300)
Example 4
style: OutlinedButton.styleFrom( backgroundColor: Colors.orange)
So this is how we can easily customize Flutter outlinedButton background color. Do try it with other examples as well. Hope you like this post.
The complete source code of custom Flutter outlinedButton background color is given in the below section.
Custom Flutter OutlinedButton Background Color Source Code
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: 12),
child: OutlinedButton(
onPressed: () {},
style:
OutlinedButton.styleFrom(backgroundColor: Colors.blue),
child: Text(
'Flutter Outlined Button',
style: TextStyle(color: Colors.white),
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: OutlinedButton(
onPressed: () {},
style:
OutlinedButton.styleFrom(backgroundColor: Colors.green),
child: Text(
'Flutter Outlined Button',
style: TextStyle(color: Colors.white),
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Colors.purple),
child: Text(
'Flutter Outlined Button',
style: TextStyle(color: Colors.white),
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: OutlinedButton(
onPressed: () {},
style:
OutlinedButton.styleFrom(backgroundColor: Colors.grey),
child: Text(
'Flutter Outlined Button',
style: TextStyle(color: Colors.white),
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: OutlinedButton(
onPressed: () {},
style:
OutlinedButton.styleFrom(backgroundColor: Colors.black),
child: Text(
'Flutter Outlined Button',
style: TextStyle(color: Colors.white),
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Colors.orange),
child: Text(
'Flutter Outlined Button',
style: TextStyle(color: Colors.white),
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: OutlinedButton(
onPressed: () {},
style:
OutlinedButton.styleFrom(backgroundColor: Colors.pink),
child: Text(
'Flutter Outlined Button',
style: TextStyle(color: Colors.white),
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: OutlinedButton(
onPressed: () {},
style:
OutlinedButton.styleFrom(backgroundColor: Colors.red),
child: Text(
'Flutter Outlined Button',
style: TextStyle(color: Colors.white),
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: OutlinedButton(
onPressed: () {},
style:
OutlinedButton.styleFrom(backgroundColor: Colors.brown),
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 background color. 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.
