![how-to-display-image-in-flutter](https://appmaking.co/wp-content/uploads/2021/08/how-to-display-image-in-flutter.png)
How to display Image in flutter?
In this tutorial, I’m going to explain multiple ways to display images in Flutter. For this, we’re going to use Image.network()
, Image.asset()
, CircleAvatar()
. we also learn how to change image height, width, and radius.
How to display network images in Flutter?
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AppMaking.co"),
centerTitle: true,
backgroundColor: Colors.blue[900],
),
body: Center(
child: Image.network(
"https://appmaking.co/wp-content/uploads/2021/08/appmaking-logo-colored.png",
height: 200,
width: 200,
),
),
);
}
In this example, we’ve used Image.network()
to display an image from a network. As a first parameter, you need to pass the source URL for that particular image. (note: you need to pass a full URL with extension). you can also change the height and width of that image too. The output for the above example looks like this.
![display-network-image-flutter](https://appmaking.co/wp-content/uploads/2021/08/display-network-image-flutter.png)
How to display Image locally on Flutter?
To display a local image, first, you need to create a folder in your project root directory. then you need to add permission inside pubspec.yaml
![flutter-local-image-config](https://appmaking.co/wp-content/uploads/2021/08/flutter-local-image-config.png)
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AppMaking.co"),
centerTitle: true,
backgroundColor: Colors.blue[900],
),
body: Center(
child: Image.asset(
"images/app-making-name-logo.png",
height: 200,
width: 200,
),
),
);
}
In this example, we’ve used Image.asset()
to display an image from a local folder. As a first parameter, you need to pass the source URL for that particular image. (note: you need to pass a full URL with extension). you can also change the height and width of that image too. The output for the above example looks like this.
![display-local-image-flutter](https://appmaking.co/wp-content/uploads/2021/08/display-local-image-flutter.png)
How to make an image in a circle in Flutter?
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AppMaking.co"),
centerTitle: true,
backgroundColor: Colors.blue[900],
),
body: Center(
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://appmaking.co/wp-content/uploads/2021/08/appmaking-logo-colored.png"),
radius: 50,
),
),
);
}
In this example, we’ve used CircleAvatar() to display an image in a circular format. It requires a parameter called backgroundImage
. you can pass NetworkImage() or AssetImage(). you can also change the radius for a circle using the radius
parameter. The output of the above example looks like this.
![display-circle-image-flutter](https://appmaking.co/wp-content/uploads/2021/08/display-circle-image-flutter.png)
Documentation Links: