Lazy Loading Flutter Plugin

Last update: Apr 12, 2022

flutter_placeholder_textlines

A simple plugin to generate placeholder lines that emulates text in a UI, useful for displaying placeholder content while loading or empty items

Example of Usage

Widget _buildCustomColorSizePlaceholder() {
    return Container(
      width: 200,
      child: PlaceholderLines(
        count: 4,
        align: TextAlign.center,
        lineHeight: 8,
        color: Colors.blueAccent,
      ),
    );
  }

  Widget _buildSimpleTextPlaceholder(TextAlign align) {
    return Container(
      width: 300,
      child: PlaceholderLines(
        count: 3,
        align: align,
      ),
    );
  }

  Widget _buildSubtitle(String title) {
    return Container(
      padding: EdgeInsets.only(
        top: 24,
        bottom: 16,
      ),
      child: Text(
        title,
        style: TextStyle(fontSize: 20),
      ),
    );
  }

  _buildAnimated() {
    return Container(
      width: 300,
      child: PlaceholderLines(
        count: 3,
        animate: true,
        color: Colors.purple,
      ),
    );
  }

  _buildCardExample() {
    return Material(
      borderRadius: BorderRadius.circular(10),
      elevation: 9,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 16, horizontal: 20),
        width: 300,
        child: Row(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(right: 16),
              width: 70,
              height: 70,
              decoration: BoxDecoration(color: Colors.grey.withOpacity(.6), ),
              child: Center(child: Icon(Icons.photo_size_select_actual, color: Colors.white, size: 38,),),
            ),
            Expanded(
              child: PlaceholderLines(
                count: 3,
              ),
            ),
          ],
        ),
      ),
    );
  }

API Options

/// Defines how many lines to build
final int count;

/// Defines `color` to be used as base when building each line
final Color color;

/// Defines `alignment` for all the lines generated
final TextAlign align;

/// Defines the `min` value for the `opacity` that a line could have, since color opacity it's generated randomly ,
/// this prevents the value from going to low (making it invisible)
/// defaults to [0.4]
final double minOpacity;

/// Defines the `max` value for the `opacity` that a line could have, since color opacity it's generated randomly ,
/// defaults to [0.94]
final double maxOpacity;

/// Defines the `max` `width` that a line could have, since `width` it's generated randomly
/// defaults to [.95]
final double maxWidth;

/// Defines the `min` `width` that a line could have, since `width` it's generated randomly
/// defaults to [.72]
final double minWidth;

/// Defines the line `height`
/// defaults to [12]
final double lineHeight;

/// if [true], plays a nice animation of an overlay
final bool animate;

/// Use a [customAnimationOverlay] to display instead of the difault one
final Widget customAnimationOverlay;

/// Set a custom [animationOverlayColor]
final Color animationOverlayColor;

/// If [true] , this will cause the lines to be rebuild with different widths (randomly generated)
/// every time any parent widget rebuilds it's state
/// defaults to [false]
final bool rebuildOnStateChange;

Also please see example at: https://github.com/victorevox/flutter_placeholder_textlines/tree/master/example

Screenshots

examples

examples 2

examples gif

Getting Started

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

GitHub

https://github.com/victorevox/flutter_placeholder_textlines
You might also like...

A collection of loading indicators animated with CSS

SpinKit Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily cust

Jun 30, 2022

A collection of awesome loading animations

A collection of awesome loading animations

NVActivityIndicatorView ⚠️ Check out LoaderUI (ready to use with Swift Package Mananger supported) for SwiftUI implementation of this. 🎉 Introduction

Jul 2, 2022

Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

Jun 28, 2022

A simple custom loading indicator package.

A simple custom loading indicator package.

custom_loading_indicator A Flutter package to customise the loading indicators with your organisation's logo. Let's say you're a dentist and your app

Aug 10, 2020

Loading times are unavoidable in application development. From a user experience (UX) perspective

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

Feb 12, 2022

This is a Flutter URL preview plugin for Flutter that previews the content of a URL

This is a Flutter URL preview plugin for Flutter that previews the content of a URL

flutter_link_preview This is a URL preview plugin that previews the content of a URL Language: English | 中文简体 Special feature Use multi-processing to

Apr 25, 2022

A Flutter plugin to create views using concentric transition effect.

A Flutter plugin to create views using concentric transition effect.

Concentric Transition A Flutter plugin to create views using Concentric Transition Clipper. Useful for onboarding, page transitions, custom clippers,

Jun 20, 2022

Flutter plugin for jumping to system settings

system_setting A Flutter plugin for jumping to system settings. For Android, this plugin currently support jumping to WiFi, Bluetooth and App Notifica

Jun 6, 2022

🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

🔔  A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Jun 29, 2022
Comments
  • 1. Adds rudimentary null-safety compatibility

    Fixes #1

    Adds a layman's view (I did not write the original package!) null-safety compatibility.

    To ponder:

    The Exception thrown if/when RenderBox isn't found could probably be a more specific custom Exception. Happy to change it to a more appropriate name.

    Reviewed by tek08 at 2021-06-14 07:10
  • 2. add property is lineSpaceHeight and borderRadius.

    • lineSpaceHeight

      • you can set the line spacing size.
    • borderRadius

      • you can create placeholders with rounded corners.
    • code refactored according to analysis_options.yaml.

    • A sample project was created for the latest flutter version.

      Widget _buildLineSpaceHeightAndRadius() {
        return Container(
          width: 300,
          child: PlaceholderLines(
            count: 3,
            animate: true,
            color: Colors.purple,
            lineSpaceHeight: 2,
            borderRadius: BorderRadius.circular(8.0),
          ),
        );
      }
    

    line

    Reviewed by azeek at 2022-02-15 02:21
  • 3. Flutter 3.0 build error

    ../../.pub-cache/hosted/pub.dartlang.org/flutter_placeholder_textlines-1.1.2/lib/placeholder_lines.dart:113:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
     - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../snap/flutter/common/flutter/packages/flutter/lib/src/widgets/binding.dart').
        WidgetsBinding.instance!.addPostFrameCallback(_setupAnimation);
    
    Reviewed by tetianazakhozhaeva at 2022-05-12 16:23
  • 4. add property is lineSpaceHeight and borderRadius and animate duration.

    • lineSpaceHeight

      • you can set the line spacing size.
    • borderRadius

      • you can create placeholders with rounded corners.
    • animateDuration

      • add animation Speed.
    • A sample project was created for the latest flutter version.

    • sample code

      Widget _buildLineSpaceHeightOrRadiusOrAnimateDuration() {
        return Container(
          width: 300,
          child: PlaceholderLines(
            count: 3,
            animate: true,
            color: Colors.purple,
            lineSpaceHeight: 2,
            borderRadius: BorderRadius.circular(8.0),
            animateDuration: const Duration(seconds: 5),
          ),
        );
      }
    
    • default image_1

    • new image_2

    Reviewed by azeek at 2022-02-15 03:34

Related

Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Apr 16, 2021
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Jun 27, 2022
Loading Animation With Flutter

Flutter Loading Animation loading.ista.mp4 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few re

Mar 30, 2022
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web

Flutter EasyLoading English | 简体中文 Live Preview ?? https://nslog11.github.io/flutter_easyloading Installing Add this to your package's pubspec.yaml fi

Jun 22, 2022
A Flutter package with a selection of simple yet very customizable set of loading animations.
A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

May 31, 2022
A Flutter library for loading skeletons

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Jan 6, 2022
Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.
Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.

loadinglistview This package provide an easy way to show loading indicator(Widget) in a listview or a gridview while the app is still fetching the rea

Dec 8, 2021
A collection of awesome flutter loading animation
A collection of awesome flutter loading animation

loading_indicator_view A collection of awesome flutter loading animation Demo Usage loading_indicator_view: ^1.1.0 Animation types Type Type Type Typ

May 15, 2022
Help you to build pull-down refresh and pull-up loading in the simplest way.
Help you to build pull-down refresh and pull-up loading in the simplest way.

frefresh Help you to build pull-down refresh and pull-up loading in the simplest way. Although unprecedented simplicity, but the effect is amazing. It

Jun 15, 2022
Android loading animations
Android  loading animations

Android-SpinKit Android loading animations(I wrote a android edition according SpinKit) Demo Apk Preview Gradle Dependency dependencies { implement

Jun 24, 2022