From b3b67c59fb0581ed2fbe6d61ca5726a55b6610b4 Mon Sep 17 00:00:00 2001 From: Mack Myers Date: Mon, 26 Sep 2022 12:13:52 -0400 Subject: [PATCH 1/2] JSON Viewer - Added support for scalable data viewing - Cleaned up seemingly unnecessary code - Updated min environment version --- lib/app_state.dart | 7 +- lib/data_explorer.dart | 127 +++++++++++++----------------------- lib/file_upload.dart | 38 +++++------ lib/main.dart | 16 ++--- lib/path_view.dart | 27 +++----- lib/upload_status_enum.dart | 6 ++ pubspec.yaml | 3 +- 7 files changed, 87 insertions(+), 137 deletions(-) create mode 100644 lib/upload_status_enum.dart diff --git a/lib/app_state.dart b/lib/app_state.dart index 01ddcc2..ade6da7 100644 --- a/lib/app_state.dart +++ b/lib/app_state.dart @@ -1,5 +1,6 @@ import 'package:flutter/foundation.dart'; -import 'package:studio/file_upload.dart'; + +import 'upload_status_enum.dart'; class AppState extends ChangeNotifier { UploadStatus _status = UploadStatus.none; @@ -9,14 +10,14 @@ class AppState extends ChangeNotifier { notifyListeners(); } - String _boxName; + String _boxName = ''; String get boxName => _boxName; set boxName(String boxName) { _boxName = boxName; notifyListeners(); } - Map _entries; + Map _entries = {}; Map get entries => _entries; set entries(Map entries) { _entries = entries; diff --git a/lib/data_explorer.dart b/lib/data_explorer.dart index 2962614..d18ee07 100644 --- a/lib/data_explorer.dart +++ b/lib/data_explorer.dart @@ -1,4 +1,7 @@ +import 'dart:convert'; + import 'package:flutter/material.dart'; +import 'package:flutter_json_viewer/flutter_json_viewer.dart'; import 'package:provider/provider.dart'; import 'package:studio/app_state.dart'; import 'package:studio/path_view.dart'; @@ -8,70 +11,50 @@ class DataExplorer extends StatelessWidget { Widget build(BuildContext context) { var app = Provider.of(context); return Center( - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: 900), - child: Card( - margin: EdgeInsets.zero, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.vertical( - top: Radius.circular(20), - ), - ), - color: Colors.white, - child: Padding( - padding: EdgeInsets.fromLTRB(20, 20, 20, 0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Row( - children: [ - Expanded( - child: PathView(), - ), - if (false) - ConstrainedBox( - constraints: BoxConstraints(maxWidth: 250), - child: TextField( - decoration: InputDecoration( - border: OutlineInputBorder( - borderRadius: - BorderRadius.all(Radius.circular(30)), - ), - hintText: 'Search the box', - contentPadding: EdgeInsets.fromLTRB(20, 8, 12, 8), - ), - style: TextStyle( - fontSize: 16, - ), - ), - ), - ], - ), - SizedBox(height: 20), - if (app.path.isEmpty) - Expanded( - child: Scrollbar( - child: ListView.builder( - itemCount: app.entries.length, - itemBuilder: (context, index) { - var mapEntry = app.entries.entries.elementAt(index); - return EntryWidget( - mapEntry.key.toString(), mapEntry.value); - }, - ), - ), - ) - /*else + child: Card( + margin: EdgeInsets.all(16), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(16)), + ), + color: Colors.white, + child: Padding( + padding: EdgeInsets.fromLTRB(20, 20, 20, 0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Row( + children: [ Expanded( + child: PathView(), + ), + ], + ), + SizedBox(height: 16), + if (app.path.isEmpty) + Expanded( + child: Scrollbar( child: ListView.builder( itemCount: app.entries.length, itemBuilder: (context, index) { - return EntryWidget(app.entries[index]); + var mapEntry = app.entries.entries.elementAt(index); + return EntryWidget(mapEntry.key.toString(), mapEntry.value); }, ), - ),*/ - ], - ), + ), + ), + + /// Adds a little buffer between the last json and the bottom of the view + SizedBox(height: 16), + /*else + Expanded( + child: ListView.builder( + itemCount: app.entries.length, + itemBuilder: (context, index) { + return EntryWidget(app.entries[index]); + }, + ), + ),*/ + ], ), ), ), @@ -90,33 +73,13 @@ class EntryWidget extends StatelessWidget { return Card( elevation: 0, shape: RoundedRectangleBorder( - side: BorderSide(width: 1, color: Colors.grey[300]), + side: BorderSide(width: 1, color: Colors.grey[300]!), borderRadius: BorderRadius.all(Radius.circular(10)), ), clipBehavior: Clip.antiAlias, - child: InkWell( - onTap: () {}, - child: Padding( - padding: const EdgeInsets.all(10.0), - child: Row( - children: [ - SizedBox( - width: 100, - child: Text( - entryKey, - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.bold, - ), - ), - ), - Text( - value.toString(), - style: TextStyle(fontSize: 16), - ), - ], - ), - ), + child: Padding( + padding: const EdgeInsets.all(12.0), + child: JsonViewer({entryKey: jsonDecode(jsonEncode(value))}), ), ); } diff --git a/lib/file_upload.dart b/lib/file_upload.dart index aa6c684..8f5e7ff 100644 --- a/lib/file_upload.dart +++ b/lib/file_upload.dart @@ -8,21 +8,23 @@ import 'package:provider/provider.dart'; import 'package:studio/app_state.dart'; import 'package:studio/data_explorer.dart'; +import 'upload_status_enum.dart'; + class FileUpload extends StatefulWidget { @override _FileUploadState createState() => _FileUploadState(); } class _FileUploadState extends State { - StreamSubscription _dragOverSubscription; - StreamSubscription _dropSubscription; + late StreamSubscription _dragOverSubscription; + late StreamSubscription _dropSubscription; @override void initState() { super.initState(); - _dropSubscription = document.body.onDragOver.listen(_onDragOver); - _dropSubscription = document.body.onDrop.listen(_onDrop); + _dropSubscription = document.body!.onDragOver.listen(_onDragOver); + _dropSubscription = document.body!.onDrop.listen(_onDrop); } void _onDragOver(MouseEvent event) { @@ -33,23 +35,23 @@ class _FileUploadState extends State { void _onDrop(MouseEvent event) { event.stopPropagation(); event.preventDefault(); - var files = event.dataTransfer.files; - if (files.isEmpty) return; + + if (files == null || files.isEmpty) return; var file = files.first; var reader = FileReader(); reader.onLoadEnd.listen((e) { - _process(file.name, reader.result as Uint8List); + process(file.name, reader.result as Uint8List, context); }); reader.readAsArrayBuffer(file); - var appState = Provider.of(context); + var appState = Provider.of(context, listen: false); appState.status = UploadStatus.processing; } - void _process(String name, Uint8List bytes) { - var appState = Provider.of(context); + void process(String name, Uint8List bytes, BuildContext context) { + var appState = Provider.of(context, listen: false); scheduleMicrotask(() async { try { var box = await Hive.openBox('box', bytes: bytes); @@ -69,14 +71,12 @@ class _FileUploadState extends State { switch (app.status) { case UploadStatus.none: return Center( - child: - Text('Drop a .hive file to begin\n\n(This is a preview version)'), + child: Text('Drop a .hive file to begin\n\n(This is a preview version)'), ); case UploadStatus.processing: return Center( child: Text('Processing file'), ); - case UploadStatus.failed: return Center( child: Text('Invalid file'), @@ -84,20 +84,12 @@ class _FileUploadState extends State { case UploadStatus.success: return DataExplorer(); } - return Container(); } @override void dispose() { - _dragOverSubscription?.cancel(); - _dropSubscription?.cancel(); + _dragOverSubscription.cancel(); + _dropSubscription.cancel(); super.dispose(); } } - -enum UploadStatus { - none, - processing, - success, - failed, -} diff --git a/lib/main.dart b/lib/main.dart index e09c559..200c2a6 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -25,20 +25,16 @@ class MyApp extends StatelessWidget { fontFamily: 'OpenSans', ), home: Scaffold( - backgroundColor: Color(0xFFE6EBEB), + backgroundColor: Color(0xFFF3F5F6), body: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ - InkWell( - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: 400), - child: Image.asset('assets/logo.png'), - ), - onTap: () { - appState.status = UploadStatus.none; - }, + SizedBox(height: 16), + ConstrainedBox( + constraints: BoxConstraints(maxWidth: 300), + child: Image.asset('assets/logo.png'), ), - SizedBox(height: 20), + SizedBox(height: 16), Expanded( child: ChangeNotifierProvider( child: FileUpload(), diff --git a/lib/path_view.dart b/lib/path_view.dart index aa8fe31..231665b 100644 --- a/lib/path_view.dart +++ b/lib/path_view.dart @@ -6,32 +6,23 @@ class PathView extends StatelessWidget { @override Widget build(BuildContext context) { return Consumer( - builder: (BuildContext context, AppState app, Widget child) { + builder: (BuildContext context, AppState app, Widget? child) { return Row( children: [ - _buildPathElement(app.boxName, () { - app.path = []; - }, divider: false), - for (var i = 0; i < app.path.length; i++) - _buildPathElement(app.path[i], () { - app.path = app.path.sublist(0, i + 1); - }), + _buildPathElement(app.boxName), + for (var i = 0; i < app.path.length; i++) _buildPathElement(app.path[i]), ], ); }, ); } - Widget _buildPathElement(String name, VoidCallback goto, - {bool divider = true}) { - return InkWell( - onTap: goto, - child: Text( - divider ? '> $name' : name, - style: TextStyle( - fontSize: 30, - fontWeight: FontWeight.bold, - ), + Widget _buildPathElement(String name) { + return Text( + name, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, ), ); } diff --git a/lib/upload_status_enum.dart b/lib/upload_status_enum.dart new file mode 100644 index 0000000..98b01d5 --- /dev/null +++ b/lib/upload_status_enum.dart @@ -0,0 +1,6 @@ +enum UploadStatus { + none, + processing, + success, + failed, +} diff --git a/pubspec.yaml b/pubspec.yaml index 1d122d9..65b779e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -4,12 +4,13 @@ description: A new Flutter project. version: 1.0.0+1 environment: - sdk: ">=2.6.0 <3.0.0" + sdk: ">=2.12.0 <3.0.0" dependencies: flutter: sdk: flutter + flutter_json_viewer: ^1.0.1 hive: 1.2.0 provider: any From cf3e6bf80e1f0e31a6ba4df071c76ea08afc72a6 Mon Sep 17 00:00:00 2001 From: Mack Myers Date: Mon, 26 Sep 2022 12:24:38 -0400 Subject: [PATCH 2/2] Revert min env version --- lib/data_explorer.dart | 2 +- lib/file_upload.dart | 12 ++++++------ lib/path_view.dart | 2 +- pubspec.yaml | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/lib/data_explorer.dart b/lib/data_explorer.dart index d18ee07..10bf9a6 100644 --- a/lib/data_explorer.dart +++ b/lib/data_explorer.dart @@ -73,7 +73,7 @@ class EntryWidget extends StatelessWidget { return Card( elevation: 0, shape: RoundedRectangleBorder( - side: BorderSide(width: 1, color: Colors.grey[300]!), + side: BorderSide(width: 1, color: Colors.grey[300]), borderRadius: BorderRadius.all(Radius.circular(10)), ), clipBehavior: Clip.antiAlias, diff --git a/lib/file_upload.dart b/lib/file_upload.dart index 8f5e7ff..a4655fa 100644 --- a/lib/file_upload.dart +++ b/lib/file_upload.dart @@ -16,15 +16,15 @@ class FileUpload extends StatefulWidget { } class _FileUploadState extends State { - late StreamSubscription _dragOverSubscription; - late StreamSubscription _dropSubscription; + StreamSubscription _dragOverSubscription; + StreamSubscription _dropSubscription; @override void initState() { super.initState(); - _dropSubscription = document.body!.onDragOver.listen(_onDragOver); - _dropSubscription = document.body!.onDrop.listen(_onDrop); + _dropSubscription = document.body.onDragOver.listen(_onDragOver); + _dropSubscription = document.body.onDrop.listen(_onDrop); } void _onDragOver(MouseEvent event) { @@ -88,8 +88,8 @@ class _FileUploadState extends State { @override void dispose() { - _dragOverSubscription.cancel(); - _dropSubscription.cancel(); + _dragOverSubscription?.cancel(); + _dropSubscription?.cancel(); super.dispose(); } } diff --git a/lib/path_view.dart b/lib/path_view.dart index 231665b..1c3cb6d 100644 --- a/lib/path_view.dart +++ b/lib/path_view.dart @@ -6,7 +6,7 @@ class PathView extends StatelessWidget { @override Widget build(BuildContext context) { return Consumer( - builder: (BuildContext context, AppState app, Widget? child) { + builder: (BuildContext context, AppState app, Widget child) { return Row( children: [ _buildPathElement(app.boxName), diff --git a/pubspec.yaml b/pubspec.yaml index 65b779e..03d0e60 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -4,7 +4,7 @@ description: A new Flutter project. version: 1.0.0+1 environment: - sdk: ">=2.12.0 <3.0.0" + sdk: ">=2.6.0 <3.0.0" dependencies: flutter: