Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transparent background for children #298

Open
NaarGes opened this issue Mar 9, 2023 · 4 comments
Open

Transparent background for children #298

NaarGes opened this issue Mar 9, 2023 · 4 comments

Comments

@NaarGes
Copy link

NaarGes commented Mar 9, 2023

Hi,
here is my code so far:

floatingActionButton: SpeedDial(
                  openCloseDial: isDialOpen,
                  icon: FontAwesomeIcons.plus,
                  activeIcon: FontAwesomeIcons.xmark,
                  spacing: 30,
                  mini: false,
                  childPadding: const EdgeInsets.all(4.0),
                  childMargin: const EdgeInsets.all(8.0),
                  spaceBetweenChildren: 4,
                  direction: SpeedDialDirection.up,
                  renderOverlay: true,
                  overlayColor: LightPalette.overlayColor,
                  overlayOpacity: 0.9,
                  useRotationAnimation: true,
                  onOpen: () => debugPrint('OPENING DIAL'),
                  onClose: () => debugPrint('DIAL CLOSED'),
                  foregroundColor: Theme.of(context).colorScheme.background,
                  backgroundColor: Theme.of(context).colorScheme.primary,
                  elevation: 8,
                  children: [
                    SpeedDialChild(
                      label: 'Create Event',
                      child: const FaIcon(FontAwesomeIcons.solidCalendarCheck),
                      backgroundColor: Colors.transparent,
                      foregroundColor: Colors.white,
                      labelBackgroundColor: Colors.transparent,
                      labelStyle: Theme.of(context).textTheme.titleSmall?.copyWith(color: Colors.white),
                    ),
                    SpeedDialChild(
                      label: 'Create Meeting',
                      child: const FaIcon(FontAwesomeIcons.briefcase),
                      backgroundColor: Colors.transparent,
                      foregroundColor: Colors.white,
                      labelBackgroundColor: Colors.transparent,
                      labelStyle: Theme.of(context).textTheme.titleSmall?.copyWith(color: Colors.white),
                    ),
                  ],
                ),

and this is how the result I'm getting looks like:

image

Is there any way that I can remove the shadow from labels and icons?

@prateekmedia
Copy link
Collaborator

We do have labelShadow I think.

@NaarGes
Copy link
Author

NaarGes commented Mar 10, 2023

Thanks.
The black shadow under icons aren't removable?

@prateekmedia
Copy link
Collaborator

Currently no, but you can always create a Pull request with that childShadow customizable.

@Strafe0
Copy link

Strafe0 commented Jun 29, 2023

Try this

SpeedDialChild(
  elevation: 0.0,
  labelWidget: Text('Create Event'),
  child: const FaIcon(FontAwesomeIcons.solidCalendarCheck),
  backgroundColor: Colors.transparent,
  foregroundColor: Colors.white,
  labelBackgroundColor: Colors.transparent,
  labelStyle: Theme.of(context).textTheme.titleSmall?.copyWith(color: Colors.white),
),

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants