Update SpeedDial to 4.0.0-dev.1

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [4.0.0-dev.1] - 29 May 2021
+
+- Update Exanple Project
+- Add visibility parameter for SpeedDialChild.
+- Fix dialRoot scaling on bigger screen devices.
+- Add isOpenOnStart Porperty to set the visiblity of childrens at init ( WIP ).
+- Refactor dialRoot to only accept (context, isOpen, toogleChildren), key and layerLink is not required
+
 ## [4.0.0-dev] - 19 May 2021
 
 - Update Example Project

example/.gitignore

@@ -22,9 +22,10 @@
 android/
 ios/
 linux/
-mac/
+macos/
 windows/
 web/
+test/
 
 # Flutter/Dart/Pub related
 **/doc/api/

example/lib/main.dart

@@ -27,7 +27,7 @@ class _MyAppState extends State<MyApp> {
               ),
               darkTheme: ThemeData(
                 brightness: Brightness.dark,
-                primaryColor: Colors.blue[800],
+                primaryColor: Colors.lightBlue[900],
               ),
               themeMode: value,
             ));
@@ -200,15 +200,16 @@ class _MyHomePageState extends State<MyHomePage> {
                       ],
                     ),
                   ),
-                  SwitchListTile(
-                      contentPadding: EdgeInsets.all(15),
-                      value: extend,
-                      title: Text("Extend Speed Dial"),
-                      onChanged: (val) {
-                        setState(() {
-                          extend = val;
-                        });
-                      }),
+                  if (!customDialRoot)
+                    SwitchListTile(
+                        contentPadding: EdgeInsets.all(15),
+                        value: extend,
+                        title: Text("Extend Speed Dial"),
+                        onChanged: (val) {
+                          setState(() {
+                            extend = val;
+                          });
+                        }),
                   SwitchListTile(
                       contentPadding: EdgeInsets.all(15),
                       value: visible,
@@ -254,15 +255,16 @@ class _MyHomePageState extends State<MyHomePage> {
                           rmicons = val;
                         });
                       }),
-                  SwitchListTile(
-                      contentPadding: EdgeInsets.all(15),
-                      value: useRAnimation,
-                      title: Text("Use Rotation Animation"),
-                      onChanged: (val) {
-                        setState(() {
-                          useRAnimation = val;
-                        });
-                      }),
+                  if (!customDialRoot)
+                    SwitchListTile(
+                        contentPadding: EdgeInsets.all(15),
+                        value: useRAnimation,
+                        title: Text("Use Rotation Animation"),
+                        onChanged: (val) {
+                          setState(() {
+                            useRAnimation = val;
+                          });
+                        }),
                   SwitchListTile(
                       contentPadding: EdgeInsets.all(15),
                       value: switchLabelPosition,
@@ -303,13 +305,17 @@ class _MyHomePageState extends State<MyHomePage> {
           activeIcon: Icons.close,
           openCloseDial: isDialOpen,
           dialRoot: customDialRoot
-              ? (ctx, open, key, toggleChildren, layerLink) {
-                  return CompositedTransformTarget(
-                    link: layerLink,
-                    child: TextButton(
-                      key: key,
-                      onPressed: toggleChildren,
-                      child: Text("Text Button"),
+              ? (ctx, open, toggleChildren) {
+                  return ElevatedButton(
+                    onPressed: toggleChildren,
+                    style: ElevatedButton.styleFrom(
+                      primary: Colors.blue[900],
+                      padding:
+                          EdgeInsets.symmetric(horizontal: 22, vertical: 18),
+                    ),
+                    child: Text(
+                      "Custom Dial Root",
+                      style: TextStyle(fontSize: 17),
                     ),
                   );
                 }
@@ -333,7 +339,6 @@ class _MyHomePageState extends State<MyHomePage> {
 
           /// If false, backgroundOverlay will not be rendered.
           renderOverlay: renderOverlay,
-          curve: Curves.bounceIn,
           // overlayColor: Colors.black,
           // overlayOpacity: 0.5,
           onOpen: () => print('OPENING DIAL'),
@@ -346,7 +351,8 @@ class _MyHomePageState extends State<MyHomePage> {
           // activeForegroundColor: Colors.red,
           // activeBackgroundColor: Colors.blue,
           elevation: 8.0,
-          shape: CircleBorder(), //default value
+          isOpenOnStart: false,
+          shape: customDialRoot ? RoundedRectangleBorder() : StadiumBorder(),
           // childMargin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
           children: [
             SpeedDialChild(
@@ -368,6 +374,7 @@ class _MyHomePageState extends State<MyHomePage> {
               backgroundColor: Colors.indigo,
               foregroundColor: Colors.white,
               label: 'Show Snackbar',
+              visible: true,
               onTap: () => ScaffoldMessenger.of(context).showSnackBar(
                   SnackBar(content: Text(("Third Child Pressed")))),
               onLongPress: () => print('THIRD CHILD LONG PRESS'),

lib/src/animated_child.dart

@@ -35,12 +35,12 @@ class AnimatedChild extends AnimatedWidget {
     this.elevation = 6.0,
     this.buttonSize = 56.0,
     this.child,
-    this.labelShadow,
     this.label,
     this.labelStyle,
+    this.labelShadow,
     this.labelBackgroundColor,
     this.labelWidget,
-    this.visible = false,
+    this.visible = true,
     this.onTap,
     required this.switchLabelPosition,
     required this.useColumn,
@@ -162,10 +162,13 @@ class AnimatedChild extends AnimatedWidget {
             );
     }
 
-    return _buildColumnOrRow(
-      useColumn,
-      mainAxisSize: MainAxisSize.min,
-      children: switchLabelPosition ? children.reversed.toList() : children,
-    );
+    return visible
+        ? _buildColumnOrRow(
+            useColumn,
+            mainAxisSize: MainAxisSize.min,
+            children:
+                switchLabelPosition ? children.reversed.toList() : children,
+          )
+        : Container();
   }
 }

lib/src/animated_floating_button.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-class AnimatedFloatingButton extends StatelessWidget {
+class AnimatedFloatingButton extends StatefulWidget {
   final bool visible;
   final VoidCallback? callback;
   final VoidCallback? onLongPress;
@@ -14,7 +14,6 @@ class AnimatedFloatingButton extends StatelessWidget {
   final double size;
   final ShapeBorder shape;
   final Curve curve;
-  final GlobalKey? dialKey;
   final Widget? dialRoot;
   final bool useInkWell;
 
@@ -24,7 +23,6 @@ class AnimatedFloatingButton extends StatelessWidget {
     this.callback,
     this.label,
     this.child,
-    this.dialKey,
     this.dialRoot,
     this.useInkWell = false,
     this.backgroundColor,
@@ -34,51 +32,67 @@ class AnimatedFloatingButton extends StatelessWidget {
     this.elevation = 6.0,
     this.size = 56.0,
     this.shape = const CircleBorder(),
-    this.curve = Curves.linear,
+    this.curve = Curves.fastOutSlowIn,
     this.onLongPress,
   }) : super(key: key);
 
+  @override
+  _AnimatedFloatingButtonState createState() => _AnimatedFloatingButtonState();
+}
+
+class _AnimatedFloatingButtonState extends State<AnimatedFloatingButton>
+    with TickerProviderStateMixin {
   @override
   Widget build(BuildContext context) {
-    return AnimatedContainer(
-      curve: curve,
-      duration: Duration(milliseconds: 150),
-      height: visible ? size : 0.0,
-      child: Container(
-        height: size,
-        key: dialRoot == null ? dialKey : GlobalKey(),
-        child: FittedBox(
-          child: GestureDetector(
-            onLongPress: onLongPress,
-            child: dialRoot != null && !(dialRoot! is Container)
-                ? dialRoot
-                : label != null
+    return widget.dialRoot == null
+        ? AnimatedContainer(
+            curve: widget.curve,
+            duration: Duration(milliseconds: 150),
+            height: widget.visible ? widget.size : 0,
+            child: FittedBox(
+              child: GestureDetector(
+                onLongPress: widget.onLongPress,
+                child: widget.label != null
                     ? FloatingActionButton.extended(
-                        icon: visible ? child : null,
-                        shape: shape is CircleBorder ? StadiumBorder() : shape,
-                        label: visible ? label! : SizedBox.shrink(),
-                        backgroundColor: backgroundColor,
-                        foregroundColor: foregroundColor,
-                        onPressed: callback,
-                        tooltip: tooltip,
-                        heroTag: heroTag,
-                        elevation: elevation,
-                        highlightElevation: elevation,
+                        icon: widget.visible ? widget.child : null,
+                        label:
+                            widget.visible ? widget.label! : SizedBox.shrink(),
+                        shape: widget.shape is CircleBorder
+                            ? StadiumBorder()
+                            : widget.shape,
+                        backgroundColor: widget.backgroundColor,
+                        foregroundColor: widget.foregroundColor,
+                        onPressed: widget.callback,
+                        tooltip: widget.tooltip,
+                        heroTag: widget.heroTag,
+                        elevation: widget.elevation,
+                        highlightElevation: widget.elevation,
                       )
                     : FloatingActionButton(
-                        child: visible ? child : null,
-                        backgroundColor: backgroundColor,
-                        foregroundColor: foregroundColor,
-                        onPressed: callback,
-                        tooltip: tooltip,
-                        heroTag: heroTag,
-                        elevation: elevation,
-                        highlightElevation: elevation,
-                        shape: shape,
+                        child: widget.visible ? widget.child : null,
+                        shape: widget.shape,
+                        backgroundColor: widget.backgroundColor,
+                        foregroundColor: widget.foregroundColor,
+                        onPressed: widget.callback,
+                        tooltip: widget.tooltip,
+                        heroTag: widget.heroTag,
+                        elevation: widget.elevation,
+                        highlightElevation: widget.elevation,
                       ),
-          ),
-        ),
-      ),
-    );
+              ),
+            ),
+          )
+        : AnimatedSize(
+            vsync: this,
+            duration: Duration(milliseconds: 150),
+            curve: widget.curve,
+            child: Container(
+              child: Container(
+                child: widget.visible
+                    ? widget.dialRoot
+                    : Container(height: 0, width: 0),
+              ),
+            ),
+          );
   }
 }

lib/src/speed_dial.dart

@@ -32,6 +32,9 @@ class SpeedDial extends StatefulWidget {
   final Gradient? gradient;
   final BoxShape gradientBoxShape;
 
+  /// Whether speedDial initialize with open state or not.
+  final bool isOpenOnStart;
+
   /// The color of the background overlay.
   final Color? overlayColor;
 
@@ -98,7 +101,7 @@ class SpeedDial extends StatefulWidget {
   /// that was specific to FAB before like onPress, you will have to provide
   /// it again to your dialRoot button.
   final Widget Function(
-      BuildContext context, bool open, Key, VoidCallback, LayerLink)? dialRoot;
+      BuildContext context, bool open, VoidCallback toggleChildren)? dialRoot;
 
   /// This is the child of the FAB, if specified it will ignore icon, activeIcon.
   final Widget? child;
@@ -144,11 +147,12 @@ class SpeedDial extends StatefulWidget {
     this.direction = SpeedDialDirection.Up,
     this.closeManually = false,
     this.renderOverlay = true,
-    this.shape = const CircleBorder(),
-    this.curve = Curves.linear,
+    this.shape = const StadiumBorder(),
+    this.curve = Curves.fastOutSlowIn,
     this.onPress,
     this.animationSpeed = 150,
     this.openCloseDial,
+    this.isOpenOnStart = false,
     this.childMargin = const EdgeInsets.symmetric(horizontal: 16, vertical: 0),
   }) : super(key: key);
 
@@ -233,7 +237,7 @@ class _SpeedDialState extends State<SpeedDial>
             btnKey: child.key,
             useColumn: widget.direction.value == "Left" ||
                 widget.direction.value == "Right",
-            visible: _open,
+            visible: child.visible,
             switchLabelPosition: widget.switchLabelPosition,
             backgroundColor: child.backgroundColor,
             foregroundColor: child.foregroundColor,
@@ -454,14 +458,13 @@ class _SpeedDialState extends State<SpeedDial>
     var animatedFloatingButton = AnimatedBuilder(
       animation: _controller,
       builder: (context, ch) => CompositedTransformTarget(
-          link: widget.dialRoot == null ? _layerLink : LayerLink(),
+          link: _layerLink,
+          key: dialKey,
           child: AnimatedFloatingButton(
-            dialKey: dialKey,
             visible: widget.visible,
             tooltip: widget.tooltip,
             dialRoot: widget.dialRoot != null
-                ? widget.dialRoot!(
-                    context, _open, dialKey, _toggleChildren, _layerLink)
+                ? widget.dialRoot!(context, _open, _toggleChildren)
                 : null,
             backgroundColor: widget.backgroundColor != null
                 ? backgroundColorTween.lerp(_controller.value)
@@ -507,6 +510,7 @@ class _SpeedDialState extends State<SpeedDial>
 
   @override
   Widget build(BuildContext context) {
+    if (mounted && widget.isOpenOnStart) _toggleChildren();
     return _renderButton();
   }
 }

lib/src/speed_dial_child.dart

@@ -28,6 +28,7 @@ class SpeedDialChild {
   final VoidCallback? onTap;
   final VoidCallback? onLongPress;
   final ShapeBorder? shape;
+  final bool visible;
 
   SpeedDialChild({
     this.key,
@@ -37,6 +38,7 @@ class SpeedDialChild {
     this.labelWidget,
     this.labelShadow,
     this.child,
+    this.visible = true,
     this.backgroundColor,
     this.foregroundColor,
     this.elevation,

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_speed_dial
 description: Flutter plugin to implement a beautiful and dynamic Material Design Speed Dial with labels, animated icons, multi-directional children and much more.
-version: 4.0.0-dev
+version: 4.0.0-dev.1
 homepage: https://github.com/darioielardi/flutter_speed_dial/
 
 dependencies: