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 Tutorial
This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Googleâs mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Dart Tutorial
Dart is an open-source general-purpose programming language developed by Google. It supports application development on both the client and server side. However, it is widely used for the development of Android apps, iOS apps, IoT(Internet of Things), and web applications using the Flutter Framework
7 min read
Top 50 Flutter Interview Questions and Answers for 2025
Flutter is an open-source, cross-platform application development framework. It was developed by Google in 2017. It is used to build applications for Android, iOS, Linux, Mac, Windows, and the web. Flutter uses the Dart programming language. It provides a simple, powerful, efficient, and easy-to-und
15+ min read
What is Widgets in Flutter?
Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter | An introduction to the open source SDK by Google
Flutter is Googleâs Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets â the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Android Studio Setup for Flutter Development
This article will show how to set up Android Studio to run Flutter Applications. Android Studio is one of the popular IDE( integrated development environment  ) developed by Google itself to create cross-platform Android applications. First, you have to install Android Studio version 3.0 or later, a
3 min read
Dart - Data Types
Like other languages (C, C++, Java), whenever a variable is created, each variable has an associated data type. In Dart language, there are the types of values that can be represented and manipulated in a programming language. In this article, we will learn about Dart Programming Language Data Types
8 min read
Flutter - Architecture Application
Flutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
Dart SDK Installation
To do a lot of interesting programming stuff using the Dart programming language, we have to install the Dart SDK. Dart SDK is a pre-compiled version so we have to download and extract it only. In this article, we will learn how to perform Dart SDK Download.Table of ContentInstall Dart SDK in Window
4 min read
Dart - Standard Input Output
In Dart programming language, you can take standard input from the user through the console via the use of the .readLineSync() function. To take input from the console you need to import a library, named dart:io from the libraries of Dart.Stdin ClassThis class allows the user to read data from stand
3 min read