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

Flutter - Managing Device Orientation

rharshitaaa21

Improve

Article Tags :