Flutter Image Widget | RRTutors

Flutter Image Widget

Image widget used to show an image. When displaying

an image, you specify the image source in the constructor:

image provider

asset,

network,

file,

memory

Load Network Image

 

class ImageWidget extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return MaterialApp(

     home: SafeArea(

       child: Scaffold(

         body: Center(child: Image.network("https://cdn.pixabay.com/photo/2016/07/03/16/06/global-warming-1494965_960_720.jpg",width: 200,))

       ),

     ),

   );

 }

 

}

Load Image from Assets

To load images from assets first we need to create an Assets folder inside the application.

It could be like below

 

Flutter assets

 

Now after adding image into assets folder we need to set the path inside pubspec.yaml fileflutter image from assets

 

Next run the below command in terminal to configure image

 

flutter packages get

 

Now lets create sample

 

class ImageWidget extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return MaterialApp(

     home: SafeArea(

       child: Scaffold(

         body: Center(child: Image.asset("assets/user.png",width: 200,))

       ),

     ),

   );

 }

}

 

While Loading the images there is no option to show placeholder with above way,

Then how to show Placeholder while loading the image.

With FadeInImage widget we can achieve to show placeholder image

Replace above code with 

Scaffold(

 body: Center(child: FadeInImage.assetNetwork(placeholder: "assets/user.png",

   image: "https://cdn.pixabay.com/photo/2016/07/03/16/06/global-warming-1494965_960_720.jpg",width: 200,))

)

Flutter Image from Internet

 

Icon 

 

The icon widget allows us to quickly build icon widgets

using a pre-built list of material icons, available in the

Icons class. 

We can specify the icon size and color


 

class IconWidget extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return MaterialApp(

     home: SafeArea(

       child: Scaffold(

           body: Center(child: Icon(Icons.email,color: Colors.pink,size: 48,))

   ))

     ,

   );

 }

 

}

Advertisements