Skip to content

Commit

Permalink
Make NetworkLoggerButton draggable (#9)
Browse files Browse the repository at this point in the history 
* Add no overlay handling

* Make logger button draggable

* flutter pub get

* Use long press first to drag the button

* Update dio

* Revert "Update dio"

This reverts commit b0b7074.

* Add draggable option

* Add default parameter values
  • Loading branch information
@FranMaric
FranMaric committed Sep 8, 2022
1 parent 95863e2 commit 5398e30
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 48 deletions.
12 changes: 6 additions & 6 deletions example/pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ packages:
name: characters
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "1.2.1"
charcode:
dependency: transitive
description:
Expand All @@ -21,7 +21,7 @@ packages:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.15.0"
version: "1.16.0"
dio:
dependency: "direct main"
description:
Expand All @@ -47,14 +47,14 @@ packages:
name: material_color_utilities
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.3"
version: "0.1.5"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
source: hosted
version: "1.7.0"
version: "1.8.0"
network_logger:
dependency: "direct main"
description:
Expand Down Expand Up @@ -108,7 +108,7 @@ packages:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.1"
version: "2.1.2"
sdks:
dart: ">=2.14.0 <3.0.0"
dart: ">=2.17.0-0 <3.0.0"
flutter: ">=2.0.1"
132 changes: 105 additions & 27 deletions lib/src/ui.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,119 @@ import 'network_event.dart';
import 'network_logger.dart';

/// Overlay for [NetworkLoggerButton].
class NetworkLoggerOverlay extends StatelessWidget {
NetworkLoggerOverlay._({Key? key}) : super(key: key);
class NetworkLoggerOverlay extends StatefulWidget {
NetworkLoggerOverlay._({
required this.right,
required this.bottom,
required this.draggable,
Key? key,
}) : super(key: key);

final double bottom;
final double right;

final bool draggable;

/// Attach overlay to specified [context].
static OverlayEntry attachTo(
BuildContext context, {
bool rootOverlay = true,

/// Initial distance from [NetworkLoggerButton] to bottom edge of screen
double bottom = 30,

/// Initial distance from [NetworkLoggerButton] to right edge of screen
double right = 30,
bool draggable = true,
}) {
// create overlay entry
var entry = OverlayEntry(
builder: (context) => NetworkLoggerOverlay._(),
final entry = OverlayEntry(
builder: (context) => NetworkLoggerOverlay._(
bottom: bottom,
right: right,
draggable: draggable,
),
);
// insert on next frame
Future.delayed(Duration.zero, () {
Overlay.of(context, rootOverlay: rootOverlay)?.insert(entry);
final overlay = Overlay.of(context, rootOverlay: rootOverlay);

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()',
);
}

overlay.insert(entry);
});
// return
return entry;
}

@override
State<NetworkLoggerOverlay> createState() => _NetworkLoggerOverlayState();
}

class _NetworkLoggerOverlayState extends State<NetworkLoggerOverlay> {
late double bottom = widget.bottom;
late double right = widget.right;

late Size screenSize;
static const Size buttonSize = Size(57, 57);

@override
void didChangeDependencies() {
super.didChangeDependencies();
screenSize = MediaQuery.of(context).size;
}

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) {
bottom = 0;
}

if (right < 0) {
right = 0;
}

if (bottom + buttonSize.height > screenSize.height) {
bottom = screenSize.height - buttonSize.height;
}

if (right + buttonSize.width > screenSize.width) {
right = screenSize.width - buttonSize.width;
}

setState(() {});
}

@override
Widget build(BuildContext context) {
return Positioned(right: 30, bottom: 100, child: NetworkLoggerButton());
return Positioned(
right: right,
bottom: bottom,
child: GestureDetector(
onLongPressMoveUpdate: widget.draggable ? onPanUpdate : null,
onLongPressDown: (details) => widget.draggable ? setState(() => lastPosition = details.localPosition) : null,
onLongPressUp: () => widget.draggable ? setState(() => lastPosition = null) : null,
child: Material(
elevation: lastPosition == null ? 0 : 30,
borderRadius: BorderRadius.all(Radius.circular(buttonSize.width)),
child: NetworkLoggerButton(),
),
),
);
}
}

Expand Down Expand Up @@ -151,17 +241,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
Expand Down Expand Up @@ -197,9 +284,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",
),
Expand All @@ -221,16 +307,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,
Expand Down Expand Up @@ -265,8 +346,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,
Expand Down Expand Up @@ -491,8 +571,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;
Expand Down Expand Up @@ -541,8 +620,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;
Expand Down
30 changes: 15 additions & 15 deletions pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ packages:
name: async
url: "https://pub.dartlang.org"
source: hosted
version: "2.8.2"
version: "2.9.0"
boolean_selector:
dependency: transitive
description:
Expand All @@ -21,7 +21,7 @@ packages:
name: characters
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "1.2.1"
charcode:
dependency: transitive
description:
Expand All @@ -35,14 +35,14 @@ packages:
name: clock
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.1.1"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.15.0"
version: "1.16.0"
dio:
dependency: "direct main"
description:
Expand All @@ -56,7 +56,7 @@ packages:
name: fake_async
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "1.3.1"
flutter:
dependency: "direct main"
description: flutter
Expand All @@ -80,28 +80,28 @@ packages:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.11"
version: "0.12.12"
material_color_utilities:
dependency: transitive
description:
name: material_color_utilities
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.3"
version: "0.1.5"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
source: hosted
version: "1.7.0"
version: "1.8.0"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
version: "1.8.2"
sky_engine:
dependency: transitive
description: flutter
Expand All @@ -113,7 +113,7 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.1"
version: "1.9.0"
stack_trace:
dependency: transitive
description:
Expand All @@ -134,21 +134,21 @@ packages:
name: string_scanner
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.1.1"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "1.2.1"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.4.8"
version: "0.4.12"
typed_data:
dependency: transitive
description:
Expand All @@ -162,7 +162,7 @@ packages:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.1"
version: "2.1.2"
sdks:
dart: ">=2.14.0 <3.0.0"
dart: ">=2.17.0-0 <3.0.0"
flutter: ">=2.0.1"

0 comments on commit 5398e30

Please sign in to comment.