A Flutter Package providing Avatar Glow Widget

Overview

Avatar Glow GitHub stars Twitter Follow GitHub last commit Website shields.ioOpen Source Love

This Flutter package provides a Avatar Glow Widget with cool background glowing animation.

Live Demo: https://apgapg.github.io/avatar_glow/

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:

Version

dependencies:
  avatar_glow: <latest version>

To use the latest changes:

  avatar_glow:
    git:
      url: https://github.com/apgapg/avatar_glow
      ref: master

Usage

Import this class

import 'package:avatar_glow/avatar_glow.dart';

Usage is simple. Avatar Glow is a widget offering different customizable optional parameters with child displayed at its center.

PieChart

- Simple Implementation

AvatarGlow(
 endRadius: 60.0,
 child: Material(     // Replace this child with your own
   elevation: 8.0,
   shape: CircleBorder(),
   child: CircleAvatar(
     backgroundColor: Colors.grey[100],
     child: Image.asset(
       'assets/images/dart.png',
       height: 50,
     ),
     radius: 30.0,
   ),
 ),
),

- Full Implementation

AvatarGlow(
 glowColor: Colors.blue,
 endRadius: 90.0,
 duration: Duration(milliseconds: 2000),
 repeat: true,
 showTwoGlows: true,
 repeatPauseDuration: Duration(milliseconds: 100),
 child: Material(     // Replace this child with your own
   elevation: 8.0,
   shape: CircleBorder(),
   child: CircleAvatar(
     backgroundColor: Colors.grey[100],
     child: Image.asset(
       'assets/images/flutter.png',
       height: 60,
     ),
     radius: 40.0,
   ),
 ),
),

My Flutter Packages

  • json_table GitHub stars Create Flutter Json Table from json map directly.
  • pie_chart GitHub stars Flutter Pie Chart with cool animation.
  • search_widget GitHub stars Flutter Search Widget for selecting an option from list.
  • animating_location_pin GitHub stars Flutter Animating Location Pin Widget providing Animating Location Pin Widget which can be used while fetching device location.

My Flutter Apps

👍 Contribution

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -m 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request
Comments
  • LateInitializationError: Field 'alphaAnimation' has not been initialized.

    LateInitializationError: Field 'alphaAnimation' has not been initialized.

    I got the next error after updating to version 2.0.0:

    The following LateError was thrown building AvatarGlow(dirty, state: _AvatarGlowState#4a8d4):
    LateInitializationError: Field 'alphaAnimation' has not been initialized.
    
    The relevant error-causing widget was: 
      AvatarGlow 
    When the exception was thrown, this was the stack: 
    #0      _AvatarGlowState.alphaAnimation (package:avatar_glow/avatar_glow.dart)
    #1      _AvatarGlowState.build (package:avatar_glow/avatar_glow.dart:140:18)
    #2      StatefulElement.build (package:flutter/src/widgets/framework.dart:4704:27)
    #3      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4587:15)
    #4      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4759:11)
    

    The error occurs when I start with animate: false

    good first issue 
    opened by AlexanderShirokih 10
  • error: The argument type 'Animation<dynamic>' can't be assigned to the parameter type 'Animation<double>'

    error: The argument type 'Animation' can't be assigned to the parameter type 'Animation'

    how can i resolve this analysis problem on this line of code:

    final Animation curve = CurvedAnimation(parent: controller, curve: Curves.decelerate);
    smallDiscAnimation = Tween(begin: (widget.endRadius * 2) / 6, end: (widget.endRadius * 2) * (3 / 4)).animate(curve)
    

    analysis problem is for this part of code : .animate(curve)

    opened by pishguy 4
  • Speed improvements and added more config

    Speed improvements and added more config

    Hi! I love the package. My changes started out from wanting to avoid calling setState after reading this article: https://medium.com/flutter-community/flutter-laggy-animations-how-not-to-setstate-f2dd9873b8fc . It now uses animatedBuilders, responds to rebuilds with new parameters via didUpdateWidget and adds two fields: curve and isAnimating. The curve is for the alpha and the isAnimating is a flag to animate the glow or not.

    opened by Nolence 4
  • Update avatar_glow.dart with Animation Container Shape as a required …

    Update avatar_glow.dart with Animation Container Shape as a required …

    …parameter to allow rectangle and circle shape

    This came about because I had a grid view that had square elements. As such a circle background glow wouldn't be the most suitable shape. This way both BoxShapes (circle and rectangle) are available.

    opened by gildurao 4
  • Fix timer issue in unit tests

    Fix timer issue in unit tests

    Create a Timer variable to store the repeatPauseDuration.

    We can then cancel this Timer in the onDispose() method.

    This fixes the FakeTimer error when using this Widget in unit tests

    opened by jakeBrightHR 1
  • [Android 12] Duration issue (solved by updating OS)

    [Android 12] Duration issue (solved by updating OS)

    Hello, First of all, thanks a lot for this awesome package ! 🙏🏻

    Since I've upgraded my device for Android 12, I've been having rendering issues. The duration property doesn't seem to work anymore.

    Code

    AvatarGlow(
      glowColor: Colors.white,
      endRadius: 36.0,
      duration: Duration(milliseconds: 2000),
      repeat: true,
      showTwoGlows: true,
      repeatPauseDuration: Duration(milliseconds: 100),
      child: Icon(
          Icons.play_arrow_rounded,
          size: 50,
          color: Colors.white,
    ))
    

    Video

    https://user-images.githubusercontent.com/48014443/141335765-84e0f04c-481b-4f1a-ae6f-73b7b82dd7cb.mp4

    Config

    Device: Pixel 4A (5G) OS: Android 12 Flutter version: 2.2.1 avatar_glow: ^2.0.1

    opened by keShraa 1
  • [Activity] Is this project still active?

    [Activity] Is this project still active?

    I have been using this library since 2019 and i wish to add some good features to it. Just wanted to know if the owner of the package is currently active in GitHub.

    opened by delikin 1
  • Null Exception after Delay

    Null Exception after Delay

    Thanks for you work on this widget. I am enjoying using it.

    I had multiple AvatarGlow widgets in a scrollable list and as the list was scrolled, Flutter automatically calls dispose() on those widgets which go off the screen. There is a small bug in which you need to check if the widget is still 'mounted' after the Future.delay() async call. Without this, it was throwing a null exception as it was trying to call 'controller.reset()' after 'controller.dispose()' had been called. Just add the following check inside initState():

    await Future.delayed(
      widget.repeatPauseDuration ?? Duration(milliseconds: 100));
    
    // TODO: begin fix
    if (mounted) {
      controller.reset();
      controller.forward();
    }
    // TODO: end fix
    

    mounted is a built-in Widget property which tells you if the Widget has been disposed.

    opened by scottdewald 1
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 27% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_512.png | 14.45kb | 9.69kb | 32.93% | | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_1024.png | 45.89kb | 31.58kb | 31.18% | | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_16.png | 1.40kb | 1.00kb | 28.62% | | /example/assets/images/love.png | 4.52kb | 3.32kb | 26.62% | | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_256.png | 5.79kb | 4.27kb | 26.23% | | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_128.png | 3.20kb | 2.60kb | 18.77% | | /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 10.85kb | 10.68kb | 1.62% | | | | | | | Total : | 86.11kb | 63.14kb | 26.67% |


    📝docs | :octocat: repo | 🙋issues | 🏅swag | 🏪marketplace

    opened by imgbot[bot] 0
  • fix/late timer issue

    fix/late timer issue

    Fixing an issue that was introduced in my previous PR.

    Disposing of the AvatarGlow widget before _repeatPauseTimer was initialised would cause a LateInitializationError to occur.

    I've changed the _repeatPauseTimer to be nullable. This allows the Timer to be null and also be safely disposed.

    opened by jakeBrightHR 3
  • [Feature request] glowDuration or numberOfRepeats

    [Feature request] glowDuration or numberOfRepeats

    by using duration we set the animation duration of a single ripple effect. But I want the AvatarGlow to make ripple effect 5 times, each with a 1 second duration For the current API we can not do this. Can you please expose numberOfRepeats?

    Also null safety version works, so maybe you can update the package's default as the null safe version? Thanks

    waiting-for-customer-response 
    opened by aytunch 5
  • How to start and pause glow?

    How to start and pause glow?

    In advance, Thx to contribute this awesome widget for us. I want it to use as a button working effects that people get noticed it is on the working. So I write code like below

    AvatarGlow(
                  glowColor: Colors.blue,
                  endRadius: 90.0,
                  repeat: _isWorking? true: flase,
                  child: Padding(
                  ...button images
                 )
    )
    

    but the thing is that it works only one time. So I want to know how to the effects on and off?

    Thx :D

    opened by ChrisDongWooKim 0
Owner
Ayush P Gupta
Flutter || Node || Vue || Typescript
Ayush P Gupta
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.

Motion Tab Bar A beautiful animated widget for your Flutter apps Preview: | | Getting Started Add the plugin: dependencies: motion_tab_bar: ^0.1.5 B

Rezaul Islam 237 Nov 15, 2022
This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts.

This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts. Installing 1. Depend on it Add th

Aadarsh Patel 13 Nov 25, 2020
🔔 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

Ayush Agarwal 1.4k Jan 6, 2023
Dart package that converts number to words (English language)A Flutter/Dart package that converts number to words (English language)

flutter_number_to_words_english A Flutter/Dart package that converts number to words (English language) Flutter (Null Safety) Flutter (Channel stable,

Ke Nguyen 4 Dec 9, 2022
A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!

sliding_up_panel A draggable Flutter widget that makes implementing a SlidingUpPanel much easier! Based on the Material Design bottom sheet component,

Akshath Jain 1.2k Jan 7, 2023
Circular Reveal Animation as Flutter widget!

Circular Reveal Animation Circular Reveal Animation as Flutter widget! Inspired by Android's ViewAnimationUtils.createCircularReveal(...). Статья с оп

Alexander Zhdanov 48 Aug 15, 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 widget provided to the flutter scroll component drop-down refresh and pull up load.

flutter_pulltorefresh Intro a widget provided to the flutter scroll component drop-down refresh and pull up load.support android and ios. If you are C

Jpeng 2.5k Jan 5, 2023
Highly customizable, feature-packed calendar widget for Flutter

TableCalendar Highly customizable, feature-packed calendar widget for Flutter. TableCalendar with custom styles TableCalendar with custom builders Fea

Aleksander Woźniak 1.5k Jan 7, 2023
Flutter 3D Flip Animation Widget

flutter_flip_view This is a flutter Widget base on pure Dart code that provides 3D flip card visuals. Usage add package in your pubspec.yaml dependenc

WosLovesLife 57 Dec 30, 2022
A simple toggle switch widget for Flutter.

Toggle Switch A simple toggle switch widget. It can be fully customized with desired icons, width, colors, text, corner radius, animation etc. It also

Pramod Joshi 84 Nov 20, 2022
Base Flutter widget which triggers rebuild only of props changed

pure_widget Base widget which triggers rebuild only if props changed Installation pubspec.yaml: dependencies: pure_widget: ^1.0.0 Example import 'da

Andrei Lesnitsky 9 Dec 12, 2022
A Stepper Widget in Flutter using GetX

Stepper Flutter GetX Donate If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a

Ripples Code 0 Nov 27, 2021
A Flutter dropdown widget.

Flutter Dropdown_Below A Flutter Dropdown library which is customize flutter dropdownbutton widget. Options options description type required itemWidt

Denny Hong 27 Sep 7, 2022
Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs.

Flutter DropdownButton2 Intro Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs. Featur

AHMED ELSAYED 125 Jan 4, 2023
Flutter widget that automatically resizes text to fit perfectly within its bounds.

ONLY FOR FLUTTER WEB Flutter widget that automatically resizes text to fit perfectly within its bounds. Show some ❤️ and star the repo to support the

Rebar Ahmad 4 Jan 6, 2022
Flutter fluid slider - A fluid design slider that works just like the Slider material widget

Fluid Slider for Flutter Inspired by a dribbble by Virgil Pana. A fluid design s

Jay Raj 2 Feb 18, 2022
A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

HeavenOSK 97 Jan 6, 2023