Popular Flutter Image Packages

 There are many packages on https://pub.dev/ but sometimes we are searching for the one package that fits our needs well and it takes time to search for the right package as per our needs. 

So here I'm sharing some of the popular packages by a third party or flutter which might be useful in your flutter projects.

If you are about to start flutter and searching for any tutorial for beginners, the following are the free tutorials on youtube that you can head over to

1. Flutter Tutorial For Beginners (by The Net Ninja)

2. Flutter Crash Course for Beginners 2021- Build a Flutter App with Google's Flutter &Dart (by AcadeMind)


Popular Image Packages:

1. Image Picker 

   It's a flutter plugin for Ios and Android to pick images from the image library and take pictures with the camera. It also offers to retrieve a lost data.

For more info, Click Here

2. Flutter BlurHash

    It's a compact representation of a placeholder of an image. It's a very useful package for showing a blurry effect on an image while it is loading like Instagram does

Image from https://pub.dev/
   DEMO VIDEO:

    

       
    For More Info, CLICK HERE

    3. Progressive Image

        It's a flutter widget that progressively loads large images using low-quality image placeholders. Some of the features of this widget or package are following:

  • Displays placeholder and thumbnail image until the target Image loads.
  • Smooth Fade-in animations for preventing immediate image popups on load.
  • Blur effect for the low-resolution thumbnail to prevent the pixelated view.
  • Effectively resolves thumbnail image before the target image starts to fetch for a quick first impression.
For More Info, CLICK HERE

   4. Cached Network Image:

    It's a flutter library that loads the image from the internet and keeps them in the cache directory. It is very useful in cases where you don't need to load images repeatedly.

It stores and retrieves images from flutter_cache_manager

USAGE:

    CachedNetworkImage(

  imageUrl: imageURL,

  imageBuilder: (context, imageProvider) => Container(

    decoration: BoxDecoration(

      image: DecorationImage(

          image: imageProvider,

          fit: BoxFit.cover,

          colorFilter:

              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),

    ),

  ),// To apply decoration or cover with some kind of widget

  placeholder: (context, url) => CircularProgressIndicator(),//             Placeholder Widget

  errorWidget: (context, url, error) => Icon(Icons.error),

),

For More Info, CLICK HERE


5. Extended Image

    It is a powerful official extension library of the image, which supports placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide-out page, editor(crop, rotate, flip), paint custom, etc.

image cropper using extended_image package


For Demo Video, CLICK HERE

For More Info, CLICK HERE


#Flutter

#Happy Coding😊




Comments

Post a Comment

Popular posts from this blog

How to use Custom Icons in Flutter(Using SVG or Icon Font)?

Image
Many icons are predefined in the flutter and are very easy to use. Many times though, just these icons are not enough. For example, if you want to show an icon of a particular company or logo etc, you'll have to reach for other than the official icons. So, Let's see how you can add custom icons to your flutter project Social Media Icon Let's say you want to use the above social media icon. As of now, there is no pre-made package on pub.dev , so you'll have to add them yourself. This method will only work for any icon pack which has SVG icon font. Converting for the use in Flutter The first step is obviously you need to download the icon pack(SVG). If you are following along with the above icon, get it from this  download page . Once you have downloaded the SVG icon, you need to somehow convert these into icons to be able to use them in your flutter project. Thankfully, There's one open-source tool  fluttericon.com  which can do the conversion for you. Steps to proce
Read more

Flutter ZERO Boilerplate Routing With Auto Route

Navigation and Routing take too much code and effort to implement. Two-Three lines of code have to be written for routing from one screen to another and in the end, it is not maintainable at all and becomes robust. We somehow need a way to generate one file for navigation purposes that can be easily maintained and has less boilerplate in order to be readable. If you are going to implement a router yourself, there's still a lot of boilerplate. All of this changes with the package  auto_route  which works elegantly with code generation. This way you can reduce the boilerplate while still having the ability to customize the routes to your heart's content. What is AutoRoute? It's a flutter navigation package that allows for strongly-typed arguments passing, effortless deep-linking. It uses code generation to simplify routes setup i.e reduce the boilerplate code. It requires only a minimal amount of code to generate everything needed for navigation. Why AutoRoute? For clean Rout
Read more

Flutter Video Feeds (Like Instagram or Facebook)

There are many packages for the video player in pub.dev  but it is very hectic to maintain the video player in list view as it throws some kind of dispose error or some kind of crashes occurred during playing videos. I tried a lot of packages but at first, I was not able to build video feeds correctly. After I tried using native package by flutter video_player  but I got error such as dispose error and sometimes only 4 out of 10 videos are playing and others crash by throwing platform Exception A VideoPlayerController was used after being disposed. I/flutter : Once you have called dispose() on a VideoPlayerController, it can no longer be used.   or [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: PlatformException(VideoError, Video player had error com.google.android.exoplayer2.ExoPlaybackException: Source error, null, null ) So, to get rid of these errors, I need to dispose the video controller which is no more in the viewport, and re-initialize with the new controlle
Read more