text and icon in line

Quick Tip – Icon and text in line in Flutter

Basics /

What is Icon and Text in Flutter

In Flutter, the Icon widget is a decorated letter or symbol while the Text widget is used to display a short piece of text.

The Icon widget is used to display icons in your Flutter app. It displays a glyph, which is a specific symbol or character, from a font. You can use the Icon widget to display a variety of different glyphs in your app, such as icons from a font like Material Icons or Font Awesome, or your own custom glyphs.

The Text widget is used to display a short piece of text in your Flutter app. It can be used to display a single line or multiple lines of text and supports styling and layout options such as font size, colour, and text alignment.

Here is an example of how to use the Icon and Text widgets in Flutter:

Row(
  children: [
    Icon(Icons.favorite),
    Text('Like'),
  ],
)

This will display a row containing an icon and some text. The icon will be the “favourite” icon from the Material Icons font, and the text will be “Like”.

What is Flutter Row

The Row widget is a layout widget that displays its children in a horizontal line. It allows you to specify the layout of its children and how they should be aligned within the row.

To use the Row widget, you can specify its children as a list of widgets in the children property. The Row widget will arrange its children horizontally in the order that they are listed.

You can use the mainAxisAlignment and crossAxisAlignment properties to control the layout of the children in the row. The mainAxisAlignment property controls the alignment of the children along the horizontal axis, and the crossAxisAlignment property controls the alignment of the children along the vertical axis.

Here is an example of how to use the Row widget with the mainAxisAlignment and crossAxisAlignment properties:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.favorite),
    Text('Like'),
  ],
)

This will display a row containing an icon and some text, with both the icon and text centred along both the horizontal and vertical axes.

How to use Icon and Text in a Row in Flutter

To use the Icon and Text widgets in a Row widget in Flutter, you can include them as children of the Row widget in a list. The Row widget will arrange its children horizontally in the order that they are listed.

Here is an example of how to use the Icon and Text widgets in a Row widget in Flutter:

Row(
  children: [
    Icon(Icons.favorite),
    Text('Like'),
  ],
)

This will display a row containing an icon and some text. The icon will be the “favourite” icon from the Material Icons font, and the text will be “Like”.

You can use the mainAxisAlignment and crossAxisAlignment properties of the Row widget to control the layout of its children. These properties allow you to align the children within the row along the horizontal and vertical axes.

This is another example that shows the simple use of the Row with Icon and Text widget.

            Container(
              padding: const EdgeInsets.all(10.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Icon(
                    Icons.favorite,
                    color: Colors.pinkAccent,
                    size: 50.0,
                    semanticLabel: 'Text to announce in accessibility modes',
                  ),
                  Text("Favorite",
                  style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w600,
                    color: Colors.black26
                  ),
                  )
                ],
              ),
            ),
icon text row flutterassets

Flutter Row mainAxisAlignment

The mainAxisAlignment property of the Row widget in Flutter controls the alignment of the children along the main axis, which is the horizontal axis of a Row widget. The mainAxisAlignment property takes a value of the MainAxisAlignment enum, which defines various alignment options for the children along the main axis.

Here is a list of the possible values for the mainAxisAlignment property in the Row widget:

  • MainAxisAlignment.start: Align the children at the start of the main axis.
  • MainAxisAlignment.end: Align the children at the end of the main axis.
  • MainAxisAlignment.center: Align the children along the centre of the main axis.
  • MainAxisAlignment.spaceBetween: Distribute the children evenly along the main axis, with the first and last children aligned at the start and end of the main axis, respectively.
  • MainAxisAlignment.spaceAround: Distribute the children evenly along the main axis, with equal space around each child.
  • MainAxisAlignment.spaceEvenly: Distribute the children evenly along the main axis, with equal space around each child and between each child.

Here is an example of how to use the mainAxisAlignment property in a Row widget:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.favorite),
    Text('Like'),
  ],
)

This will align the icon and text along the centre of the main axis within the Row widget.

Flutter Row mainAxisSize

The mainAxisSize property of the Row widget in Flutter controls the size of the row along the main axis, which is the horizontal axis of a Row widget. The mainAxisSize property takes a value of the MainAxisSize enum, which defines two possible sizes for the row along the main axis:

  • MainAxisSize.max: The row takes up as much space as possible along the main axis. This is the default value.
  • MainAxisSize.min: The row takes up as little space as possible along the main axis.

Here is an example of how to use the mainAxisSize property in a Row widget:

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.favorite),
    Text('Like'),
  ],
)

This will make the Row widget takes up as little space as possible along the main axis. The row will be sized based on the size of its children.

The mainAxisSize property can be useful in situations where you want to control the size of the row along the main axis, such as when you

Flutter Row crossAxisAlignment

The crossAxisAlignment property of the Row widget in Flutter controls the alignment of the children along the cross axis, which is the vertical axis for a Row widget. The crossAxisAlignment property takes a value of the CrossAxisAlignment enum, which defines various alignment options for the children along the cross axis.

Here is a list of the possible values for the crossAxisAlignment property in the Row widget:

  • CrossAxisAlignment.start: Align the children at the start of the cross axis.
  • CrossAxisAlignment.end: Align the children at the end of the cross axis.
  • CrossAxisAlignment.center: Align the children along the centre of the cross axis.
  • CrossAxisAlignment.stretch: Stretch the children to fill the available space along the cross axis.
  • CrossAxisAlignment.baseline: Align the children along the baseline of the text.

Here is an example of how to use the crossAxisAlignment property in a Row widget:

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.favorite),
    Text('Like'),
  ],
)

This will align the icon and text along the centre of the cross axis within the Row widget.

The crossAxisAlignment property can be useful in situations where you want to control the alignment of the children along the cross axis, such as when you want to centre the children vertically within the row.

How to show an Icon in a Text in one line in Flutter

To show an icon within a piece of text in a single line in Flutter, you can use the Text.rich widget and wrap the icon in a WidgetSpan.

Here is an example of how to show an icon within a piece of text in a single line using the Text.rich widget:

Text.rich(
  TextSpan(
    children: [
      TextSpan(text: 'This text has an '),
      WidgetSpan(
        child: Icon(Icons.favorite),
      ),
      TextSpan(text: ' icon.'),
    ],
  ),
)

This will display a single line of text with the icon displayed inline with the text. The icon will be the “favourite” icon from the Material Icons font.

You can use the style property of the TextSpan widget to customize the appearance of the text and icon, such as the font size, font weight, and colour.

For example, you can use the style property to make the text bold and change the colour of the icon like this:

Text.rich(
  TextSpan(
    style: TextStyle(fontWeight: FontWeight.bold),
    children: [
      TextSpan(text: 'This text has an '),
      WidgetSpan(
        child: Icon(Icons.favorite, color: Colors.pinkAccent),
      ),
      TextSpan(text: ' icon.'),
    ],
  ),
)

This will display a single line of bold text with a pink “favourite” icon inline with the text.

      Container(
          padding: const EdgeInsets.all(20.0),
        color: Colors.grey.shade300,
        child: const Text.rich(
          TextSpan(
            style: TextStyle(
              fontSize: 20,
            ),
            children: [
              TextSpan(
                text: 'Tap ',
              ),
              WidgetSpan(
                child: Icon(Icons.favorite, size: 20, color: Colors.red,),
              ),
              TextSpan(
                text: ' if you like it. Click ',
              ),
              WidgetSpan(
                child: Icon(Icons.star, size: 20, color: Colors.blue,),
              ),
              TextSpan(
                text: ' to add this to favorites.',
              ),
            ],
          ),
        ),  
      ),
text and icon in line

The code you provided will create a Container widget with a Text.rich widget as its child. The Text.rich widget will display a piece of text with two icons displayed inline with the text.

The Container widget has padding applied to all sides with a value of 20.0 and a grey background colour.

The Text.rich widget displays a single line of text with two icons displayed inline with the text. The icons are the “favourite” and “star” icons from the Material Icons font, and they are displayed with a size of 20 and colours of red and blue, respectively. The text has a font size of 20.

Altogether, this code will create a container with a single line of text containing two icons displayed inline with the text. The text will have a font size of 20, and the icons will be the “favourite” and “star” icons from the Material Icons font displayed in red and blue, respectively.

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

You can find more about Text widget here: Flutter Basics – What is and how to use Text widget in Flutter

Related Posts