How to use an image instead of an icon in flutter?
Most of the time you'll find that the underling icon
property is a Widget
, so you can directly replace your Icon
with Image.asset
and provide it a width
, height
and fit
according to your needs:
Image.asset(
'assets/images/foo.png',
width: 44,
height: 44,
fit: BoxFit.cover,
)
Example (in a TabBar
)
TabBar(
tabs: [
Tab(
text: 'Icon',
icon: Icon(Icons.call), // <-- Icon
),
Tab(
text: 'Image',
icon: Image.asset( // <-- Image
'assets/images/foo.png',
height: 44,
fit: BoxFit.cover,
),
),
],
)
As per documentation Tab icon property ask a widget so you can pass like this also or any other widget also
new Tab(icon: new Image.asset("assets/img/logo.png"), text: "Browse"),
So follow up to @RobinSinha answer, using the Tab widget looks weirds as the Tab widget has an external padding, so i'd suggest to avoid that:
BottomNavigationBarItem(
icon: Image.asset(
"assets/images/image.png",
width: <put your desired width, recommended 24.0>,
height: <put your desired width, recommended 24.0>,
),
label: '<name for icon>'
),
ImageIcon widget is the most suitable widget to use images as icons in Flutter. You can use its property image to assign your own image.
ImageIcon(
AssetImage("images/icon.png"),
color: Colors.red,
size: 24,
),