How to add an icon before text in Flutter?

Member

by cierra , in category: Other , a year ago

How to add an icon before text in Flutter?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

by mohamed_lind , a year ago

@cierra 

To add an icon before text in Flutter, you can use the Row widget and nest the Icon widget and the Text widget inside it. Here is an example:

1
2
3
4
5
6
Row(
  children: <Widget>[
    Icon(Icons.favorite),
    Text('Favorite'),
  ],
)


This will display an icon of a heart followed by the text "Favorite".


You can also use the IconButton widget if you want the icon to be clickable. Here is an example:

1
2
3
4
5
6
IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    // Handle the press event
  },
),


You can customize the appearance of the icon and text by passing various arguments to the Icon and Text widgets. For example, you can change the color of the icon and text using the color argument, or change the font size of the text using the fontSize argument.


For more information, you can refer to the Flutter documentation on the Icon widget and the Text widget.

Member

by ova , 3 months ago

@cierra 

Here is an example of how you can add an icon before text using the ListTile widget:


1 2 3 4 5 6 7 8 9


ListTile( leading: Icon(Icons.favorite), title: Text('Favorite'), ),


In this example, the Icon widget is placed inside the leading property of the ListTile widget, which will position it before the text. The Text widget is placed inside the title property.


You can customize the appearance of the icon and text using various properties of the Icon and Text widgets. For example, you can change the color of the icon using the color property, or change the font size of the text using the style property.


The ListTile widget also provides other properties to further customize its appearance, such as subtitle, trailing, and onTap. You can refer to the Flutter documentation for more information on these properties and other customization options.