darioielardi / flutter_speed_dial Goto Github PK

I have 3 speed child element. One of the element needs to be shown only if certain condition is met.
I have used ternary operator and if condition is not met then used container. It failed.

How can we implement conditional Speed child?

I use the marginBottom and marginRight to move the FAB to a new position on my screen. But it always opens the children "up". I would like to have the children open below the FAB. Is this possible?

How to use custom animated icon data? Like: add_close
Thanks.

It is impossible to toggle the speed dial menu when own label widget is tapped.
Function _toggleChildren is private.

A workaround is to rebuild the tree, but I guess it shall not be the option.
Alternatively, live with no gesture recognition on own labels.

I propose to instead of making toggleChildren function public, wrap GestureDetection with onTap function when labelWidget is passed.

My app let the user switch between the default light and dark theme. When using the latter, the labels are same color as the background and hence unreadable. Needed to explicitly set the color with labelStyle: TextStyle(color: Colors.black) to make the labels visible in both themes.

If you set the behavior of a snackbar to floating, no more snackbars will be displayed on the entire page. With a normal FloatingActionButton it will work.

How to repduce

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          snackBarTheme:
              SnackBarThemeData(behavior: SnackBarBehavior.floating)),
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter Demo")),
        body: Center(child: Text('Center')),
        floatingActionButton: Builder(
          builder: (context) => SpeedDial(
            onPress: () => Scaffold.of(context)
                .showSnackBar(SnackBar(content: Text("Text"))),
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

Hi,
is there a way to adjust the fluidity of the opening and closing animation of the menu?
It seems to me that it goes a little slow. Almost as if it were snapping.

I'd like to open the menu programmatically when the user interacts with a different widget.
Is there a way to do so?

This shows a "generic" way to send a tap to a Widget, however, I cannot set a key when creating a SpeeDial,
https://stackoverflow.com/a/50962382/634355

Thanks for you great work!

what can i do if i want this button in bottomcenter of BottomNavigationBar

Hello, thanks for the widget it's really cool.

I was wondering if there is actually a way of changing the size of the main button. If so how can be done? I didn't found anything in the docs neither in the issue tracker.

Thanks!

Steps to reproduce:

1. Implement a view with BottomNavigationBar and SpeedDial
2. Tap SpeedDial

Expected result:
Background overlay should be fullscreen

Actual result:
BottomNavigationBar is not covered by overlay and it is still accessible

When the closeManually attribute is true, the background overlay does not work.

Example:

    return Scaffold(
        floatingActionButton: SpeedDial(
          // both default to 16
          marginRight: 18,
          marginBottom: 20,
          animatedIcon: AnimatedIcons.menu_close,
          animatedIconTheme: IconThemeData(size: 22.0),
          // this is ignored if animatedIcon is non null
          // child: Icon(Icons.add),
          visible: _dialVisible,
          // If true user is forced to close dial manually 
          // by tapping main button and overlay is not rendered.
          closeManually: true,
          curve: Curves.bounceIn,
          overlayColor: Colors.black,
          overlayOpacity: 0.5,
          onOpen: () => print('OPENING DIAL'),
          onClose: () => print('DIAL CLOSED'),
          tooltip: 'Speed Dial',
          heroTag: 'speed-dial-hero-tag',
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
          elevation: 8.0,
          shape: CircleBorder(),
          children: [
            SpeedDialChild(
              child: Icon(Icons.accessibility),
              backgroundColor: Colors.red,
              label: 'First',
              labelStyle: TextStyle(fontSize: 18.0),
              onTap: () => print('FIRST CHILD')
            ),
            SpeedDialChild(
              child: Icon(Icons.brush),
              backgroundColor: Colors.blue,
              label: 'Second',
              labelStyle: TextStyle(fontSize: 18.0),
              onTap: () => print('SECOND CHILD'),
            ),
            SpeedDialChild(
              child: Icon(Icons.keyboard_voice),
              backgroundColor: Colors.green,
              label: 'Third',
              labelStyle: TextStyle(fontSize: 18.0),
              onTap: () => print('THIRD CHILD'),
            ),
          ],
        ),
    );
}

There are multiple heroes that share the same tag within a subtree.
I have different tabs, with different SpeediDial buttons, eachone with a different hero tag.

When I open the SpeedDial button in 2 different tabs and then push another screen, I get:

"There are multiple heroes that share the same tag within a subtree."

If I empty the children of the SpeedDialButtn, the issue doesn't trigger. So I guess its the hero of the SpeedDialChildren, even though I saw it's set with an index value

How can wrap Speed Dial with just FlatButton? I'm planning to make it draggable for my WebView Controls is it possible to do?

When using the bottom navigation, it's possible to have a page without a fab (fab is set to null), as implemented in the offical gallery demo app.

However, using flutter_speed_dial as the fab, when switch between pages with and without a fab, the fab flies to and from the center of the page, instead of falling down and flying back.

I cannot modify the shadow of the label here is the exemple:

Images should speak for themselves, but there are some issues with the shadow and the background gray background when opened

Hi! I am running into an issue where the children of speed dial are ignoring the shape parameter provided, although the speed dial itself is rendering its shape normally. Here is a minimum example that shows this:

import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: SpeedDial(
        animatedIcon: AnimatedIcons.menu_close,
        animatedIconTheme: const IconThemeData(size: 22.0),
        closeManually: true,
        curve: Curves.bounceIn,
        tooltip: 'Toggle options',
        backgroundColor: Colors.black,
        foregroundColor: Colors.white,
        elevation: 8.0,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        children: [
          SpeedDialChild(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
              child: Icon(Icons.accessibility),
              foregroundColor: Colors.white,
              backgroundColor: Colors.black,
              onTap: () => print('FIRST CHILD')),
        ],
      ),
    );
  }
}

How can I remove that entering and exit animation? just show fab without animating it thanks.

Currently I need to use ref: master on my pubspec.yaml instead of pointing to the current release, as I need the labelWidget: from AnimatedChild to take out the shadows from the label.
This is not best practice and our app is in production, if you need help maintaining the repo I can gladly help to publish it and keep track of latest releases and changeLog.

Great job btw, I appreciate it
😄

I need a wide rectangle like this:

I tried using
shape: RoundedRectangleBorder(side: BorderSide(width: 10))
but it only affects the border, not the shape itself.

Is there a way to make a wide rectangle with icon and text inside?

If bottomNavigationBar existsoverlay cannot be full screen

Steps to reproduce:

1. tap SpeedDial
2. tap SpeedDial again before "opening" animation started in step 1 is finished

Expected result:
SpeedDial is in closed state

Actual result:
SpeedDial is not closed correctly. Some of the SpeedDialChilds are left in view.

Issue may be easier to reproduce with several SpeedDialChilds (e.g. 5 or more) for that opening animation takes longer.

when using speed_dial with the following widget:

Directionality(
textDirection: TextDirection.rtl,
child:
)

the background does not cover full layout, there is empty space in left screen

As I watch user interact with our app, I notice that some of them (especially those on iOS) often click on the label instead of the button. Is it possible to include a flag that will allow the label to also respond to click events?

Thanks for the great component!

I wish it would be possible to to a normal action on press and only open the child buttons on long press. Do you see any options how this could be done?

Thanks in advance

It would not be possible to dynamically leave the icons of the animatedIcons class, so that I can use any combination of icons from the example designer material: AnimatedIcons.add_close, AnimatedIcons.add_lock.

/Users/JerryChen/flutterDev/flutter/bin/flutter --no-color packages get
Running "flutter packages get" in example...
The current Dart SDK version is 2.1.0-dev.0.0.flutter-be6309690f.

Because flutter_speed_dial_example depends on flutter_speed_dial from path which requires SDK version >=1.19.0 <2.0.0, version solving failed.
pub get failed (1)
Process finished with exit code 1

Hello, I try to customize the main speed dial by using flare animation, I try to hide animated icon by stack my flare but I can't open or close speed dial with external interaction like inkwell. I think external control is more easy that flare interaction. Thank you

When there's no floatingActionButtonLocation: in the scaffold, the SpeedDial is fine.

But when it is set to floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, it is placed in the bottom right of the screen.

How can I place the speed dial to the center of bottomnavbar?

Hi,

AnimatedIcons only provide a set of 14 icons to choose from. Is there a way to customize icons.

for instance, we have menu_close available.

But I want add_Close. Is it possible?

It would be awesome, if there would be a possibility to change to color of the floating action button. And not only taking the main color of the app.

Hi,

First of all, I would like to thank you to allow me to use your awesome widget.

I contact you because I encounter an uncomfortable situation and I would like to know if alternatives exist or if I do something wrong.

I use SpeedDialChild with Image.asset and my image overwhelm the button. I also try to use width and height property, or IconButton but without success.

I would be pleased if you are more infos to give me.

Best regards.

For a button on the left side of the screen, how do we move the SpeedDialChild texts to the right?

For now it's like this.

labelWidget: Transform.translate(
   offset: Offset(120, 0),
   child: Text(
     "test 1",
     style: ConsultaAppTheme.titleDefault,
   ),
),

I'm trying to change children in current SpeedDial widget. However once I setState to refresh the view, I get the following error:

I/flutter ( 4942): _renderSpeedDial
I/flutter ( 4942): [Instance of 'SpeedDialChild', Instance of 'SpeedDialChild']
I/flutter ( 4942): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 4942): The following RangeError was thrown building SpeedDial(dirty, state: _SpeedDialState#ac3e1(tickers:
I/flutter ( 4942): tracking 2 tickers)):
I/flutter ( 4942): RangeError (index): Invalid value: Only valid value is 0: 1
I/flutter ( 4942): 
I/flutter ( 4942): When the exception was thrown, this was the stack:
I/flutter ( 4942): #0      List.[] (dart:core/runtime/libgrowable_array.dart:141:60)
I/flutter ( 4942): #1      _SpeedDialState._getChildrenList.<anonymous closure> (package:flutter_speed_dial/src/speed_dial.dart:148:43)
I/flutter ( 4942): #2      MappedListIterable.elementAt (dart:_internal/iterable.dart:414:29)
I/flutter ( 4942): #3      ListIterable.toList (dart:_internal/iterable.dart:219:19)
I/flutter ( 4942): #4      _SpeedDialState._getChildrenList (package:flutter_speed_dial/src/speed_dial.dart:163:10)
I/flutter ( 4942): #5      _SpeedDialState._renderButton (package:flutter_speed_dial/src/speed_dial.dart:195:23)
I/flutter ( 4942): #6      _SpeedDialState.build (package:flutter_speed_dial/src/speed_dial.dart:230:9)
I/flutter ( 4942): #7      StatefulElement.build (package:flutter/src/widgets/framework.dart:3743:27)
I/flutter ( 4942): #8      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3655:15)
I/flutter ( 4942): #9      Element.rebuild (package:flutter/src/widgets/framework.dart:3508:5)
I/flutter ( 4942): #10     StatefulElement.update (package:flutter/src/widgets/framework.dart:3812:5)
I/flutter ( 4942): #11     Element.updateChild (package:flutter/src/widgets/framework.dart:2712:15)
I/flutter ( 4942): #12     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3666:16)
I/flutter ( 4942): #13     Element.rebuild (package:flutter/src/widgets/framework.dart:3508:5)
I/flutter ( 4942): #14     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2255:33)
I/flutter ( 4942): #15     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:653:20)
I/flutter ( 4942): #16     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:214:5)
I/flutter ( 4942): #17     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter ( 4942): #18     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter ( 4942): #19     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter ( 4942): #20     _invoke (dart:ui/hooks.dart:128:13)
I/flutter ( 4942): #21     _drawFrame (dart:ui/hooks.dart:117:3)
I/flutter ( 4942): ════════════════════════════════════════════════════════════════════════════════════════════════════

It looks like speed dial instance remembers old number of children and does not accept new child in the list.

Here is how speed dial is rendered:

List <SpeedDialChild> _childrenWidgets = []; 

var _childSingle = SpeedDialChild(
                          child: Icon(fire, color: Colors.white),
                          backgroundColor: _color,
                          onTap: () {
                          },
                          label: _name,
                        );

_childrenWidgets.add(_childSingle);

  return new SpeedDial(
        child: _icon,
        onOpen: () => print('OPENING DIAL'),
        onClose: () => print('DIAL CLOSED'),
        visible: _dialVisible,
        curve: Curves.bounceIn,
        children: _childrenWidgets,

      );

Once I add new item into _childrenWidgets list and setState, I get the crash. Is there any way to add children dynamically?

At the moment I'm using really ugly workaround to replace speedDial completely, setState, and then after small delay, put new speedDial back with updated children.

hey man thanks for the package, but what should I do in order to make it open from up to down?

I want to control the label a bit more.
I have a really dark overlay and i don't want the label to have a Background.
When providing a widget for label i have all opportunities
When the labelwidget is set, label, labesStyle, and labelBackroundColor are not used

Hi!

• Right now if you expand the Speed Dial children and want to go back using the device Back button, you go back to the previous screen, not close the Speed Dial.
• The same behavior happens with Navigator.pop(). When I'm deep in my navigation stack and I want to go back to the route with the Speed Dial, I can either choose to pop to the Speed Dial opened route or to the previous screen. I can't pop to the screen with the Speed Dial but with it being closed.

There is - although - one thing in Flutter that isn't obvious and will help you in fixing that issue/adding better navigation support that you can use and that's local history.

addLocalHistoryEntry

Please, learn about it and use it in your library. Apart from that, it's really great.

If you can't work on that right now let me know. I may create and submit a PR myself.

Cheers!

open a dial press hardware back button
Screen popped away

It should close dial first

Speed dial can't be scrollable

I have issues trying to understand, how I can add the Navigator.pushNamed(context, RoutePaths.#routetonavigateto) and thereby reference the page I want to open. OnTap of the option I want to open a new window in my app. This is easy with just the simple FloatingActionButton, as it has the onPressed(){} option, however, it seems SpeedDialer doesn't support this.
Any help would be much appreciated!
Thanks, Chris

It would be nice if could scroll/paginate the speedchilds, as on small screens with the default settings there is no way to put more than 4 items.

Hello

I'm using flutter_speed_dial in my app and now I need to create a web version of some views and would be very nice if this package support Flutter Web :)

Are you thinking in add support for Flutter Web soon? This is in your plans?
Thanks!

Hey man!
First of all, thank you so much for your awesome library!
I a using it in production in 2 apps but now I have to make some changes that currently it is impossible.

Right now is impossible to set the FAB position on screen, I can't set its margin (bottom and right margin). It has a fixed amount.

Is it too complicated for you provide us a way to set that margin as we desire? For example, set the right margin to 16 and bottom margin to 8.

Thank you so much and have a nice day!

My app has a ListView and fab. I replaced the fab with the speed dial plugin. I copy and pasted the _renderSpeedDial() method from the example and tweaked it just enough to get it to compile. Initially, performance is great. However, I noticed that the fab response time gets slower and slower. Within a short time, it can take 30+ seconds for the fab to respond. Steps to reproduce:

1. Force close the app and re-open it.
2. Note that the fab response is very fast.
3. Do not interact with the app for a few minutes.
4. Note that the fab response is noticeably slower.

Performing steps 3-4 several times will lead to a response time of 10's of seconds. The performance of the rest of the app is unaffected; ListView scrolling performance does not slow down. Do you have any idea what might be happening?

If we implement our own labelWidget, we need to set the label otherwise an exception occours

label: 'ignored',
labelWidget: SpeedDialLabel('Delete', 60),

All working great, only this error is showing up in the console:

animation_controller.dart in AnimationController.stop at line 650
animation_controller.dart in AnimationController._animateToInternal at line 525
animation_controller.dart in AnimationController.reverse at line 470
speed_dial.dart in _SpeedDialState._performAnimation.<fn>.<fn> at line 127
zone.dart in _rootRun at line 1120
zone.dart in _CustomZone.run at line 1021
zone.dart in _CustomZone.runGuarded at line 923
zone.dart in _CustomZone.bindCallbackGuarded.<fn> at line 963
zone.dart in _rootRun at line 1124
zone.dart in _CustomZone.run at line 1021
zone.dart in _CustomZone.bindCallback.<fn> at line 947
libtimer_patch.dart in Timer._createTimer.<fn> at line 21
libtimer_impl.dart in _Timer._runTimers at line 382
libtimer_impl.dart in _Timer._handleMessage at line 416
libisolate_patch.dart in _RawReceivePortImpl._handleMessage at line 171

After clicking on the speed_dial button the error shows up.

Somehow it is not possible to tap the button using Flutter driver in tests. Everything works fine when not running the tests. And the tests also works with FloatingActionButton.

Example:

await driver.waitFor(find.byType('SpeedDial')); // This succeeds
await driver.tap(find.byType('SpeedDial')); // This times out

If I tap the button and open the children then the driver.tap succeed.

I think it may be related to this: flutter/flutter#41937

Any ideas for a workaround?