flutter - How to change PopupMenuButton icon

Flutter - PopupMenuButton Change Icon

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to set or change the PopupMenuButton widget’s icon. Here we used the PopupMenuButton class’s icon property to change the default icon of the PupupMenuButton widget. Here we also change the default color of the PopupMenuButton widget’s replaced icon.

The PopupMenuButton class’s icon property value is a widget that is the icon used for this button and the button will behave like an IconButton.

The Icon class represents a graphical icon widget drawn with a glyph from a font described in an IconData such as material's predefined IconDatas in Icons. Icons are not interactive.

The Icon class icon property value is an IconData instance that is the icon to display. The available icons are described in Icons. The Icons class is the identifier for the supported material icons. The Icon class color property value is a Color object that is the color to use when drawing the icon.

So finally, the flutter app developers can change the PopupMenuButton widget’s default icon using its icon property. They also can change the icon’s default color.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
      MaterialApp(
          theme: ThemeData(primarySwatch: Colors.green),
          home: Scaffold(
              appBar: AppBar(
                  title: const Text("PopupMenuButton Icon"),
                  actions: [
                    PopupMenuButton(
                        color: Colors.blueGrey.shade50,
                        offset: const Offset(0, 56),
                        icon: const Icon(
                            Icons.more_horiz,
                            color: Colors.black87
                        ),
                        itemBuilder: (context) => [
                          const PopupMenuItem(child: Text("First Item")),
                          const PopupMenuItem(child: Text("Second Item")),
                          const PopupMenuItem(child: Text("Third Item"))
                        ]
                    )
                  ]
              )
          )
      )
  );
}

flutter - How to use PopupMenuItem onTap

Flutter - PopupMenuItem onTap

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to use the PopupMenuItem widget’s tap callback. Here we used the PopupMenuItem class’s onTap property to set the PupupMenuButton widget’s item tap callback.

The flutter PopupMenuItem class represents an item in a material design popup menu. Normally the child of a PopupMenuItem is a Text widget. But the flutter developers can build more complex items such as they can show both an icon and text inside an item.

The PopupMenuItem class onTap property value type is VoidCallback which is called when the menu item is tapped. The VoidCallback is a signature of callbacks that have no arguments and return no data.

So when the PopupMenuButton widget’s menu item is tapped then the flutter developers can get the tapped item details by using its onTap callback. Here we show a message on the app SnackBar when an item is tapped from the PopupMenuButton widget.

So finally, the flutter app developers can display a message to the app user when they tap an item from the PopupMenuButton widget. Or they can perform some other task when the user taps an item from the PopupMenuButton widget. But to do that they have to set an onTap callback for each PopupMenuItem instance.

main.dart

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(
        theme: ThemeData(primarySwatch: Colors.pink),
        home: const MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text("PopupMenuButton onTap"),
          actions: [
            PopupMenuButton(
                offset: const Offset(0,56),
                itemBuilder: (context)=>[
                  PopupMenuItem(
                    child: const Text("Share Location"),
                    onTap: (){
                      SnackBar snackBar = const SnackBar(
                          content: Text("Location Tapped")
                      );
                      ScaffoldMessenger.of(context).showSnackBar(snackBar);
                    },
                  ),
                  PopupMenuItem(
                    child: const Text("File Upload"),
                    onTap: (){
                      SnackBar snackBar = const SnackBar(
                          content: Text("Upload Tapped")
                      );
                      ScaffoldMessenger.of(context).showSnackBar(snackBar);
                    },
                  ),
                  PopupMenuItem(
                    child: const Text("Send Email"),
                    onTap: (){
                      SnackBar snackBar = const SnackBar(
                          content: Text("Contact Tapped")
                      );
                      ScaffoldMessenger.of(context).showSnackBar(snackBar);
                    },
                  )
                ]
            )
          ]
      ),
    );
  }
}

flutter - How to use PopupMenuButton onSelected

Flutter - PopupMenuButton onSelected

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to use the PopupMenuButton widget’s onSelected callback. Here we used the PopupMenuButton class’s onSelected property to set the PupupMenuButton widget’s item selection callback.

The PopupMenuButton class’s onSelected property value is a PopupMenuItemSelected instance that is called when the user selects a value from the popup menu created by this button. But if the popup menu is dismissed without selecting a value, the onCanceled is called instead.

The PopupMenuItemSelected is a signature for the callback invoked when a menu item is selected. The argument is the value of the PopupMenuItem that caused its menu to be dismissed.

In this flutter example code, we used the PopupMenuButton widget’s onSelected callback to display the user-selected menu item in a Text widget.

main.dart

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(
        theme: ThemeData(primarySwatch: Colors.indigo),
        home: const MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedValue = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text("PopupMenuButton onSelected"),
          actions: [
            PopupMenuButton(
                onSelected: (String value){
                  setState(() {
                    _selectedValue = value;
                  });
                },
                offset: const Offset(0,56),
                itemBuilder: (context)=>[
                  const PopupMenuItem(
                    child: Text("Share Location"),
                    value: "Location",
                  ),
                  const PopupMenuItem(
                    child: Text("File Upload"),
                    value: "Upload",
                  ),
                  const PopupMenuItem(
                    child: Text("Send Email"),
                    value: "Contact",
                  )
                ]
            )
          ]
      ),
      body: Center(
        child: Text(
            "Selected : $_selectedValue",
            style: const TextStyle(fontSize: 26)
        ),
      ),
    );
  }
}

flutter - How to show icon and text on PopupMenuButton items

Flutter - PopupMenuButton Icon & Text

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to display both a text and an icon on each item in a PopupMenuButton widget. Here we used the PopupMenuButton class’s itemBuilder property to add items to the PupupMenuButton widgets. And also configure the menu items to show text and an icon inside each item of the PopupMenuButton widget.

The PopupMenuButton class’s itemBuilder property value is a PopupMenuItemBuilder instance. The PopupMenuItemBuilder is called when the button is pressed to create the items to show in the menu. The PopupMenuItemBuilder is used by PopupMenuButton to lazily construct the items shown when the button is pressed.

The flutter PopupMenuItem class represents an item in a material design popup menu. Normally the child of a PopupMenuItem is a Text widget. But in this flutter tutorial, we will display both a text and an icon on each item of the PopupMenuButton widget.

The PopupMenuItem class’s child property value is a widget that is widget below this widget in the tree. We will put a Row widget for this child property value. Then we will put an Icon widget and a Text widget in the Row widget. So our menu item will show a text and an icon inside the item. These are the simple steps to display both a text and an icon on PopupMenuButton items. We used a SizedBox to add padding between the text and the icon. Here we also wrap the PopupMenuButton widget by a Theme.

So finally, the flutter app developers can display text and an icon inside the item of a PopupMenuButton widget while creating the item. They should put a Row widget as a child of the item. And they also have to put a Text widget and an Icon widget inside the Row widget.

main.dart

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(
        theme: ThemeData(primarySwatch: Colors.indigo),
        home: const MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text("PopupMenuButton Icon & Text"),
            actions: [
              Theme(
                  data: Theme.of(context).copyWith(
                      iconTheme: const IconThemeData(
                          color: Colors.black87
                      )
                  ),
                  child: PopupMenuButton<int>(
                      offset: const Offset(0, 56),
                      itemBuilder: (context) => [
                        PopupMenuItem<int>(
                            child: Row(
                                children: const [
                                  Icon(Icons.share_location),
                                  SizedBox(width: 8),
                                  Text("Share Location")
                                ]
                            )
                        ),
                        PopupMenuItem<int>(
                            child: Row(
                                children: const [
                                  Icon(Icons.upload_file),
                                  SizedBox(width: 8),
                                  Text("Upload File")
                                ]
                            )
                        ),
                        PopupMenuItem<int>(
                            child: Row(
                                children: const [
                                  Icon(Icons.email),
                                  SizedBox(width: 8),
                                  Text("Mail Us")
                                ]
                            )
                        )
                      ]
                  )
              )
            ]
        )
    );
  }
}

flutter - How to change PopupMenuButton items icon color

Flutter - PopupMenuButton Items Icon Color

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to display both a text and an icon on each item in a PopupMenuButton widget. And how to change the icon color of menu items in a PopupMenuButton widget by a single setting. Here we used the PopupMenuButton class’s itemBuilder property to add items to the PupupMenuButton widgets. And we wrapped the PopupMenuButton widget with a Theme widget to set or change a common color for the menu items icon color.

The PopupMenuButton class’s itemBuilder property value is a PopupMenuItemBuilder instance. The PopupMenuItemBuilder is called when the button is pressed to create the items to show in the menu. The PopupMenuItemBuilder is used by PopupMenuButton to construct the items shown when the button is pressed lazily.

The flutter PopupMenuItem class represents an item in a material design popup menu. Normally the child of a PopupMenuItem is a Text widget. But in this flutter tutorial, we will display both a text and an icon on each item of the PopupMenuButton widget. And we also put the PopupMenuButton widget as a child of the Theme element so that we can set a common color for the menu items icon.

The PopupMenuItem class’s child property value is a widget below this widget in the tree. We will put a Row widget for this child property value. Then we will put an Icon widget and a Text widget in the Row widget.

Flutter developers can share colors and font styles throughout a flutter app by using the themes. Here we used the Theme widgets that define the colors and font styles for a particular part of the application.

The Theme class applies a theme to descendant widgets. A theme describes the colors and typographic choices of an application. The Theme class’s data property specifies the color and typography values for descendant widgets. The IconThemeData class defines the size, font variations, color, opacity, and shadows of icons.

Flutter developers used IconTheme to control those properties in a widget subtree. To obtain the current icon theme, use IconTheme.of. The IconThemeData class’s color property set or change the icon color of the child widget’s icon.

So finally, the flutter app developers can set or change the PopupMenuButton widget’s icon color by putting the PopupMenuButton inside a Theme widget. They also have to set the IconThemeData class color property value to define the PupupMenuButton’s items icon color.

main.dart

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(
        theme: ThemeData(primarySwatch: Colors.pink),
        home: const MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text("PopupMenuButton Icon Color"),
            actions: [
              Theme(
                  data: Theme.of(context).copyWith(
                      iconTheme: IconThemeData(
                          color: Colors.pink.shade800
                      )
                  ),
                  child: PopupMenuButton<int>(
                    //color: Colors.green.shade50,
                      offset: const Offset(0, 56),
                      itemBuilder: (context) => [
                        PopupMenuItem<int>(
                            child: Row(
                                children: const [
                                  Icon(Icons.shopping_cart),
                                  SizedBox(width: 8),
                                  Text("Add To Cart")
                                ]
                            )
                        ),
                        PopupMenuItem<int>(
                            child: Row(
                                children: const [
                                  Icon(Icons.upload),
                                  SizedBox(width: 8),
                                  Text("Upload")
                                ]
                            )
                        ),
                      ]
                  )
              )
            ]
        )
    );
  }
}

flutter - How to add divider to PopupMenuButton

Flutter - PopupMenuButton Divider

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to add a divider between PopupMenuButton items. Here we used the PopupMenuButton class’s itemBuilder property to add items to the PupupMenuButton widgets. And also add a divider line between each item by placing the PopupMenuDivider instance between items.

The PopupMenuButton class’s itemBuilder property value is a PopupMenuItemBuilder instance. The PopupMenuItemBuilder is called when the button is pressed to create the items to show in the menu. The PopupMenuItemBuilder is used by PopupMenuButton to lazily construct the items shown when the button is pressed.

The flutter PopupMenuItem class represents an item in a material design popup menu. Normally the child of a PopupMenuItem is a Text widget.

The PopupMenuDidiver class represents a horizontal divider in a material design popup menu. The PopupMenuDivider widget adapts the Divider for use in popup menus. The PopupMenuDivider() construct creates a horizontal divider for a popup menu. By default, the divider has a height of 16 logical pixels.

So finally, the flutter app developers can add a divider line between each item of a PopupMenuButton widget by placing a PopupMenuDivider instance between items.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(
          primarySwatch: Colors.indigo,
          dividerTheme: const DividerThemeData(
              color: Colors.black87,
              thickness: 1.5
          )
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("PopupMenuButton Divider"),
          actions: [
            PopupMenuButton<int>(
                itemBuilder: (context) => [
                  const PopupMenuItem(child: Text("First Item")),
                  const PopupMenuDivider(),
                  const PopupMenuItem(child: Text("Second Item")),
                  const PopupMenuDivider(),
                  const PopupMenuItem(child: Text("Third Item"))
                ],
                color: Colors.blueGrey.shade50,
                offset: const Offset(0, 56)
            )
          ],
        ),
      ),
    ),
  );
}

flutter - How to change PopupMenuButton offset

Flutter - PopupMenuButton Offset

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to set or change the offset value of a PopupMenuButton widget. Here we used the PopupMenuButton class’s offset property to set or change the PupupMenuButton widget’s default offset value.

The PopupMenuButton class’s offset property value is an Offset instance that is the offset is applied relative to the initial position set by the position. If the flutter developers do not set the PopupMenuButton widget’s offset value, the offset default value is Offset.zero.

The Offset class represents an immutable 2D floating-point offset. The Offset(double dx, double dy) constructor creates an offset. The first argument sets dx, the horizontal component, and the second sets dy, the vertical component.

The Offset class dx property value is a Double instance that is the x component of the offset. And the dy property value is also a Double instance that is the y component of the offset. So we can set the PopupMenuButton widget’s offset by passing an Offset instance value to its offset property.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("PopupMenuButton Offset"),
          actions: [
            PopupMenuButton(
              itemBuilder: (context) => [
                const PopupMenuItem(child: Text("First Item")),
                const PopupMenuItem(child: Text("Second Item")),
                const PopupMenuItem(child: Text("Third Item"))
              ],
              color: Colors.blueGrey.shade50,
              offset: const Offset(0, 56),
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(12)
                  )
              ),
            )
          ],
        ),
      ),
    ),
  );
}

flutter - How to change PopupMenuButton width

Flutter - PopupMenuButton Width

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to set or change the PopupMenuButton widget width. But there is no direct property or method to set or change the width of a PopupMenuButton widget. So we have to take help from another property of PopupMenuButton class. Here we used the PopupMenuButton class’s itemBuilder property to specify the width of PopupMenuButton items, this will finally change the width of the PopupMenuButton widget itself.

The PopupMenuButton class’s itemBuilder property value is a PopupMenuItemBuilder instance. The PopupMenuItemBuilder is called when the button is pressed to create the items to show in the menu. The PopupMenuItemBuilder is used by PopupMenuButton to lazily construct the items shown when the button is pressed.

The flutter PopupMenuItem class represents an item in a material design popup menu. Normally the child of a PopupMenuItem is a Text widget. We can put this Text widget inside a SizedBox to set the width of the Text widget. As a result the width of the popup menu item change and finally the entire PopupMenuButton widget’s width change as specified in the SizedBox width property value.

So finally, the flutter app developers can set or change the entire PopupMenuButton widget’s width by taking advantage of the SizedBox widget while generating its menu items.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.pink),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("PopupMenuButton Width"),
          actions: [
            PopupMenuButton(
                itemBuilder: (context) => [
                  const PopupMenuItem(
                      child: SizedBox(
                          width: 175,
                          child: Text("First Item")
                      )
                  ),
                  const PopupMenuItem(child: Text("Second Item")),
                  const PopupMenuItem(child: Text("Third Item"))
                ],
                color: Colors.pink.shade200,
                offset: const Offset(0, 56)
            )
          ],
        ),
      ),
    ),
  );
}

flutter - How to change PopupMenuButton shape

Flutter - PopupMenuButton Shape

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to set or change the PopupMenuButton widget shape. Here we used the PopupMenuButton class’s shape property to specify the shape of a PopupMenuButton widget. We rendered a rounded corners PopupMenuButton in this flutter example.

The PopupMenuButton class’s shape property value is a ShapeBorder instance that defines the shape of the menu. When flutter developers leave the shape property value to null then PopupMenuThemeData.shape is used. If PopupMenuThemeData.shape is also null, then the default shape for MaterialType.card is used. The PopupMenuButton default shape is a rectangle with rounded edges of border radius circular 2.0.

The ShapeBorder class is the base class for shape outlines. The ShapeBorder class handles how to add multiple borders together. Subclasses define various shapes, like circles, rounded rectangles, continuous rectangles, or beveled rectangles. In this example code, we build a rounded rectangle PopupMenuButton whose border radius is 16.

So finally, the flutter app developers can set or change the PopupMenuButton widget’s shape by providing a ShapeBorder instance to its shape property value. The ShapeBorder allows the flutter developers to change the PopupMenuButton widget’s default shape.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.grey),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("PopupMenuButton Shape"),
          actions: [
            PopupMenuButton(
              itemBuilder: (context) => [
                const PopupMenuItem(child: Text("First Item")),
                const PopupMenuItem(child: Text("Second Item")),
                const PopupMenuItem(child: Text("Third Item"))
              ],
              color: Colors.indigo.shade100,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16)
              ),
            )
          ],
        ),
      ),
    ),
  );
}

flutter - How to use IconButton onPressed

Flutter - IconButton onPressed

The IconButton class represents a material design icon button. IconButton is a picture printed on a material widget that reacts to touches by filling with color. The flutter developers commonly used the Icon buttons in the AppBar actions field, but IconButtons can also be used in many other places. The flutter app developers can leave the onPressed callback null to disable an IconButton, it will not react to touch.

The following flutter app development tutorial will demonstrate how to use IconButton onPressed property. The IconButton onPressed property makes the button clickable when the developers set a value to it. If they pass a null value to this onPressed property value the button act as disable/nonclickable. Actually, the onPressed property is used to trigger an action when someone clicks the IconButton widget.

The IconButton class’s onPressed property value is a callback that is called when the button is tapped or otherwise activated. When the flutter developers set this property value to null, the button will be disabled. In this flutter example code, we increase a counter when the user presses the IconButton widget. We put the counter code inside the IconButton widget’s onPressed property value section.

main.dart

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(
        theme: ThemeData(primarySwatch: Colors.pink),
        home: const MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text("Flutter - IconButton onPressed")
        ),
        body: bodyContent()
    );
  }

  bodyContent() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
              "Counter $_counter",style:
          const TextStyle(
              fontSize: 26, fontWeight: FontWeight.bold
          )),
          const SizedBox(height: 24),
          IconButton(
            onPressed: () {
              setState(() {
                _counter++;
              });
            },
            icon: const Icon(Icons.add_circle),
            iconSize: 64,
            color: Colors.indigo
          )
        ],
      ),
    );
  }
}

flutter - How to disable an IconButton

Flutter - IconButton Disable

The IconButton class represents a material design icon button. IconButton is a picture printed on a material widget that reacts to touches by filling with color. The flutter developers commonly used the Icon buttons in the AppBar actions field, but IconButtons can also be used in many other places. The flutter app developers can leave the onPressed callback null to disable an IconButton, it will not react to touch.

The following flutter app development tutorial will demonstrate how to disable an IconButton widget. Here we will also set a color for the IconButton widget’s disabled state.

The IconButton class’s onPressed property value is a callback that is called when the button is tapped or otherwise activated. When the flutter developers set this property value to null, the button will be disabled. So in this flutter example code, we passed a null value for the IconButton onPressed property to disable the IconButton widget.

The IconButton class’s onPressed property value is a Color object that is the color to use for the icon inside the Button if the icon is disabled. The default value for this property is ThemeData.disabledColor of the current Theme. Here we set a color for the IconButton widget’s disabledColor property value.

So finally, the flutter app developers can disable an IconButton instance by setting null to its onPressed property and they can define the disabled state color by setting a value for the disabledColor property.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.grey),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - IconButton Disabled")
          ),
          body: Center(
              child: IconButton(
                iconSize: 96,
                icon: const Icon(Icons.add_alarm_rounded),
                onPressed: null,
                color: Colors.green.shade700,
                disabledColor: Colors.blueGrey.shade200
              )
          )
      ),
    ),
  );
}

flutter - IconButton remove splash

Flutter - IconButton Remove Splash

The IconButton class represents a material design icon button. IconButton is a picture printed on a material widget that reacts to touches by filling with color. The flutter developers commonly used the Icon buttons in the AppBar actions field, but IconButtons can also be used in many other places. The flutter app developers can leave the onPressed callback null to disable an IconButton, it will not react to touch.

The following flutter app development tutorial will demonstrate how to remove the splash from an IconButton widget. In this example code, we used the IconButon class’s splashColor property to remove the splash effect of an InconButton widget. Here we also change the icon button’s highlight color by using the IconButton class’s highlightColor property.

The IconButton class’s splashColor property value is a Color that defines the primary color of the button when the button is in the down/pressed state. The splash is represented as a circular overlay that appears above the highlightColor overlay. The splash overlay center point is the hit point of the user touch event in IconButton. The splash overlay expands to fill the button area when users held the touch for a long enough time.

When flutter developers set the splash color transparency, the highlight and button color will show through. So, here we set the InconButton’s splashColor property value to a fully transparent color to remove the splash color from an IconButton. Now we have to hide the highlight color to altogether remove the splash effect from an IconButton instance.

The IconButton class’s highlightColor property value is also a Color object that defines the secondary color of the button when the button is in the down/pressed state. The IconButton highlight color is represented as a solid color that is overlaid over the button color if any. When flutter developers set transparency to the highlight color then the button color will show through. In this example, we set a fully transparent color for the IconButton’s highlightColor property value.

So finally, the flutter app developers can remove the splash effect from an IconButton widget by setting a fully transparent color to the both splashColor and highlightColor properties.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.grey),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - IconButton Remove Splash")
          ),
          body: Center(
              child: IconButton(
                  iconSize: 96,
                  icon: const Icon(Icons.shopping_cart),
                  onPressed: (){},
                  color: Colors.green.shade700,
                  splashColor: Colors.transparent,
                  highlightColor: Colors.transparent
              )
          )
      ),
    ),
  );
}

flutter - How to remove IconButton padding

Flutter - IconButton Remove Padding

The IconButton class represents a material design icon button. IconButton is a picture printed on a material widget that reacts to touches by filling with color. The flutter developers commonly used the Icon buttons in the AppBar actions field, but IconButtons can be used in many other places as well. The flutter app developers can leave the onPressed callback null to disable an IconButton, then it will not react to touch.

The following flutter app development tutorial will demonstrate how to remove the padding from an IconButton widget. In this example code, we used the IconButon class’s padding property to remove the padding of an InconButton widget. Here we also change the icon button’s splash radius by using the IconButton class’s splashRadius property.

The IconButton class’s padding property defines the padding around the button's icon. The entire padded icon will react to input gestures. The padding property can be null. If null, it defaults to 8.0 padding on all sides.

The IconButton class’s padding property value is an EdgeInsetsGeometry instance. The EdgeInsetsGeometry class is the base class for EdgeInsets that allows for text-direction-aware resolution.

The EdgeInsets class represents an immutable set of offsets in each of the four cardinal directions. The EdgeInsets class specifies offsets in terms of visual edges, left, top, right, and bottom. The EdgeInsets.zero constant defines an EdgeInsets with zero offsets in each direction.

So finally, the flutter developers can pass the EdgeInsets.Zero constant to the IconButton class’s padding parameter value to remove the padding from an InconButton widget.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("IconButton Remove Padding")
          ),
          body: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  IconButton(
                      iconSize: 96,
                      icon: const Icon(Icons.favorite,),
                      onPressed: (){},
                      color: Colors.indigo,
                      splashRadius: 48, // half of icon size
                      padding: EdgeInsets.zero
                  ),
                  IconButton(
                      iconSize: 96, // default 24
                      icon: const Icon(Icons.favorite,),
                      onPressed: (){},
                      color: Colors.indigo,
                      splashRadius: 48,
                      padding: EdgeInsets.zero
                  )
                ],
              )
          )
      ),
    ),
  );
}

flutter - How to change IconButton size

Flutter IconButton Size

The IconButton class represents a material design icon button. IconButton is a picture printed on a material widget that reacts to touches by filling with color. The flutter developers commonly used the Icon buttons in the AppBar actions field, but IconButtons can be used in many other places as well. The flutter app developers can leave the onPressed callback null to disable an IconButton, then it will not react to touch.

The following flutter app development tutorial will demonstrate how to set or change the IconButton widget size. Here we used the IconButton class’s iconSize property to change an IconButton widget’s size.

The flutter developers must not override the icon's size with its Icon.size parameter when creating an IconButton widget. Instead, the flutter developers have to use the IconButton class’s iconSize parameter to set the IconButton widget’s size.

The IconButton class’s iconSize property value is a double instance that defines the size of the icon inside the button. The default size is 24.0.

So finally, the flutter app developers can change an IconButton widget’s size by passing a double data type value to the IconButton class’s iconSize property.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - IconButton Size")
          ),
          body: Center(
              child: IconButton(
                iconSize: 96,
                icon: const Icon(Icons.favorite),
                onPressed: (){},
                color: Colors.blueAccent
              )
          )
      ),
    ),
  );
}

flutter - How to create circular OutlinedButton

Flutter - Circular OutlinedButton

The OutlinedButton class represents a material design outlined button that is essentially a TextButton with an outlined border. The outlined buttons are medium-emphasis buttons. In a flutter application, the OutlinedButtons contain actions that are important, but they are not the primary action in an app. An OutlinedButton widget’s default style is defined by defaultStyleOf. The flutter application developers can override the OutlinedButton’s style with its style parameter. An OutlinedButton has a default ButtonStyle.side which defines the appearance of the outline. The flutter app developers can specify an OutlinedButton's shape and the appearance of its outline by specifying both the ButtonStyle.shape and ButtonStyle.side properties.

The following flutter application development tutorial will demonstrate how to create a circular OutlinedButton widget. Here we will use the OutlinedButton class’s styleFrom() static method’s shape and fixedSize parameters to create a circular-shaped OutlinedButton.

The OutlinedButton class’s styleFrom() method is a static convenience method that constructs an outlined button ButtonStyle given simple values. By default, OutlinedButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can create a circle-shaped OutlinedButton by passing a value to the styleFrom() method’s shape parameter and another value to the fixedSize parameter.

The ButtonStyle class’s shape property defines the shape of the button's underlying Material.

The CircleBorder class represents a border that fits a circle within the available space. Here we set the same width and height for the OutlinedButton, so CircleBorder() constructor creates a circular OutlinedButton.

The flutter developers can change an OutlinedButton‘s width and height (size) by passing a value to the styleFrom() method’s fixedSize parameter.

The styleFrom() method’s fixedSize parameter value is a Size instance, which holds a 2D floating-point size. Here we used the Size class Size(double width, double height) constructors to create a Size with the given width and height.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.amber),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - Circular OutlinedButton")
          ),
          body: Center(
            child: OutlinedButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: OutlinedButton.styleFrom(
                    fixedSize: const Size(125, 125),
                    shape: const CircleBorder()
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to add padding to OutlinedButton

Flutter - OutlinedButton Padding

The OutlinedButton class represents a material design outlined button that is essentially a TextButton with an outlined border. The outlined buttons are medium-emphasis buttons. In a flutter application, the OutlinedButtons contain actions that are important, but they are not the primary action in an app. An OutlinedButton widget’s default style is defined by defaultStyleOf. The flutter application developers can override the OutlinedButton’s style with its style parameter. An OutlinedButton has a default ButtonStyle.side which defines the appearance of the outline. The flutter app developers can specify an OutlinedButton's shape and the appearance of its outline by specifying both the ButtonStyle.shape and ButtonStyle.side properties.

The following flutter application development tutorial will demonstrate how to add padding to an OutlinedButton widget. Here we will use the OutlinedButton class’s styleFrom() method to set the OutlinedButton’s padding. Here we will add padding to an OutlinedButton widget’s horizontal and vertical sides.

The OutlinedButton class’s styleFrom() method is a static convenience method that constructs an outlined button ButtonStyle given simple values. By default, OutlinedButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can add padding to the OutlinedButton by passing a value to the styleFrom() method’s padding parameter.

The styleFrom() method’s padding parameter value is an EdgeInsetsGeometry instance which adds padding to the OutlinedButton.

The EdgeInsetsGeometry class represents the base class for EdgeInsets that allows for text-direction-aware resolution.

The EdgeInsets class represents an immutable set of offsets in each of the four cardinal directions. The EdgeInsets class specifies offsets in terms of visual edges left, top, right, and bottom.

The EdgeInsets.all(double value) constructor creates insets where all the offsets are the value.

The EdgeInsets.symmetric({double vertical = 0.0, double horizontal = 0.0}) constructor creates insets with symmetrical vertical and horizontal offsets. Here we used this constructor to add padding to an OutlinedButton widget’s horizontal and vertical sides.

So finally, the flutter app developers can add padding to the OutlinedButton widget by calling its styleFrom() static method and passing a value to the styeFrom() method’s padding parameter. They also have to call one of the EdgeInsets constructors to add padding to the OutlinedButton widget.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - OutlinedButton Padding")
          ),
          body: Center(
            child: OutlinedButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: OutlinedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 64, vertical: 32
                    )
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to change OutlinedButton splash color

Flutter - OutlinedButton Splash Color

The OutlinedButton class represents a material design outlined button that is essentially a TextButton with an outlined border. The outlined buttons are medium-emphasis buttons. In a flutter application, the OutlinedButtons contain actions that are important, but they are not the primary action in an app. An OutlinedButton widget’s default style is defined by defaultStyleOf. The flutter application developers can override the OutlinedButton’s style with its style parameter. An OutlinedButton has a default ButtonStyle.side which defines the appearance of the outline. The flutter app developers can specify an OutlinedButton's shape and the appearance of its outline by specifying both the ButtonStyle.shape and ButtonStyle.side properties.

The following flutter application development tutorial will demonstrate how to set or change an OutlinedButton widget’s splash color. Here we will use the OutlinedButton class’s style property to set the OutlinedButton splash color (overlay color). We also set the size of OutlinedButton to make its size bigger.

The OutlinedButton class’s style property value is a ButtonStyle object which customizes this button's appearance.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

ButtonStyle class’s many properties are MaterialStateProperty objects which resolve to different values depending on the button's state. The material state properties represent values that depend on a widget's material state.

The MaterialStateProperty resolveWith() is a convenient method for creating a MaterialStateProperty from a MaterialPropertyResolver function alone.

The flutter developers can set or change the splash color (overlay color) of an OutlinedButton by sending a value to the ButtonStyle class’s overlayColor property.

The ButtonStyle class’s overlayColor property defines the highlight color that's typically used to indicate that the button is focused, hovered, or pressed. The developers also called it to splash color.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("OutlinedButton Splash Color")
          ),
          body: Center(
            child: OutlinedButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: ButtonStyle(
                    overlayColor: MaterialStateProperty.resolveWith(
                            (states) => Colors.green
                            .shade200.withOpacity(0.3)
                    ),
                    fixedSize: MaterialStateProperty.resolveWith(
                            (states) => const Size(200, 75)
                    )
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to change TextButton color

Flutter - TextButton Color

The TextButton class represents a material design text button. The flutter developers can use text buttons on toolbars, in dialogs, or inline with other content. Text buttons do not have visible borders. The flutter developers should refrain from using text buttons where they would blend in with other content such as in the middle of lists. The TextButton style can be overridden with its style parameter.

The following flutter application development tutorial will demonstrate how to set or change the TextButton widget’s various colors. Here we will change the TextButton widget’s background color, text color/foreground color, and border color. In the below example code, we will use the TextButton class’s styleFrom() method to change the TextButton widget’s colors.

The TextButton class’s styleFrom() method is a static convenience method that constructs a text button ButtonStyle given simple values. By default, TextButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can change a TextButton’s background color by passing a value to the styleFrom() method’s backgroundColor parameter. The backgroundColor argument value is a Color instance.

The flutter developers can change a TextButton’s foreground color (text color) by passing a value to the styleFrom() method’s foregroundColor parameter. The foregroundColor parameter value is a Color. In this example code, we used the primary parameter to change the text color, this parameter value is also a Color. But the flutter developers have to use the foregroundColor parameter instead the primary parameter. The primary feature is deprecated.

The styleFrom() method’s side parameter value is a BorderSide instance which adds a border to the TextButton. The BorderSide class color property value is a Color that is the color of this side of the border. The BorderSide class width property value is a double instance that is the width of this side of the border, in logical pixels.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - TextButton Color")
          ),
          body: Center(
            child: TextButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: TextButton.styleFrom(
                    fixedSize: const Size(200,75),
                    backgroundColor: Colors.green.shade50,
                    primary: Colors.green.shade800,
                    side: BorderSide(
                        color: Colors.green.shade200,
                        width: 1,
                        style: BorderStyle.solid
                    )
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to create a circular TextButton

Flutter - Circular TextButton

The TextButton class represents a material design text button. The flutter developers can use text buttons on toolbars, in dialogs, or in line with other content. Text buttons do not have visible borders. The flutter developers should avoid using text buttons where they would blend in with other content such as in the middle of lists. The TextButton style can be overridden with its style parameter.

The following flutter application development tutorial will demonstrate how we can create a circular TextButton. That means we will make circle shaped TextButton. In the below example code, we will use the TextButton class’s styleFrom() method to create a circular TextButton widget.

The TextButton class’s styleFrom() method is a static convenience method that constructs a text button ButtonStyle given simple values. By default, TextButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can create a circular TextButton with a border by passing a value to the styleFrom() method’s shape parameter.

The styleFrom() method’s shape parameter value is an OutlinedBorder instance which adds a border to the TextButton.

The OutlinedBorder class represents a ShapeBorder that draws an outline with the width and color specified by the side. Here we will pass a CircleBorder instance for the shape parameter value.

The CircleBorder class represents a border that fits a circle within the available space. By using this parameter value we make the circular TextButton. We also have to set the same value for the TextButton widget’s width and height.

The CircleBorder class side property value is a BorderSide instance. The BorderSide class represents a side of a border of a box. The BorderSide class color property value is a Color that is the color of this side of the border. The BorderSide class width property value is a double instance that is the width of this side of the border, in logical pixels.

The flutter developers can change a TextButton’s width and height (size) by passing a value to the styleFrom() method’s fixedSize parameter.

The styleFrom() method’s fixedSize parameter value is a Size instance, which holds a 2D floating-point size. Here we used the Size class Size(double width, double height) constructors to create a Size with the given width and height.

So we can pass our specified width and height value to this Size(double width, double height) constructor to set the specified size of the TextButton widget. Here we set the same value for the width and height to create a circular TextButton.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - Circular TextButton")
          ),
          body: Center(
            child: TextButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: TextButton.styleFrom(
                    shape: const CircleBorder(
                        side: BorderSide(
                            color: Colors.indigo, width: 1
                        )
                    ),
                    fixedSize: const Size(125,125)
                )
            ),
          )
      ),
    ),
  );
}

flutter - TextButton border radius only

Flutter - TextButton border radius for only specific corners

The TextButton class represents a material design text button. The flutter developers can use text buttons on toolbars, in dialogs, or in line with other content. Text buttons do not have visible borders. The flutter developers should avoid using text buttons where they would blend in with other content such as in the middle of lists. The TextButton style can be overridden with its style parameter.

The following flutter application development tutorial will demonstrate how we can add only specified corners rounded-border to the TextButton. That means we will apply border radius for only specified corners, not all corners. In the below example code, we will use the TextButton class’s styleFrom() method to add specified corners rounded border around the TextButton widget.

The TextButton class’s styleFrom() method is a static convenience method that constructs a text button ButtonStyle given simple values. By default, TextButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can add a rounded border to the TextButton by passing a value to the styleFrom() method’s shape parameter.

The styleFrom() method’s shape parameter value is an OutlinedBorder instance which adds a border to the TextButton.

The OutlinedBorder class represents a ShapeBorder that draws an outline with the width and color specified by the side. Here we will pass a RoundedRectangleBorder instance for the shape parameter value.

The RoundedRectangleBorder class represents a rectangular border with rounded corners. The RoundedRectangleBorder class borderRadius property value is a BorderRadius object instance that specifies the radii for each corner. By using this parameter value we make the TextButton border’s specified corners rounded.

The BorderRadius class is an immutable set of radii for each corner of a rectangle. The BorderRadius.only({Radius topLeft = Radius.zero, Radius topRight = Radius.zero, Radius bottomLeft = Radius.zero, Radius bottomRight = Radius.zero}) constructor creates a border radius with only the given non-zero values. The other corners will be right angles. So using this BorderRadius constructor the flutter developers can add a rounded corner border to the TextButton where its specified corners are only rounded.

The RoundedRectangleBorder class side property value is a BorderSide instance. The BorderSide class represents a side of a border of a box. The BorderSide class color property value is a Color that is the color of this side of the border. The BorderSide class width property value is a double instance that is the width of this side of the border, in logical pixels.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("TextButton Border Radius Only")
          ),
          body: Center(
            child: TextButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: TextButton.styleFrom(
                    shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(24),
                            bottomRight: Radius.circular(24)
                        ),
                        side: BorderSide(
                            color: Colors.blueGrey, width: 1
                        )
                    ),
                    padding: const EdgeInsets.symmetric(
                        horizontal: 64, vertical: 24
                    )
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to create TextButton rounded border

Flutter - TextButton Rounded Border

The TextButton class represents a material design text button. The flutter developers can use text buttons on toolbars, in dialogs, or in line with other content. Text buttons do not have visible borders. The flutter developers should avoid using text buttons where they would blend in with other content such as in the middle of lists. The TextButton style can be overridden with its style parameter.

The following flutter application development tutorial will demonstrate how we can add a rounded border to the TextButton. We will draw a solid colored rounded corners border around a TextButton. In the below example code, we will use the TextButton class’s styleFrom() method to add a rounded border around the TextButton widget.

The TextButton class’s styleFrom() method is a static convenience method that constructs a text button ButtonStyle given simple values. By default, TextButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can add a rounded border to the TextButton by passing a value to the styleFrom() method’s shape parameter.

The styleFrom() method’s shape parameter value is an OutlinedBorder instance which adds a border to the TextButton.

The OutlinedBorder class represents a ShapeBorder that draws an outline with the width and color specified by the side. Here we will pass a RoundedRectangleBorder instance for the shape parameter value.

The RoundedRectangleBorder class represents a rectangular border with rounded corners. The RoundedRectangleBorder class borderRadius property value specifies the radii for each corner. Using this parameter value we make the TextButton border corners rounded.

The RoundedRectangleBorder class side property value is a BorderSide instance. The BorderSide class represents a side of a border of a box. The BorderSide class color property value is a Color that is the color of this side of the border. The BorderSide class width property value is a double instance that is the width of this side of the border, in logical pixels.

So finally, the flutter app developers can add rounded corners border to the TextButton widget by passing a RoundedRectangleBorder instance to the TextButton class’s styleFrom() method’s shape parameter.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.grey),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - TextButton Border Radius")
          ),
          body: Center(
            child: TextButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: TextButton.styleFrom(
                    shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(
                            Radius.circular(24)
                        ),
                        side: BorderSide(
                            color: Colors.grey, width: 1
                        )
                    ),
                    padding: const EdgeInsets.symmetric(
                        horizontal: 64, vertical: 32
                    )
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to set TextButton width

Flutter - TextButton Width

The TextButton class represents a material design text button. The flutter developers can use text buttons on toolbars, in dialogs, or in line with other content. Text buttons do not have visible borders. The flutter developers should avoid using text buttons where they would blend in with other content such as in the middle of lists. The TextButton style can be overridden with its style parameter.

The following flutter application development tutorial will demonstrate how we can set width of a TextButton. We will change the TextButton widget’s default width. Here we will use the TextButton class’s styleFrom() method to change the TextButton’s default width.

The TextButton class’s styleFrom() method is a static convenience method that constructs a text button ButtonStyle given simple values. By default, TextButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can change a TextButton’s width by passing a value to the styleFrom() method’s fixedSize parameter.

The styleFrom() method’s fixedSize parameter value is a Size instance, which holds a 2D floating-point size. Here we used the Size class Size(double width, double height) constructors to creates a Size with the given width and height.

So we can pass our specified width value to this Size(double width, double height) constructor to set width of the TextButton widget. Here we also add a border to the TextButton widget to clearly determine the TextButton size.

So finally, the flutter app developers can set a width for the TextButton widget by passing a value to the TextButton class’s styleFrom() method fixedSize argument.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.grey),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - TextButton Width")
          ),
          body: Center(
            child: TextButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: TextButton.styleFrom(
                    side: BorderSide(
                        color: Colors.grey.shade300,
                        width: 1,
                        style: BorderStyle.solid
                    ),
                    fixedSize: const Size(250,0)
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to add a border to TextButton

Flutter - TextButton Border

The TextButton class represents a material design text button. The flutter developers can use text buttons on toolbars, in dialogs, or in line with other content. Text buttons do not have visible borders. The flutter developers should avoid using text buttons where they would blend in with other content such as in the middle of lists. The TextButton style can be overridden with its style parameter.

The following flutter application development tutorial will demonstrate how we can add a border to the TextButton. We will draw a solid border around a TextButton. In the below example code, we will use the TextButton class’s styleFrom() method to add a border around the TextButton widget.

The TextButton class’s styleFrom() method is a static convenience method that constructs a text button ButtonStyle given simple values. By default, TextButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can add a border to the TextButton by passing a value to the styleFrom() method’s side parameter.

The styleFrom() method’s side parameter value is a BorderSide instance which adds a border to the TextButton.

The BorderSide class represents a side of a border of a box. A Border consists of four BorderSide objects those are Border.top, Border.left, Border.right, and Border.bottom.

The BorderSide class color property value is a Color that is the color of this side of the border.

The BorderSide class width property value is a double instance that is the width of this side of the border, in logical pixels. When flutter developers set the width to 0.0 that will result in a hairline border. The flutter developers can also omit the border entirely by setting the style to BorderStyle.none.

The BorderSide class style property value is a BorderStyle enumeration value that is the style of this side of the border. The BorderStyle enum is the style of line to draw for a BorderSide in a Border. The BorderStyle.solid const draws the border as a solid line.

So finally, the flutter app developers can add a border to the TextButton widget by passing a BorderSide instance to the TextButton class’s styleFrom() method’s side parameter.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.amber),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - TextButton Border")
          ),
          body: Center(
            child: TextButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: TextButton.styleFrom(
                    side: BorderSide(
                        color: Colors.amber.shade200,
                        width: 2,
                        style: BorderStyle.solid
                    ),
                    fixedSize: const Size(200, 75)
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to add padding to TextButton

Flutter - TextButton Padding

The TextButton class represents a material design text button. The flutter developers can use text buttons on toolbars, in dialogs, or in line with other content. Text buttons do not have visible borders. The flutter developers should avoid using text buttons where they would blend in with other content such as in the middle of lists. The TextButton style can be overridden with its style parameter.

The following flutter application development tutorial will demonstrate how we can add padding to a Text TextButton. That means how we can add padding to a TextButton widget’s all sides or any specific sides. In the below example code, we will use the TextButton class’s styleFrom() method to add padding to a TextButton widget.

The TextButton class’s styleFrom() method is a static convenience method that constructs a text button ButtonStyle given simple values. By default, TextButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can add padding to TextButton by passing a value to the styleFrom() method’s padding parameter.

The styleFrom() method’s padding parameter value is an EdgeInsetsGeometry instance which adds padding to the TextButton.

The EdgeInsetsGeometry class represents the base class for EdgeInsets that allows for text-direction-aware resolution.

The EdgeInsets class represents an immutable set of offsets in each of the four cardinal directions. The EdgeInsets class specifies offsets in terms of visual edges, left, top, right, and bottom.

The EdgeInsets.all(double value) constructor creates insets where all the offsets are the value.

The EdgeInsets.symmetric({double vertical = 0.0, double horizontal = 0.0}) constructor creates insets with symmetrical vertical and horizontal offsets. Here we used this constructor to add padding to a TextButton widget’s horizontal and vertical sides.

The styleFrom() method’s side parameter value is a BorderSide instance which adds a border to the TextButton. The BorderSide class color property value is a Color that is the color of this side of the border. The BorderSide class width property value is a double instance that is the width of this side of the border, in logical pixels.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - TextButton Padding")
          ),
          body: Center(
            child: TextButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: TextButton.styleFrom(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 64, vertical: 32
                    ),
                    side: BorderSide(
                        color: Colors.indigo.shade200, width: 1
                    )
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to change TextButton size

Flutter - TextButton Size

The TextButton class represents a material design text button. The flutter developers can use text buttons on toolbars, in dialogs, or in line with other content. Text buttons do not have visible borders. The flutter developers should avoid using text buttons where they would blend in with other content such as in the middle of lists. The TextButton style can be overridden with its style parameter.

The following flutter application development tutorial will demonstrate how we can set the size of a TextButton. We will change the TextButton widget’s default width and height. In the below example code, we will use the TextButton class’s styleFrom() method to change the TextButton’s default width and height (size).

The TextButton class’s styleFrom() method is a static convenience method that constructs a text button ButtonStyle given simple values. By default, TextButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can change a TextButton’s width and height (size) by passing a value to the styleFrom() method’s fixedSize parameter.

The styleFrom() method’s fixedSize parameter value is a Size instance, which holds a 2D floating-point size. Here we used the Size class Size(double width, double height) constructors to create a Size with the given width and height.

So we can pass our specified width and height value to this Size(double width, double height) constructor to set the specified size of the TextButton widget. Here we also add a solid border to the TextButton widget to clearly visible the TextButton size (height and width).

So finally, the flutter app developers can change the TextButton widget’s size (width and height) by passing a value to the TextButton class’s styleFrom() method fixedSize parameter.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - TextButton Size")
          ),
          body: Center(
            child: TextButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: TextButton.styleFrom(
                    fixedSize: const Size(200,75),
                    side: BorderSide(
                        color: Colors.indigo.shade100, width: 1
                    )
                )
            ),
          )
      ),
    ),
  );
}

flutter - How to remove padding from ElevatedButton

Flutter - ElevatedButton Remove Padding

The ElevatedButton class represents a material design elevated button. The flutter developers can use elevated buttons to add dimension to otherwise mostly flat layouts such as in long busy lists of content, or in wide spaces. The flutter developers should avoid using elevated buttons on already-elevated content such as dialogs or cards. The flutter developers can override the ElevatedButton style with its style parameter. The static styleFrom() method is a convenient way to create an ElevatedButton ButtonStyle from simple values.

The following flutter application development tutorial will demonstrate how we can remove the padding from an ElevatedButton widget. That means how we can remove the padding from an ElevatedButton widget’s all sides. Here we will use the ElevatedButton class’s styleFrom() method to remove the padding from an ElevatedButton widget. Actually, we will set the ElevatedButton’s padding value to zero which seems ElevatedButton has no padding (padding removed).

The ElevatedButton class’s styleFrom() method is a static convenience method that constructs an elevated button ButtonStyle given simple values. By default, ElevatedButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can remove the padding from an ElevatedButton by passing a value (padding value zero for all sides) to the styleFrom() method’s padding parameter.

The styleFrom() method’s padding parameter value is an EdgeInsetsGeometry instance which adds padding to the ElevatedButton.

The EdgeInsetsGeometry class represents the base class for EdgeInsets that allows for text-direction-aware resolution.

The EdgeInsets class represents an immutable set of offsets in each of the four cardinal directions. The EdgeInsets class specifies offsets in terms of visual edges, left, top, right, and bottom.

The EdgeInsets.all(double value) constructor creates insets where all the offsets are the value. Here we used this constructor to set the padding value zero to an ElevatedButton widget’s all sides. That will practically remove the padding from an ElevatedButton widget’s all sides.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("ElevatedButton Remove Padding")
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: (){},
              child: const Text("Click Me"),
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.all(0)
              ),
            ),
          )
      ),
    ),
  );
}

flutter - ElevatedButton border radius only

Flutter - ElevatedButton border radius only for specified corners

The ElevatedButton class represents a material design elevated button. The flutter developers can use elevated buttons to add dimension to otherwise mostly flat layouts such as in long busy lists of content, or in wide spaces. The flutter developers should avoid using elevated buttons on already-elevated content such as dialogs or cards. The flutter developers can override the ElevatedButton style with its style parameter. The static styleFrom() method is a convenient way to create an ElevatedButton ButtonStyle from simple values.

The following flutter application development tutorial will demonstrate how we can add only specified corners rounded-border to the ElevatedButton. That means we will apply the border radius for only the specified corners, not all the corners. Here we will use the ElevatedButton class’s styleFrom() method to add specified corners rounded border around the ElevatedButton widget.

The ElevatedButton class’s styleFrom() method is a static convenience method that constructs an elevated button ButtonStyle given simple values. By default, ElevatedButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can add a rounded border to the ElevatedButton by sending a value to the styleFrom() method’s shape parameter.

The styleFrom() method’s shape parameter value is an OutlinedBorder instance which adds a border to the ElevatedButton.

The OutlinedBorder class represents a ShapeBorder that draws an outline with the width and color specified by the side. Here we will pass a RoundedRectangleBorder instance for the shape parameter value.

The RoundedRectangleBorder class represents a rectangular border with rounded corners. The RoundedRectangleBorder class borderRadius property value is a BorderRadius object instance that specifies the radii for each corner. By using this parameter value we make the ElevatedButton border’s specified corners rounded.

The BorderRadius class is an immutable set of radii for each corner of a rectangle. The BorderRadius.only({Radius topLeft = Radius.zero, Radius topRight = Radius.zero, Radius bottomLeft = Radius.zero, Radius bottomRight = Radius.zero}) constructor creates a border radius with only the given non-zero values. The other corners will be right angles. So using this BorderRadius constructor we can add a rounded corner border to the ElevatedButton where its specified corners are only rounded.

The RoundedRectangleBorder class side property value is a BorderSide instance. The BorderSide class represents a side of a border of a box. The BorderSide class color property value is a Color that is the color of this side of the border. The BorderSide class width property value is a double instance that is the width of this side of the border, in logical pixels. The style property is the style of this side of the border.

In this flutter example code, we only rounded the ElevatedButton’s top right and bottom left corners. Other corners remain unchanged and rectangle-shaped. Here we draw a solid-styled border around the ElevatedButton.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.cyan),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("ElevatedButton Border Radius Only")
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: (){},
              child: const Text("Click Me"),
              style: ElevatedButton.styleFrom(
                  shape:RoundedRectangleBorder(
                      borderRadius: const BorderRadius.only(
                          topRight: Radius.circular(24),
                          bottomLeft: Radius.circular(24)
                      ),
                      side: BorderSide(
                          color: Colors.cyan.shade600,
                          width: 2,
                          style: BorderStyle.solid
                      )
                  ),
                  fixedSize: const Size(200,75)
              ),
            ),
          )
      ),
    ),
  );
}