flutter_shimmer 1.3.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

flutter_shimmer #

flutter_shimmer package for creating Shimmer effect that indicate a loading status, so instead of using ProgressBar or usual loader use Shimmer for a better design and user interface.

Show some ❤️ and star the repo to support the project #

# Shimmer Mode# Screenshot# Code Example
# Play Store ShimmerPlayStoreShimmer()
# Light Mode ShimmerListTileShimmer()
# Dark Mode ShimmerListTileShimmer(isDarkMode: true)
# Purplish Mode ShimmerListTileShimmer(isPurplishMode: true)
# Purplish(Dark) Mode ShimmerListTileShimmer(isPurplishMode: true,isDarkMode: true)
# CustomColor ModeProfileShimmer(hasCustomColors: true,
      colors: [Color(0xFF651fff), Color(0xFF834bff), Color(0xFF4615b2)],
    ),                                      |

      // Step 1: set hasCustomColors property to true
      hasCustomColors: true,
      // Step 2: give 3 colors to colors property
      colors: [
        // Dark color
        Color(0xFF618833),
        // light color
        Color(0xFFa2cf6e),
        // Medium color
        Color(0xFF8bc34a)
      ],
      hasBottomLines: true,
      // isDarkMode: true,
    ),|

Get Started #

 #Color Mode
     There are three color mode in the flutter_shimmer package
      1. Light Mode
      2. Dark Mode
      3. Purplish Mode
      4. Custom Color Mode (New)
# Optional Options:
    [isRectBox]: when it is true then it will show Rectancle shape else(false) show circle shape by defult its value false
    [isDarkMode]: when it is true then it will use black bg color otherwise it use transparent color by defult its value false
    [isPurplishMode]: when it is true then it will use little bit purplish bg color otherwise it use transparent color by defult its value false
    [isDisabledAvatar]: when it is true then it will hide circle avatar by default it's false
    [isDisabledButton]: Note:- this property only used in ListTileShimmer. when it's true then it will hide right side button shape shimmer from ListTileShimmer by default it's contain false value.
    [beginAlign]: it will set the begin value for gradientColor by defult its value Alignment.topLeft
    [endAlign]: it will set the end value for gradientColor by defult its value Alignment.bottomRight
    [hasBottomBox]: when it is true then it will show bottom Rect style Boxes otherwise its hide the Boxes by defult its value false
    [padding]: it wiil set the padding of parent container by default its value 16.0 from all side(left,right,top,bottom)
    [margin]: it wiil set the margin of parent container by default its value 16.0 from all side(left,right,top,bottom)
    [hasCustomColors]: it will allow you to use custom colors by default its value is false. set true if you want to use your own custom colors
    [colors]: it will contains 3 colors list if you set "hasCustomColors" Property to true the your next step is give the list of colors to this colors property
    Note: make sure the colors property contains only 3 colors not more or lesser than 3 othewise it will use its default colors

# For Custom Colors:
      for custom colors you need to take two steps

         Step 1: set 'hasCustomColors' property to true
         Step 2: give 3 colors to 'colors' property

     # Example:
         ListTileShimmer(
          // Step 1: set hasCustomColors property to try
          hasCustomColors: true,
          // Step 2: give 3 colors to colors property
          colors: [
            // Dark color
            Color(0xFF1769aa),
            // light color
            Color(0xFF4dabf5),
            // Medium color
            Color(0xFF2196f3)
          ],
        ),




1. ProfileShimmer #

  1. Light Mode
    ProfileShimmer(),

  2. Dark Mode
    ProfileShimmer( isDarkMode: true,),

  3. PurplishMode with light Background

     ProfileShimmer(
      isPurplishMode: true,
   ),

  5. PurplishMode with dark Background

     ProfileShimmer(
      isPurplishMode: true,
      isDarkMode:true
   ),

 6. With Bottom Lines:

    ProfileShimmer(
      hasBottomLines: true,
   ),

 7. Combination of all options

    ProfileShimmer(
      isPurplishMode: true,
      hasBottomLines: true,
      isDarkMode: true,
   ),

2. ProfilePageShimmer #

  1. Light Mode
    ProfilePageShimmer(),

  2. Dark Mode
    ProfilePageShimmer( isDarkMode: true,),

  3. PurplishMode with light Background

     ProfilePageShimmer(
      isPurplishMode: true,
   ),

  5. PurplishMode with dark Background

     ProfilePageShimmer(
      isPurplishMode: true,
      isDarkMode:true
   ),

 6. With Bottom Boxes:

    ProfilePageShimmer(
      hasBottomBox: true,
   ),

 7. Combination of all options

    ProfilePageShimmer(
      isPurplishMode: true,
      hasBottomLines: true,
      isDarkMode: true,
   ),

3. VideoShimmer #

  1. Light Mode
    VideoShimmer(),

  2. Dark Mode
    VideoShimmer( isDarkMode: true,),

  3. PurplishMode with light Background

     VideoShimmer(
      isPurplishMode: true,
   ),

  5. PurplishMode with dark Background

     VideoShimmer(
      isPurplishMode: true,
      isDarkMode:true
   ),

 6. With Bottom Lines:

    VideoShimmer(
      hasBottomLines: true,
   ),

 7. Combination of all options

    VideoShimmer(
      isPurplishMode: true,
      hasBottomLines: true,
      isDarkMode: true,
   ),

4. ListTileShimmer #

  1. Light Mode
    ListTileShimmer(),

  2. Dark Mode
    ListTileShimmer( isDarkMode: true,),

  3. PurplishMode with light Background

     ListTileShimmer(
      isPurplishMode: true,
   ),

  5. PurplishMode with dark Background

     ListTileShimmer(
      isPurplishMode: true,
      isDarkMode:true
   ),

 6. With Bottom Lines:

    ListTileShimmer(
      hasBottomLines: true,
   ),

 7. Combination of all options

    ListTileShimmer(
      isPurplishMode: true,
      hasBottomLines: true,
      isDarkMode: true,
   ),

5. PlayStoreShimmer #

  1. Light Mode
    PlayStoreShimmer(),

  2. Dark Mode
    PlayStoreShimmer( isDarkMode: true,),

  3. PurplishMode with light Background

     PlayStoreShimmer(
      isPurplishMode: true,
   ),

  5. PurplishMode with dark Background

     PlayStoreShimmer(
      isPurplishMode: true,
      isDarkMode:true
   ),

 6. With Bottom Lines:
         note:   By deafult both lines are true

   a) it will remove only first bottom line
    ListTileShimmer(
      hasBottomFirstLine:false
     ),

  b) it will remove only second bottom line
     ListTileShimmer(
      hasBottomSecondLine:false
     ),

  c) it will remove both bottom line
     ListTileShimmer(
      hasBottomFirstLine:false,
      hasBottomSecondLine:false
     ),

 7. With Multiple options

    PlayStoreShimmer(
      isPurplishMode: true,
      hasBottomLines: true,
      isDarkMode: true,
   ),
   Thank for your love and support
   if you have any suggestions let me know

[1.0.0] - TODO: Add release date. #

  • TODO: Describe initial release.

[1.0.1] - TODO: Add release date. #

  • TODO: Describe initial release.

[1.1.0] - TODO: Add release date. #

  • TODO: Custom Colors Feature added.

[1.1.1] - TODO: Add release date. #

  • TODO: Typo Mistake remove.

[1.2.0] - TODO: Add release date. #

  • TODO: disableAvatar option added in ListTileShimmer

[1.3.0] - TODO: Add release date. #

  • TODO: PlayStoreShimmer Added

example/lib/main.dart

// import 'package:example/text.dart';
import 'package:example/darkMode.dart';
import 'package:example/purplishMode.dart';
import 'package:flutter/material.dart';
import 'package:flutter_shimmer/flutter_shimmer.dart';
import 'custom_color.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isDarkMode = false;
  bool isPurplishMode = false;
  bool isCustomColors = false;

  @override
  void initState() {
    super.initState();
    setState(() {
      this.isCustomColors = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter_shimmer",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        // backgroundColor: Colors.black,
        appBar: AppBar(
          title: Text("Flutter_Shimmer"),
        ),
        body: isCustomColors
            ? CustomColors()
            : isPurplishMode
                ? PurplishMode()
                : isDarkMode
                    ? DarkMode()
                    : ListView(
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.all(16.0),
                            child: Text(
                              "ListTileShimmer",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          ListTileShimmer(

                              // isPurplishMode: true,
                              ),
                          Divider(),
                          Container(
                            padding: EdgeInsets.all(16.0),
                            child: Text(
                              "YoutubeShimmer",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          YoutubeShimmer(
                              // isPurplishMode: true,
                              // isDarkMode: true,
                              ),
                          Divider(),
                          Container(
                            padding: EdgeInsets.all(16.0),
                            child: Text(
                              "VideoShimmer",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          VideoShimmer(
                              // isPurplishMode: true,
                              // isDarkMode: true,
                              ),
                          Divider(),
                          Container(
                            padding: EdgeInsets.all(16.0),
                            child: Text(
                              "ProfileShimmer",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          ProfileShimmer(
                            // isPurplishMode: true,
                            // isDarkMode: true,
                            hasCustomColors: true,
                            colors: [
                              Color(0xFF651fff),
                              Color(0xFF834bff),
                              Color(0xFF4615b2)
                            ],
                          ),
                          Divider(),
                          Container(
                            padding: EdgeInsets.all(16.0),
                            child: Text(
                              "YoutubeShimmer(With Bottom Lines)",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          ProfileShimmer(
                            // isPurplishMode: true,
                            hasBottomLines: true,
                            // isDarkMode: true,
                          ),
                          Divider(),
                          Container(
                            padding: EdgeInsets.all(16.0),
                            child: Text(
                              "ProfilePageShimmer",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          ProfilePageShimmer(),
                          Divider(),
                          Container(
                            padding: EdgeInsets.all(16.0),
                            child: Text(
                              "ProfilePageShimmer(With Bottom Box)",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          ProfilePageShimmer(
                            // isPurplishMode: true,
                            hasBottomBox: true,
                            // isDarkMode: true,
                          ),
                        ],
                      ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_shimmer: ^1.3.0

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_shimmer/flutter_shimmer.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
85
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]
93
Learn more about scoring.

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

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

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
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test