Flutter Image | Gif Image | asset Image | Internet Image | package Webp Image | cached_network_image | extended_image | transparent_image

 Image

Add  Dependencies in Pubspec.yaml:

Open [ pubspec.yaml ]

Copy and Paste in pubspec.yaml 

cupertino_icons: ^1.0.2
cached_network_image: ^3.1.0
extended_image: ^4.1.0
transparent_image: ^2.0.0
flutter_gallery_assets: ^1.0.2

Click  [ Pub upgrade ]  :- Note ; Internet Connection Required

Download Image Folder From GitHub -Click Here

Create [ images ] folder and paste all downloaded  file

Copy [Webpgif.webp] and paste [Eexternal Libraries / Dart Packages /flutter_gallery_assets-1.0.2/animated_image]

add Image asset in [ pubspec.yaml ]

Copy and Paste in pubspec.yaml 

- images/flutter_logo_leg.gif
- images/flutter_50px.png
- images/Webpgif.webp
- packages/flutter_gallery_assets/animated_images/Webpgif.webp

Source Code

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';// cached_network_image: ^3.1.0
import 'package:extended_image/extended_image.dart';//extended_image: ^4.1.0
import 'package:transparent_image/transparent_image.dart';// transparent_image: ^2.0.0

void main() {
runApp(  MaterialApp(
  title:"Image",
  home:Scaffold(appBar: AppBar(title: Text('Image',),),
    body: Material(
      child: Center(
        child:
        ImageExample()
        ,
      ),
    ) ,
  ),
));
}

class ImageExample extends StatelessWidget {
  const ImageExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(8),
      children: <Widget>[
        const ListTile(title: Text('Image from asset:')),
        Card(
          child: Image.asset('images/flutter_50px.png'),
        ),
        const Divider(),
        const ListTile(title: Text('Image from url:')),
        Card(

          child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image:
              'https://media.istockphoto.com/photos/los-angeles-skyline-picture-id172458569?k=20&m=172458569&s=612x612&w=0&h=kvgSC5r-vCJCkCWCdU8MiNX5_IeBvQpSrSlWUw-eny0='
          ),
        ),
        const Divider(),
        const ListTile(title: Text('Cached network image:')),
        CachedNetworkImage(
          imageUrl:
        'https://media.istockphoto.com/photos/toyosu-buildings-and-treelined-street-picture-id1022699218?k=20&m=1022699218&s=612x612&w=0&h=NPLbJ3-yeeP6SJrV--JF1xJb0YNRgqA4DsbHjHSMrqk=',
          placeholder: (context, url) =>
          const Center(child: CircularProgressIndicator()),
          errorWidget: (context, url, error) => const Icon(Icons.error),
        ),
        const Divider(),
        const ListTile(title: Text('GIF from asset:')),
        Image.asset(
          'images/flutter_logo_leg.gif',
          scale: 1.0,
          height: 300,
        ),
        const Divider(),
        const ListTile(title: Text('WEBP from package in assets:')),
        // In pubspec.yaml, remember to add asset:
        //animated_images/animated_flutter_stickers.webp
       // package: 'flutter_gallery_assets'
        // 'packages/flutter_gallery_assets/animated_images/animated_flutter_stickers.webp'
        Image.asset(
          'animated_images/Webpgif.webp',
          package: 'flutter_gallery_assets',
        ),
        const ListTile(
          title: Text('ExtendedImage:'),
          subtitle: Text(
              'provides more functionalities like image caching and shape and borderRadius'),
        ),
        // Extended image
        ExtendedImage.network(
          'https://images.unsplash.com/photo-1515488764276-beab7607c1e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1895&q=80',
          // cache: true, (by default caches image)
          shape: BoxShape.rectangle,
          borderRadius: const BorderRadius.all(Radius.circular(30.0)),
        ),
      ],
    );
  }
}