Image Widget in Flutter

Flutter Image is another most usable Widget in Programming. Flutter provides Image Widget in very different Options like Image with network, assets, file etc. Flutter also Provide FadedImage, NetworkImage. We will cover here most examples.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text("Image Demo")),
        body: Center(
            child: Column(children: [
          SizedBox(height: 10),
          Text("Image From Network"),
          SizedBox(height: 5),
          Image.network('https://via.placeholder.com/150', height: 100),
          SizedBox(height: 10),
          Text("Image From Assets"),
          SizedBox(height: 5),
          Image.asset('assets/images/image.jpg', height: 100),
          SizedBox(height: 10),
          Text("Rounded Circular Image"),
          SizedBox(height: 5),
          ClipRRect(
            borderRadius: BorderRadius.circular(25.0),
            child:
                Image.network('https://via.placeholder.com/150', height: 100),
          ),
        ])),
      ),
    );
  }
}

In above program, we use some type of Image like

• Image.network: It needs an URL to fetch image from URL and show
• Image.asset: It require path where image saved in Project directory. Path of the Image is assets/images/image_name.jpg
• ClipRRect: to make Image Border Circular
• NetworkImage: It is same as Image.network with minimal difference
• FadedImage: FadedImage is used to show placeholder image and then with Fade animation effect It fetch Image from Network