Loading indicator GIFs. Material and Cupertino (Android and iOS) loading indicators in assorted sizes. Use as placeholders for loading remote image assets. Demo: https://gallery.codelessly.com/flutterwebsites/loadinggifs/

Overview

Loading GIFs Cover

Loading GIFs

Pub release GitHub Release Date GitHub issues GitHub top language GitHub code size in bytes Libraries.io for GitHub License

High quality Android and iOS loading spinners.

View Demo

Loading GIFs is a collection of high fidelity loading animations in GIF format. Included are Android "Material Design" and iOS "Cupertino" default loading indicators.

Usage

Pub release

Import this library into your project:

loading_gifs: ^latest_version

Use cupertinoActivityIndicator or circularProgressIndicator where ever a loading image is needed.

FadeInImage.assetNetwork(placeholder: cupertinoActivityIndicator, image: "image.png");

That's it!

Usage Tips

Loading GIFs Sizes

Size

This library is optimized for size so it only includes the base asset sizes. Change the size of the loading spinners using scale and placeholderScale.

FadeInImage.assetNetwork(placeholder: cupertinoActivityIndicator, image: "image.png", placeholderScale: 5);

Image.asset(circularProgressIndicator, scale: 10);

Dynamic Images

When loading images whose dimensions are unknown ahead of time, use cupertinoActivityIndicatorSmall instead of cupertinoActivityIndicator. cupertinoActivityIndicatorSmall is a min height variant of cupertinoActivityIndicator which allows Flutter to correctly expand the loaded image into the layout.

The small variant should be used when loading a list of images or compositing an image from multiple images.

  ListView(
    children: <Widget>[
      FadeInImage.assetNetwork(
          placeholder: cupertinoActivityIndicatorSmall,
          image: "image_1.png"),
      FadeInImage.assetNetwork(
          placeholder: cupertinoActivityIndicatorSmall,
          image: "image_2.png"),
      FadeInImage.assetNetwork(
          placeholder: cupertinoActivityIndicatorSmall,
          image: "image_3.png"),
    ],
  )

Empty Placeholder

FadeInImage requires a valid placeholder image to avoid "Asset not found" errors. Use placeholderEmpty, a 1x1 pixel transparent PNG, when an empty placeholder is needed.

FadeInImage.assetNetwork(placeholder: placeholderEmpty, image: "image.png");

Assets

iOS (Cupertino) Loading Indicators

iOS Loading Indicator Full iOS Loading Indicator Optimized
Full (159KB) Optimized (78KB)
iOS Loading Indicator Square Large iOS Loading Indicator Square Medium iOS Loading Indicator Square Small
Large Square (36KB) Medium Square (14KB) Small Square (7KB)
iOS Loading Indicator Large iOS Loading Indicator Medium iOS Loading Indicator Small
Large (16KB) Medium (16KB) Small (16KB)

Android (Material) Loading Indicators

Material Loading Indicator Full Material Loading Indicator Optimized
Full (1.13MB) Optimized (263KB)
Material Loading Indicator Square Large Material Loading Indicator Square Medium Material Loading Indicator Square Small
Large Square (225KB) Medium Square (148KB) Small Square (100KB)
Material Loading Indicator Large Material Loading Indicator Medium Material Loading Indicator Small
Large (129KB) Medium (149KB) Small (186KB)

About

Here at Codelessly, we're building a Flutter app UI and website builder, development tools, and UI templates to increase productivity. If that sounds interesting, you'll want to subscribe to updates below 😎

Loading GIFs is licensed under Zero-Clause BSD and released as Emailware. If you like this project or it helped you, please subscribe to updates. Although it is not required, you might miss the goodies we share!

Codelessly Newsletter Signup

Contributors ❤️

Design:

Development:

Sponsor: Codelessly - Flutter App UI and Website Builder

Codelessly Email Codelessly Website Codelessly Twitter Codelessly GitHub

Flutter Logo Banner

License

BSD Zero Clause License

Copyright © 2020 Codelessly

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
You might also like...

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Flutter Photo View A simple zoomable image/content widget for Flutter. PhotoView enables images to become able to zoom and pan with user gestures such

Jan 3, 2023

Use lottie in flutter for both iOS and Android

flutter_lottie Use Lottie in Flutter. Supports both iOS and Android using lottie-ios and lottie-android Current Status Supports most features that bot

Nov 25, 2022

Simple and effective cross platform image saver for flutter, supported web and desktop

Simple and effective cross platform image saver for flutter, supported web and desktop

Oct 5, 2022

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content. Installation Add dependency to your pubspec.yaml

Dec 23, 2022

A Flutter image editor with support for paint, text, filters, emojis, stickers and more

A Flutter image editor with support for paint, text, filters, emojis, stickers and more

Flutter Image Editor Plugin with simple, easy support for image editing using Paints, Text, Filters, Emoji and Sticker like stories.

Dec 22, 2022

Image caching system for flutter

image_cacheing image_cacheing is an image caching package. It is currently tested for Android applications. ImageCacheing widget takes url as a param.

May 31, 2021

A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

Jan 18, 2022

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

Dec 26, 2022

A flutter package to convert any widget to an Image.

A flutter package to convert any widget to an Image.

Davinci A package to convert any widget to an image which can be saved locally or can be shared to other apps and chats. 📹 Preview ℹ️ Usage Prerequis

Dec 20, 2022
Comments
  • placeholderScale with BoxFit.cover doesn't work

    placeholderScale with BoxFit.cover doesn't work

    I have an image that i am using BoxFit.cover for. The problem is that it makes the spinner massive. I tried to use placeholderScale to shrink but it doesn't do anything.

    FadeInImage.assetNetwork(
                      placeholder: cupertinoActivityIndicatorSmall,
                      placeholderScale: .2, //tried bunch numbers; doesn't change
                      image: imageUrl,
                      height: 150,
                      width: MediaQuery.of(context).size.width,
                      fit: BoxFit.cover,
                    ),
                  ),
    
    opened by eliezerp3 1
Releases(0.3.0)
Owner
Codelessly
Flutter App UI & Website Builder. Reduce development time in half with Codelessly™.
Codelessly
A scrollable, dismissable by swiping, zoomable, rotatable image gallery on which you can add a dynamic overlay.

Swipe Image Gallery A scrollable, dismissable by swiping, zoomable, rotatable image gallery on which you can add a dynamic overlay. While it is intend

null 20 Dec 7, 2022
Flutter Image Upload From Gallery

Image Upload From Gallery Image upload from gallery to Backend Dependencies image_picker: ^0.8.4+1 http: ^0.13.3 dio: ^4.0.0 Getting Started Image upl

Fatih Baycu 2 Oct 6, 2021
Flutter Package to Pick Image From Gallery or Camera

image_picker_gallery_camera Flutter Package to Pick Image From Gallery or Camera Getting Started A Flutter plugin for iOS and Android for picking imag

Sayandh KP 8 Oct 5, 2022
Flutter gallery - Image, Audio, Video & File.

Flutter Gallery Getting Started For help getting started with Flutter, view our online documentation.

Vivek Sharma 55 Sep 26, 2022
A simple and easy flutter demo to crop image

flutter_image_crop A simple demo to crop image on flutter easily. A Chinese version of this document can be found here Flutter_image_crop Plugin will

路小飞 3 Jul 8, 2021
flutter image demo 主要展示图片与动画处理的案例。比如:网络图片加载、图片预览、图片缩放、json动画处理等等。

flutter_image_demo flutter image demo 主要展示图片与动画处理的案例。 比如:网络图片加载、图片预览、图片缩放、json动画处理等等。 本项目使用到以下插件: cached_network_image、 photo_view 、 lottie 、 flutter_

null 2 Feb 27, 2022
Flutter package for Image Carousel It is an image carousel widget.

Snapshot Carousel Flutter package for Image Carousel It is an image carousel widget. Supported platforms Flutter Android Flutter iOS Flutter web Flutt

Mrigank Anand 12 Jun 3, 2021
Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.

crop A Flutter package for cropping any widget, not only images. This package is entirely written in Dart and supports Android, iOS, Web and Desktop.

Mahdi 225 Jan 6, 2023
Flutter plugin that allows you to display multi image picker on iOS and Android. 👌🔝🎉

IMPORTANT: This repository has been archived and no longer mantained. As I don't have time anymore to work on the package it became very outdated. For

Radoslav Vitanov 898 Apr 29, 2021
Basic flutter art gallery app

artes_nft A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

null 0 Nov 25, 2021