Use long press first to drag the button

lib/src/ui.dart

@@ -9,21 +9,24 @@ import 'enumerate_items.dart';
 import 'network_event.dart';
 import 'network_logger.dart';
 
-
 /// Overlay for [NetworkLoggerButton].
 class NetworkLoggerOverlay extends StatefulWidget {
-  NetworkLoggerOverlay._({ this.right, this.bottom, Key? key}) : super(key: key);
+  NetworkLoggerOverlay._({this.right, this.bottom, Key? key}) : super(key: key);
 
-  double ? bottom;
-  double ? right;
+  double? bottom;
+  double? right;
 
   /// Attach overlay to specified [context].
   static OverlayEntry attachTo(
-      BuildContext context, {
-        bool rootOverlay = true,
-        double? bottom,
-        double? right,
-      }) {
+    BuildContext context, {
+    bool rootOverlay = true,
+
+    /// Initial distance from [NetworkLoggerButton] to bottom edge of screen
+    double? bottom,
+
+    /// Initial distance from [NetworkLoggerButton] to right edge of screen
+    double? right,
+  }) {
     // create overlay entry
     final entry = OverlayEntry(
       builder: (context) => NetworkLoggerOverlay._(bottom: bottom, right: right),
@@ -35,7 +38,7 @@ class NetworkLoggerOverlay extends StatefulWidget {
       if (overlay == null) {
         throw Exception(
           'FlutterNetworkLogger:  No Overlay widget found. '
-              '                       The most common way to add an Overlay to an application is to include a MaterialApp or Navigator above widget that calls NetworkLoggerOverlay.attachTo()',
+          '                       The most common way to add an Overlay to an application is to include a MaterialApp or Navigator above widget that calls NetworkLoggerOverlay.attachTo()',
         );
       }
 
@@ -46,7 +49,7 @@ class NetworkLoggerOverlay extends StatefulWidget {
   }
 
   @override
-  State < NetworkLoggerOverlay > createState() => _NetworkLoggerOverlayState();
+  State<NetworkLoggerOverlay> createState() => _NetworkLoggerOverlayState();
 }
 
 class _NetworkLoggerOverlayState extends State<NetworkLoggerOverlay> {
@@ -62,9 +65,15 @@ class _NetworkLoggerOverlayState extends State<NetworkLoggerOverlay> {
     screenSize = MediaQuery.of(context).size;
   }
 
-  void onPanUpdate(DragUpdateDetails details) {
-    bottom -= details.delta.dy;
-    right -= details.delta.dx;
+  Offset? lastPosition;
+
+  void onPanUpdate(LongPressMoveUpdateDetails details) {
+    final delta = lastPosition! - details.localPosition;
+
+    bottom += delta.dy;
+    right += delta.dx;
+
+    lastPosition = details.localPosition;
 
     /// Checks if the button went of screen
     if (bottom < 0) {
@@ -83,7 +92,7 @@ class _NetworkLoggerOverlayState extends State<NetworkLoggerOverlay> {
       right = screenSize.width - buttonSize.width;
     }
 
-    setState(() { });
+    setState(() {});
   }
 
   @override
@@ -92,14 +101,19 @@ class _NetworkLoggerOverlayState extends State<NetworkLoggerOverlay> {
       right: right,
       bottom: bottom,
       child: GestureDetector(
-        onPanUpdate: onPanUpdate,
-        child: NetworkLoggerButton(),
+        onLongPressMoveUpdate: onPanUpdate,
+        onLongPressDown: (details) => setState(() => lastPosition = details.localPosition),
+        onLongPressUp: () => setState(() => lastPosition = null),
+        child: Material(
+          elevation: lastPosition == null ? 0 : 30,
+          borderRadius: BorderRadius.all(Radius.circular(buttonSize.width)),
+          child: NetworkLoggerButton(),
+        ),
       ),
     );
   }
 }
 
-
 /// [FloatingActionButton] that opens [NetworkLoggerScreen] when pressed.
 class NetworkLoggerButton extends StatefulWidget {
   /// Source event list (default: [NetworkLogger.instance])
@@ -215,17 +229,14 @@ class NetworkLoggerScreen extends StatelessWidget {
     );
   }
 
-  final TextEditingController searchController =
-      TextEditingController(text: null);
+  final TextEditingController searchController = TextEditingController(text: null);
 
   /// filte events with search keyword
   List<NetworkEvent> getEvents() {
     if (searchController.text.isEmpty) return eventList.events;
 
     final query = searchController.text.toLowerCase();
-    return eventList.events
-        .where((it) => it.request?.uri.toLowerCase().contains(query) ?? false)
-        .toList();
+    return eventList.events.where((it) => it.request?.uri.toLowerCase().contains(query) ?? false).toList();
   }
 
   @override
@@ -261,9 +272,8 @@ class NetworkLoggerScreen extends StatelessWidget {
                   prefixIcon: const Icon(Icons.search, color: Colors.black26),
                   suffix: ValueListenableBuilder<TextEditingValue>(
                     valueListenable: searchController,
-                    builder: (context, value, child) => value.text.isNotEmpty
-                        ? Text(getEvents().length.toString() + ' results')
-                        : const SizedBox(),
+                    builder: (context, value, child) =>
+                        value.text.isNotEmpty ? Text(getEvents().length.toString() + ' results') : const SizedBox(),
                   ),
                   hintText: "enter keyword to search",
                 ),
@@ -285,16 +295,11 @@ class NetworkLoggerScreen extends StatelessWidget {
                         overflow: TextOverflow.ellipsis,
                       ),
                       leading: Icon(
-                        item.error == null
-                            ? (item.response == null
-                                ? Icons.hourglass_empty
-                                : Icons.done)
-                            : Icons.error,
+                        item.error == null ? (item.response == null ? Icons.hourglass_empty : Icons.done) : Icons.error,
                       ),
                       trailing: _AutoUpdate(
                         duration: Duration(seconds: 1),
-                        builder: (context) =>
-                            Text(_timeDifference(item.timestamp!)),
+                        builder: (context) => Text(_timeDifference(item.timestamp!)),
                       ),
                       onTap: () => NetworkLoggerEventScreen.open(
                         context,
@@ -329,8 +334,7 @@ final _jsonEncoder = JsonEncoder.withIndent('  ');
 
 /// Screen that displays log entry details.
 class NetworkLoggerEventScreen extends StatelessWidget {
-  const NetworkLoggerEventScreen({Key? key, required this.event})
-      : super(key: key);
+  const NetworkLoggerEventScreen({Key? key, required this.event}) : super(key: key);
 
   static Route<void> route({
     required NetworkEvent event,
@@ -555,8 +559,7 @@ class NetworkLoggerEventScreen extends StatelessWidget {
 
 /// Widget builder that re-builds widget repeatedly with [duration] interval.
 class _AutoUpdate extends StatefulWidget {
-  const _AutoUpdate({Key? key, required this.duration, required this.builder})
-      : super(key: key);
+  const _AutoUpdate({Key? key, required this.duration, required this.builder}) : super(key: key);
 
   /// Re-build interval.
   final Duration duration;
@@ -605,8 +608,7 @@ class _AutoUpdateState extends State<_AutoUpdate> {
 }
 
 class _DebugOnly extends StatelessWidget {
-  const _DebugOnly({Key? key, required this.enabled, required this.child})
-      : super(key: key);
+  const _DebugOnly({Key? key, required this.enabled, required this.child}) : super(key: key);
 
   final bool enabled;
   final Widget child;