Quick Tip – How to make a Row of Icons in Flutter

What is a Flutter Icon

In Flutter, an Icon is a graphical element that represents a program, file, device, or function. It can be displayed in a variety of sizes and colours and can be used to provide visual context for various elements in a user interface.

An Icon widget is drawn with a glyph from a font described in an IconData widget. You can use a predefined IconData class or define your own by extending the IconData class.

Here is an example of how to use the Icon widget in Flutter:

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 24.0,
)

This will display a red heart icon (the favorite icon) that is 24 pixels in size.

Replace Icons with IconButtons in Flutter

To replace an Icon with an IconButton in Flutter, you can simply wrap the Icon widget with an IconButton widget and provide a callback for the onPressed property.

For example, let’s say you have a list of icons that you want to make interactive:

Row(
  children: <Widget>[
    Icon(Icons.favorite),
    Icon(Icons.share),
    Icon(Icons.bookmark),
  ],
)

To make these icons into buttons, you can wrap each Icon widget with an IconButton widget:

Row(
  children: <Widget>[
    IconButton(
      icon: Icon(Icons.favorite),
      onPressed: () {
        // Perform some action when the button is pressed
      },
    ),
    IconButton(
      icon: Icon(Icons.share),
      onPressed: () {
        // Perform some action when the button is pressed
      },
    ),
    IconButton(
      icon: Icon(Icons.bookmark),
      onPressed: () {
        // Perform some action when the button is pressed
      },
    ),
  ],
)

Each IconButton will now have the visual appearance of an Icon, but it will be interactive and respond to user input.

You can customize the appearance of the IconButton by setting properties such as color and size. You can also specify the icon and onPressed callback as arguments to the IconButton constructor.

What is a Row in Flutter

In Flutter, a Row widget is a horizontal linear layout that arranges its children horizontally. It is one of the most widely used layout widgets in Flutter and is often used to create a horizontal list of items, such as icons, buttons, or other widgets.

The Row widget takes a list of children and arranges them horizontally. The children are positioned in a horizontal line, with optional space between them. You can control the alignment of the children within the row using the mainAxisAlignment and crossAxisAlignment properties.

Here is an example of how to use the Row widget in Flutter:

Row(
  children: [
    Icon(Icons.favorite),
    Icon(Icons.bookmark),
    Icon(Icons.share),
  ],
)

This will create a row of three icons: a favourite icon, a bookmark icon, and a share icon.

You can customize the appearance and layout of the Row widget by using various parameters and properties available in the Row widget. For example, you can use the mainAxisAlignment and crossAxisAlignment properties to control the alignment of the children within the row, and the mainAxisSize properties to control the size of the row and its children.

How to create a row of Icons in Flutter

To create a row of icons in Flutter, you can use the Row widget and nest multiple Icon widgets inside it. Here is an example:

Row(
  children: [
    Icon(Icons.favorite),
    Icon(Icons.bookmark),
    Icon(Icons.share),
  ],
)

This will create a row of three icons: a favourite icon, a bookmark icon, and a share icon.

You can customize the appearance and layout of the icons by using various parameters and properties available in the Icon and Row widgets. For example, you can use the color, size, and padding properties to change the colour and size of the icons, and the mainAxisAlignment and crossAxisAlignment properties to control the alignment of the icons within the row.

Here is an example of how you can use these properties to customize the appearance and layout of the icons:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(
      Icons.favorite,
      color: Colors.red,
      size: 24.0,
    ),
    Icon(
      Icons.bookmark,
      color: Colors.blue,
      size: 32.0,
    ),
    Icon(
      Icons.share,
      color: Colors.green,
      size: 36.0,
    ),
  ],
)

The example below shows the row of icons spread evenly through available space. To spread the icons I used mainAxisAlignment: MainAxisAlignment.spaceAround. You can experiment with different alignments to get the desired result.

mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisAlignment: MainAxisAlignment.end,

Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Icon(
                  Icons.favorite,
                  color: Colors.pink,
                  size: 50.0,
                  semanticLabel: 'Text to announce in accessibility modes',
                ),Icon(
                  Icons.face_retouching_natural_outlined ,
                  color: Colors.yellow,
                  size: 50.0,
                  semanticLabel: 'Text to announce in accessibility modes',
                ),Icon(
                  Icons.local_fire_department_sharp ,
                  color: Colors.redAccent,
                  size: 50.0,
                  semanticLabel: 'Text to announce in accessibility modes',
                ),Icon(
                  Icons.local_florist  ,
                  color: Colors.blue,
                  size: 50.0,
                  semanticLabel: 'Text to announce in accessibility modes',
                ),
              ],
            ),

Create Row of IconButtons in the Flutter Appbar

To add a row of icon buttons to the AppBar in Flutter, you can use the actions property of the AppBar widget and pass it a list of IconButton widgets. The actions property is a list of widgets to display in the app bar’s action area.

Here is an example of how to use the actions property to add a row of icon buttons to the AppBar:

AppBar(
  title: Text('flutterassets.com'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Perform search action
      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        // Show more options
      },
    ),
  ],
)

This will create an AppBar with a title and a row of two icon buttons: a search icon button and a more vertical icon button. The icon buttons will be positioned to the right of the title.

You can customize the appearance and layout of the icon buttons by using various parameters and properties available in the IconButton widget. For example, you can use the color and size properties to change the colour and size of the icon buttons.

You can also use the Row widget to create a more customized layout for the icon buttons. Here is an example of how to use the Row widget to create a row of icon buttons with equal space between them:

AppBar(
  title: Text('flutterassets.com'),
  actions: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        IconButton(
          icon: Icon(Icons.search),
          onPressed: () {
            // Perform search action
          },
        ),
        IconButton(
          icon: Icon(Icons.more_vert),
          onPressed: () {
            // Show more options
          },
        ),
      ],
    ),
  ],
)

This will create an AppBar with a title and a row of two icon buttons with equal space between them. The icon buttons will be positioned to the right of the title.

What are actions in the AppBar in Flutter

The actions property of the AppBar widget in Flutter is a list of widgets to display in the app bar’s action area. The action area is located on the right side of the app bar and is typically used for displaying additional options or actions that are relevant to the current screen.

The actions property can be used to add icons, icon buttons, or any other widgets to the action area of the app bar. For example, you can use it to add a search icon, a more vertical icon, or a row of icons or icon buttons.

Here is an example of how to use the actions property to add a search icon to the app bar:

AppBar(
  title: Text('My App'),
  actions: [
    Icon(Icons.search),
  ],
)

This will create an AppBar with a title and a search icon in the action area. The search icon will be positioned to the right of the title.

What is ListView widget in Flutter

In Flutter, a ListView widget is a scrollable container that displays a scrolling list of widgets. It is one of the most commonly used widgets in Flutter, and is used to create lists of items that can be scrolled vertically or horizontally.

The ListView widget takes a list of widgets as children and arranges them vertically or horizontally in a scrollable view. You can control the scroll direction of the ListView using the scrollDirection property, which can be set to Axis.horizontal for a horizontal list or Axis.vertical for a vertical list.

Here is an example of how to use the ListView widget in Flutter to create a vertical list of items:

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
    Text('Item 4'),
    Text('Item 5'),
  ],
)

This will create a scrollable list of text items. The list can be scrolled vertically to see all the items.

You can customize the appearance and behavior of the ListView widget using various parameters and properties available in the ListView widget. For example, you can use the padding, itemExtent, and itemBuilder properties to control the padding, size, and content of the list items, and the scrollDirection property to control the scrolling behavior of the list.

A row of icons with ListView in Flutter

You can use a ListView widget to create a scrollable list of icons. The ListView widget takes a list of widgets as children and arranges them vertically or horizontally in a scrollable view. To create a horizontal list of icons, you can set the scrollDirection property of the ListView to Axis.horizontal.

Container(
  height: 50,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: [
      Icon(Icons.favorite),
      Icon(Icons.bookmark),
      Icon(Icons.share),
    ],
  ),
)

What is Wrap widget in Flutter

In Flutter, the Wrap widget is a multi-child layout widget that wraps its children in a flow-based layout. It is used to create a flexible flow-based layout of widgets that wraps to the next line when there is not enough space on the current line.

The Wrap widget takes a list of widgets as children and arranges them in a wrap layout. You can control the spacing between the widgets using the spacing and runSpacing properties. You can also control the alignment of the widgets within the layout using the alignment property.

Here is an example of how to use the Wrap widget in Flutter to create a flow-based layout of widgets:

Wrap(
  spacing: 18.0,
  runSpacing: 4.0,
  alignment: WrapAlignment.center,
  children: [
    Icon(Icons.favorite),
    Icon(Icons.bookmark),
    Icon(Icons.share),
    Icon(Icons.location_on),
    Icon(Icons.phone),
  ],
)

This will create a flow-based layout of icons with 8 pixels of spacing between the widgets and 4 pixels of spacing between the runs (rows or columns). The icons will be centered within the layout.

You can use the Wrap widget to create a variety of flow-based layouts, such as grids, masonry layouts, or horizontal lists that wrap to the next line. The Wrap widget is a flexible and efficient way to create flow-based layouts in Flutter.

A row of icons with Wrap in Flutter

You can use a Wrap widget to create a row of icons that wraps to the next line when there is not enough space. The Wrap widget takes a list of widgets as children and arranges them in a wrap layout.

Wrap(
  spacing: 18.0,
  runSpacing: 4.0,
  alignment: WrapAlignment.center,
  children: [
    Icon(Icons.favorite),
    Icon(Icons.bookmark),
    Icon(Icons.share),
    Icon(Icons.location_on),
    Icon(Icons.phone),
  ],
)

You can read more about Icons in Fluter in this post: Flutter Basics – How to use Icons in Flutter