apgapg / avatar_glow Goto Github PK

AvatarGlow(
glowColor: participant.isMicrophoneEnabled() ? Color(0XFF6ffc03) : Colors.red,
child: Icon(
Icons.mic,
size: 240,
color: Colors.white,
),
animate: participant.isMicrophoneEnabled(),
),

I want to use the endRadius property because right now the glow ripples are too wide spread & I tried dropping down the version but then the positioning turns really bad for the icon. Also, is there any way to reduce the icon size without it affecting AvatarGlow because right now when I reduce the icon size the AvatarGlow's size also reduces.

how can i avoid resize floatingActionButton when thats child of avatar_grow? thats cause of make the larger margin

ScreenShot

Scaffold(
  key: _scaffoldKey,
  primary: true,
  resizeToAvoidBottomPadding: false,
  appBar: ApplicationToolbar(title: title),
  floatingActionButton: AvatarGlow(
    startDelay: Duration(milliseconds: 1000),
    glowColor: Colors.blue,
    endRadius: 90.0,
    duration: Duration(milliseconds: 2000),
    repeat: true,
    showTwoGlows: true,
    repeatPauseDuration: Duration(milliseconds: 100),
    child: Builder(
        builder: (context) => FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                _settingModalBottomSheet(context);
              },
            )),
  ),
  floatingActionButtonLocation:
      FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: AppBottomNavigationBar(),
  drawer: AppDrawer(),
  body: _fragments[_currentIndex],
),

how can we using feature like with z-index to avoid resize?

latest build looks like this?

So I was using this plugin for my profile avatar which was placed in the upper center of the screen, I'm readjusting my layout and now the profile avatar is close to the edge of screen. Unless I want a super small avatar picture I cant adjust the radius enough that the invisible area around pic gets pushed out away from the edge in order to be able to see the glow coming out from under the picture.

Am I missing something or is this just how the plugin is supposed to work?

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

Looks like the avartglow widget is making the entire ui refresh continuously.

final decoration = BoxDecoration( // ADD BORDER_RADIUS PROPERTY HERE shape: widget.shape, // If the user picks a curve that goes below 0 or above 1 // this opacity will have unexpected effects without clamping color: widget.glowColor.withOpacity( _alphaAnimation.value.clamp( 0.0, 1.0, ), ), );

I made a fork that uses OveflowBox in place of the SizedBox. Now if your widget has no space around it you will still see the glow.

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.

As far as I'm aware, the CircleAvatar class does not have a property shape which you use in the Simple Implementation example.

I am trying to use this in the black background. However, I barely see the animation! Other than this, I am super duper happy with the widget tho.

Hey, i want to remove the searchbar, because my iconpack is so small. Is it possible?

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)

          My widget looks like this in 2.0.2:

AvatarGlow(
     glowColor: const Color.fromARGB(255,69, 4,129),
     endRadius: 50.0,
     duration: const Duration(milliseconds: 2000),
     repeat: true,
     showTwoGlows:true,
     animate: false,
     startDelay: const Duration( milliseconds: 100),
     child: InkWell(
             child: SizedBox(
                  width: min(70 * chargingStationController.ratio.value, 70 / chargingStationController.scaleValue.value),
                  height: min(70 * chargingStationController.ratio.value, 70 / chargingStationController.scaleValue.value),
                  child: Stack(children: [
                              const CustomSvgAsset(  menuSvgPath.backgroundMap,  ),
                              CustomSvgAsset(  getIcon(spaceMap.spaceUse),  color: getColor(spaceMap),  ),
                                 ], )),
              onTap: () {})),

So basically it's an AvatarGlow with SvgPicture.asset (from 'package:flutter_svg/flutter_svg.dart') as child.
When animate is set to false, it shows "only" the svg without any painting around it.
When animate is set to true, it shows the svg with the expected glow effect.

Now, in 3.0.1, my widget looked like this :

AvatarGlow(
     glowColor: const Color.fromARGB(255,69, 4,129),
     duration: const Duration(milliseconds: 2000),
     repeat: true,
     glowCount:2,
     animate: false,
     child: InkWell(
             child: SizedBox(
                  width: min(70 * chargingStationController.ratio.value, 70 / chargingStationController.scaleValue.value),
                  height: min(70 * chargingStationController.ratio.value, 70 / chargingStationController.scaleValue.value),
                  child: Stack(children: [
                              const CustomSvgAsset(  menuSvgPath.backgroundMap,  ),
                              CustomSvgAsset(  getIcon(spaceMap.spaceUse),  color: getColor(spaceMap),  ),
                                 ], )),
              onTap: () {})),

Now, when animate is set to false, it shows the svg with a circle around it painted in glowColor.
When animate is set to true, it shows the svg with the expected glow effect.

Another issue with 3.0.1 is that destroys the position of the widget when put in Stack.

In fact, my main widget is a constrained InteractiveViewer with Center as child, then Stack with background image as a first child and then X Positionned widget with AvatarGlow as child. In 2.0.2 the widget are displayed at the expected position. In 3.0.1 there are not anymore. I could maybe dive more into it to make it work but that mean i would have to refactor a lot and don't have much time, so i keep 2.0.2 for now.

SizedBox(child : 
  InteractiveViewer(child : 
    Center(child:
      Stack(children : [
        Image(),
        Positionned(child:AvatarGlow(....)),
        Positionned(child:AvatarGlow(....)),
        Positionned(child:AvatarGlow(....)),
      ])
    )
  )
)

First image (on left) is 2.0.2
Second image (on right) is 3.0.1

Same AvatarGlow are animated, you can see the Widget are not on the good position.
Non animated AvatarGlow have a static circle painted around it.

I think my case is really special with the positionned thing. But the circle painted when non animated should touch more user.

Originally posted by @Fourchettedev in #21 (comment)

I need display animated only when one flag is true, and display animated background opened if false. Is it possible?

Hi, is Null safety migration on roadmap?
Thanks

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

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

Config

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

I would like to confirm that the performance of the scrollbar becomes really janky when more than 3-4 avatars are glowing at the same time.

It's illiterate to call this "glow", nothing to do with actual glow effect.

glow

https://github.com/AmirJabbari/flutter-glow
https://github.com/saschta/flutter_glowy_borders

pulse

https://www.geeksforgeeks.org/pulse-animation-view-in-android/
https://github.com/booncol/pulsator
https://github.com/gskinner/flutter_animate

Hey everyone,

Just wanted to give you a heads up that it's been over 18 months since the project was last updated, and the latest stable version came out in Oct 2021. I'm interested to know if there are any future plans for the project or if there's any way I can contribute to its development.

Thanks for your dedication to this project!

Hi, very cool package thanks for this. I need more than two glows. I see there is only showTwoGlows. Is it supported/possible to increase glow numbers?

how do i turn the circles on the back into a heart shape?

We can have an option for this so that the glow animation does not suddenly disappear.

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

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.