flutter_placeholder_textlines 1.0.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 89

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.

[1.0.4] - 25/02/20 #

  • Improve performance for not animated widgets.

[1.0.3] - 30/01/20 #

  • Fixed issue where context was expected but null was found
  • Fixed issue where each line was rebuild with a different width every time a parent widget rebuild it's state, added a property to enable this behaviour if wanted (rebuildOnStateChange)
  • Updated README.md

[1.0.2] - 26/01/20 #

  • Dispose animation controller

[1.0.1] - 26/01/20 #

  • Fix unexported widget

[1.0.0] - 25/01/20 #

  • Initial release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_placeholder_textlines/placeholder_lines.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    String title = "flutter_placeholder_textlines Demo";
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                children: <Widget>[
                  _buildSubtitle("Centered"),
                  _buildSimpleTextPlaceholder(TextAlign.center),
                  _buildSubtitle("Left"),
                  _buildSimpleTextPlaceholder(TextAlign.left),
                  _buildSubtitle("Right"),
                  _buildSimpleTextPlaceholder(TextAlign.right),
                  _buildSubtitle("Change color/size"),
                  _buildCustomColorSizePlaceholder(),
                  _buildSubtitle("Animated"),
                  _buildAnimated(),
                  _buildSubtitle("Card Example"),
                  _buildCardExample(),
                  SizedBox(
                    height: 20,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  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 AnimatedWrapper();
  }

  _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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class AnimatedWrapper extends StatefulWidget {
  const AnimatedWrapper({
    Key key,
  }) : super(key: key);

  @override
  _AnimatedWrapperState createState() => _AnimatedWrapperState();
}

class _AnimatedWrapperState extends State<AnimatedWrapper> {
  bool _animated = true;
  @override
  void initState() {
    super.initState();
    _changeState();
  }

  _changeState() {
    setState(() {
      _animated = !_animated;
    });
    Future.delayed(Duration(seconds: 5)).then((_) => _changeState());
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      child: PlaceholderLines(
        count: 3,
        animate: _animated,
        color: Colors.purple,
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_placeholder_textlines: ^1.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_placeholder_textlines/flutter_placeholder_textlines.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
79
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
89
Learn more about scoring.

We analyzed this package on Jul 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • flutter_placeholder_textlines that is a package requiring null.

Health suggestions

Format lib/flutter_placeholder_textlines.dart.

Run flutter format to format lib/flutter_placeholder_textlines.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test