Lazy Loading Flutter Plugin

Overview

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.

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

Dec 26, 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

Jan 3, 2023

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

Jan 2, 2023

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

Nov 2, 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,

Jan 7, 2023

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

Jan 6, 2023
Comments
  • Adds rudimentary null-safety compatibility

    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.

    opened by tek08 1
  • add property is lineSpaceHeight and borderRadius.

    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

    opened by azeek 0
  • Flutter 3.0 build error

    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);
    
    opened by tetianazakhozhaeva 0
  • add property is lineSpaceHeight and borderRadius and animate duration.

    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

    opened by azeek 0
Owner
Victor HG
Victor HG
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

Jimmy Aumard 25 Apr 16, 2021
✨ 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:

Jeremiah Ogbomo 2.7k Dec 30, 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

Join Flutter 17 Oct 13, 2022
✨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

nslog11 1k Jan 9, 2023
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

Andre Cytryn 171 Sep 23, 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

Daniel 0 Jan 6, 2022
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

null 3 Dec 8, 2021
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

Vans Z 84 Dec 6, 2022
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

Fliggy Mobile 427 Nov 26, 2022
Android loading animations

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

ybq 8.4k Dec 30, 2022