Flutter Shimmer Effect Tutorial For Beginners

 

Flutter Shimmer :

Flutter shimmer effect provides a shiny wavering effect on the fields which are to be loaded in app, like when you are trying to load the images we create a wavering effect of the image view before the actual image is loaded.

Not only for images but also for data fields like text view’s and other place holders we can use this flutter shimmer effect, it appears as if a entire block is being loading.

This effect is in grey color slightly dark/light provided until the data is loaded and is removed once the data is applied on to the respective field.

The origin of this effect was by facebook for loading data because in facebook there is alot of data to be loaded when the user logs in so it might not look good if a single progress bar is displayed.

Almost every field is to be loaded with appropriate data according to the user flutter shimmer effect is very apt as a progress indicator which also resembles the data shape and size before loading.

 

Flutter Shimmer Video Tutorial :

Go through the below tutorial for more detailed implementation

 

Dependency :

Add the flutter shimmer widget dependency to the pubspec.yaml and also specify the version according to the latest available.

dependencies:
  flutter:
    sdk: flutter

  flutter_shimmer_widget:

 

main.dart :

Initialize the app with void main() consider the default class MyApp

void main() {
  runApp(MyApp());
}

 

Declare the class MyApp extending the StatelessWidget

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
  }
}

 

Now return a MaterialApp and provide the title ‘Shimmer’ and also specify the HomePage class

return MaterialApp(
  title: 'Shimmer',

  home: HomePage(),
);

 

Now we specify the fields on which we are going to apply shimmer effect

CardPlaceHolderWithAvatar(),

 

Here we have provided height for the image view to be provided the shimmer effect.

CardPlaceHolderWithImage(
  height: 200,
),

 

Textfield

SimpleTextPlaceholder(),

 

Inside a container consider a Column so that we can have multiple children and there we are specifying them.

 

Container(
  child: SingleChildScrollView(
    child: Column(
      children: [
        const SizedBox(
          height: 20,
        ),
        CardPlaceHolderWithAvatar(),

        CardPlaceHolderWithImage(
          height: 200,
        ),

        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: FlutterShimmnerLoadingWidget(
            count: 3,
            animate: true,
            color: Colors.grey[200],
          ),
        ),
        
        SimpleTextPlaceholder(),

      ],
    ),
  ),
),

 

Full Code :

The full code for shimmer effect is provided for integration below

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shimmer',

      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shimmer'),
      ),
      body: Container(
        child: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(
                height: 20,
              ),
              CardPlaceHolderWithAvatar(),

              CardPlaceHolderWithImage(
                height: 200,
              ),

              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: FlutterShimmnerLoadingWidget(
                  count: 3,
                  animate: true,
                  color: Colors.grey[200],
                ),
              ),

              SimpleTextPlaceholder(),

            ],
          ),
        ),
      ),
    );
  }
}

 

Output :

This screen below depicts the usage of flutter shimmer effect in your app.