[Flutter] Flutter uses Shimmer to implement loading animation placeholders with flash effects

[Flutter] Flutter uses Shimmer to implement loading animation placeholders with flash effects

Article directory

    • I. Introduction
    • 2. Why choose shimmer and its installation and basic use?
      • 1. The value of glitter effect in UI design
      • 2. Comparison of shimmer with other similar tools
      • 3. How to install shimmer in Flutter project
      • 4. Basic usage and code examples
    • 3. Deeply understand the properties of shimmer
      • 1. The role of baseColor and highlightColor
      • 2. How to customize the shimmer effect
    • 4. Usage in actual business
      • 1. How to use shimmer as placeholder when loading data
      • 2. Use shimmer in combination with other Flutter components
    • 5. Complete example
    • 6. Summary

1. Preface

Hello everyone, I am Xiaoyu Qingnian. Today I want to share with you a very practical Flutter package – shimmer. This package allows you to easily add awesome glitter effects to your Flutter projects. This effect is widely used in many applications, such as as a placeholder for loading animations.

Version information:

  • Flutter version: 3.10
  • Dart version: 3.0
  • shimmer package version: 3.0.0

Highlights of the article will include:

  • Why choose shimmer
  • How to install and basic use
  • Learn more about its properties
  • How to apply it in actual business
  • A complete business code example

Are you eager to become a Flutter master and want to master more cutting-edge techniques and best practices? Now, your chance has come!

Flutter from zero to one: a complete guide from basic entry to application launch We are actively recruiting participants!

? This column not only includes comprehensive Flutter learning resources, but also practical code examples and in-depth analysis tutorials.
? The column content will be continuously updated and the price will increase accordingly. Join now to enjoy the best price and seize your opportunity!
? Want to interact with other Flutter learners? Click here to join our discussion group to grow and improve together.

Don’t wait any longer, let’s start today and start the wonderful learning journey of Flutter together!

2. Why choose shimmer and its installation and basic use

1. The value of flash effect in UI design

Shimmer is often used as an elegant loading placeholder in UI design, which can effectively improve the user experience. While the data is still loading, the flash effect can attract the user’s attention and reduce the impatience of waiting.

2. Comparison of shimmer with other similar tools

There are many tools and libraries on the market to achieve shimmer effects, but shimmer has become the first choice for developers because of its simplicity, ease of use, and high customizability.

3. How to install shimmer in Flutter project

Installing the shimmer package is as simple as adding the following code to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  shimmer: ^3.0.0

Then run flutter pub get to complete the installation.

4. Basic usage and code examples

Using shimmer is very simple. Here is a basic code example:

import 'package:shimmer/shimmer.dart';

SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text(
      'glitter effect',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
);

In this way, you have successfully added a basic glitter effect to your Flutter project.

This is a blog published by Xiaoyu Youth on CSDN in 2023. Due to the rampant infringement of collection sites, if you did not see this article on CSDN, please contact me through CSDN. Thank you for your support.

3. Learn more about shimmer properties

1. The role of baseColor and highlightColor

In shimmer, baseColor and highlightColor are two very critical properties. baseColor defines the base color of the text or component, while highlightColor defines the color of the highlight or flash. By adjusting these two colors, you can easily create a unique glitter effect for your application.

For example, if you wanted a blue to green glitter effect, you could set it up like this:

Shimmer.fromColors(
  baseColor: Colors.blue,
  highlightColor: Colors.green,
  child: ...
);

2. How to customize the shimmer effect

In addition to the basic color properties, shimmer also provides other properties, such as direction, loop and period, allowing You further customize the glitter effect. For example, you can change the direction of the flash, set the number of cycles, or adjust the speed of the flash.

4. Usage in actual business

1. How to use shimmer as a placeholder when loading data

In many applications, using shimmer as a placeholder while data is loading can provide a better user experience. For example, while your app is getting data from the server, you can display a text or image with a shimmer effect until the data is loaded.

2. Use shimmer in combination with other Flutter components

shimmer can not only be used with text, but can also be used in conjunction with other Flutter components, such as ListView, Card or Image . This gives you unlimited room for creativity and makes your app look more professional and attractive.

5. Complete example

In this example, I’ll show how to use shimmer in a simple news application. While the news article is loading, we will display a title and summary with a shimmer effect.

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

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

class MyApp extends StatelessWidget {<!-- -->
  @override
  Widget build(BuildContext context) {<!-- -->
    return MaterialApp(
      title: 'Shimmer Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NewsPage(),
    );
  }
}

class NewsPage extends StatelessWidget {<!-- -->
  @override
  Widget build(BuildContext context) {<!-- -->
    return Scaffold(
      appBar: AppBar(
        title: Text('News List'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {<!-- -->
          return Shimmer.fromColors(
            baseColor: Colors.grey[300]!,
            highlightColor: Colors.grey[100]!,
            child: ListTile(
              title: Container(
                color: Colors.white,
                height: 20.0,
                width: double.infinity,
              ),
              subtitle: Container(
                color: Colors.white,
                height: 15.0,
                width: double.infinity,
              ),
            ),
          );
        },
      ),
    );
  }
}

The running results are as follows:

6. Summary

After the above introduction, I believe you already have a relatively in-depth understanding of shimmer. Not only does this package provide a simple and efficient way to increase the user experience of your Flutter projects, but its high customizability also makes it easy to create unique glitter effects for your app.

Interested in Flutter and eager to explore and learn more? Flutter from zero to one: a complete guide from basic entry to application launch is your perfect starting point!

In this column, you will find a wealth of Flutter learning resources, ranging from code examples to in-depth technical explanations.
? Want to learn how to build great apps with Flutter? All the tips and answers are waiting for you in our column!
Don’t hesitate any longer, the column content will be continuously updated and the price will gradually increase. Join now to enjoy the best price and start your Flutter exploration journey!

Want to know more? Click here to view Flutter Developer 101: Getting Started Booklet & Column Guide.

Also, don’t forget to click here to Join our discussion group to communicate, learn and grow together with other Flutter enthusiasts!