Flutter Material Widget - Outlined Button Class
Last Updated :
03 Aug, 2022
Outlined Widgets are material design components that are used to give outlines to buttons. It is in no way different from text buttons except for the special feature of the border this class provides. These contain nonprimary actions for the apps. It is introduced in version 1.22 of flutter. Outlined buttons have child as their label with text widgets or icons widgets as the child widget to this parent class. You can set the styling of outlined buttons using ButtonStyle. To use this class you need to import the material package i.e. "package/flutter/material.dart".
Constructor
const OutlinedButton({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus = false,
Clip clipBehavior = Clip.none,
@required Widget child,
})
Parameters
1. child: This represents the button's label.
OutlinedButton(
child: Text('Raised Button'),
),
2. onPressed: This represents the action to be executed when the button is tapped
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
Properties
- autofocus: gives a boolean value corresponding to the initial focus of the button.
- clipBehaviour: decides whether the content is clipped or not.
- focusNode: represents the focus node of the widget
- ButtonStyle style: decides the styling of the button
- onLongPress: the action to be executed when the button is long pressed by the user
- enabled: gives a boolean value for the activity of the button
- hashcode: decides the hash code of the button
- Key: Controls how one widget replaces another widget in the tree.
- onFocusChanged: a method to be executed on changing the focus of the button
- onHover: actin to be executed when the user hovers the button
- runType Type: represents run time of an object
Methods
- createElement(): create a StatefulElement to manage button's location in the widget tree.
- createState(): Creates the mutable state for this widget at a given location in the tree.
- build(BuildContext context): Describes the part of the user interface
- createElement(): creates a StatelessElement to manage this widget's location in the tree.
- debugDescribeChildren(): Returns a list of DiagnosticsNode objects describing this node's children
- debugFillProperties(): Add additional properties associated with the node
- noSuchMethod(): Invoked when a non-existent method or property is accessed
- toDiagnosticsNode(): Returns a debug representation of the object that is used by debugging toolsÂ
- toString(): A string representation of this object
- toStringDeep(): Returns a string representation of this node and its descendants.
- toStringShallow(): Returns a one-line detailed description of the object
- toStringShort(): A short, textual description of this widget.
Styling a Button
Button is styled by giving OutlinedButton.styleFrom constructor to the style parameter.
OutlinedButton(
child: Text('Outlined Button'),
style: OutlinedButton.styleFrom(
primary: Colors.green,
),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
),
 Adding Colors to the Button
The coloring requires two parameters,
1. backgroundcolor
OutlinedButton(
child: Text('Outlined Button'),
style: OutlinedButton.styleFrom(
backgroundColor: Colors.green,
),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
),
2. primary
OutlinedButton(
child: Text('Outlined Button'),
style: OutlinedButton.styleFrom(
backgroundColor: Colors.green,
primary: Colors.white,
),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
),
 Shaping the Button
The shape of the border can be adjusted by the use of OutlinedBorder constructor as a parameter to the style with the border radius of your choice.
OutlinedButton(
child: Text('Outlined Button'),
style: OutlinedButton.styleFrom(
primary: Colors.black,
textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.italic),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)))),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
),
 Adjusting Text and its StylingÂ
This can be done by passing textstyle to the TextStyle constructor of the outlined button
OutlinedButton(
child: Text('Outlined Button'),
style: OutlinedButton.styleFrom(
backgroundColor: Colors.green,
primary: Colors.white,
textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.italic),
),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
),
Â
Let's understand outlined button and its properties with the help of an example
Implementation
Dart
import 'package:flutter/material.dart';
void main() {
runApp(HomeApp());
}
class HomeApp extends StatefulWidget {
HomeApp({Key? key}) : super(key: key);
@override
State<HomeApp> createState() => _HomeAppState();
}
class _HomeAppState extends State<HomeApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text('GeeksforGeeks'),
),
body: const FirstScreen()));
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: OutlinedButton(
child: Text('Outlined Button'),
style: OutlinedButton.styleFrom(
primary: Colors.black,
textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.italic),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)))),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
),
),
);
}
}
class NewScreen extends StatefulWidget {
const NewScreen({Key? key}) : super(key: key);
@override
State<NewScreen> createState() => _NewScreenState();
}
class _NewScreenState extends State<NewScreen> {
TextEditingController textEditingController = TextEditingController();
@override
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text('New Screen'),
),
body: Center(child: Text('This is your new screen')),
);
}
}
Output
Similar Reads
Flutter - Working with Material Button
Buttons are material components that provide the user a single tap facility for taking actions, making choices, submitting forms, saving data, opening a new page, etc. Buttons are triggered when the user taps on them. They are the most commonly used feature provided in almost all Flutter apps. For u
4 min read
Flutter - Add Clear Button to TextField Widget
Adding the Clear icon button in the TextField and using the clear the text field. A sample video is given below to get an idea about what we are going to do in this article. How to use? Using the Text Editing Controller we can clear the text field using the Clear parameter. Text Editing Controller:
3 min read
Raised Button widget in Flutter
RaisedButton is the material design button based on a Material widget that elevates when pressed upon in flutter. It is one of the most widely used buttons in the flutter library. Let's understand this button with the help of an example. Disclaimer: As of May 2021 the RaisedButton class in flutter i
5 min read
Raised Button Class in Flutter Material Library with Example
Raised button class comes with a slight elevation in its structure on tapping by the user. They have several properties like text color, shape, padding, button color, etc. These are rectangular in shape by default which cannot be altered and have UI along their z-axis. It is a deprecated class, and
4 min read
Flutter - Material Banner Widget
In this article, we will learn about a new feature called Material Banner which is a new feature in flutter and got released in flutter version 2.5.0. What is Material Banner? A banner displays an important message and asks the user to perform some action. Banner is displayed at top of the screen be
4 min read
FlatButton Widget in Flutter
FlatButton is the material design widget in a flutter. It is a text label material widget that performs an action when the button is tapped. Let's understand with the help of examples. Disclaimer: As of May 2021 the FlatButton class in flutter is deprecated. TextButton class should be used instead.
3 min read
Flutter - Line ProgressBar with Card Widget using Buttons
In this Flutter application, we've created a user interface using a Card with a linear progress bar. The progress bar is contained within the card, and three buttons (Decrease, Increase, and Reset) allow users to dynamically control the progress displayed. The LinearProgressIndicator widget visually
4 min read
Flutter - ImageFiltered Widget
In Flutter it's straightforward to blur the background image using Image Filtered Widget. A filter operation is used to scan the image. ImageFiltered is a widget that applies ImageFilter to its children to blur the image. ImageFilter Constructorconst ImageFiltered({ Key? key, required this.imageFilt
3 min read
Flutter - Gradient Button
Buttons are the building block of any Android Application, Buttons are helping in to perform specific tasks like Navigating from one screen to another screen, Showing the Toast, Sign-in, Sign-up buttons, and many more. But giving the effects of the colors to the Button makes the Button more pretty.
3 min read
Flutter - Inherited Widget
If you are a flutter developer then you know how easy is to create Flutter UI. But when you have lots of widgets in your app and you want to pass data from one widget to another widget, this will be a pain for many developers,s especially for the newbie, this will be really hard for them to pass the
6 min read