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.
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
@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.
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.
Documentation Links: