/
main.dart
405 lines (376 loc) · 14 KB
/
main.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:http/http.dart' as http;
import 'package:json_data_explorer/json_data_explorer.dart';
import 'package:provider/provider.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Json Data Explorer',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Test Data Explorer'),
),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
Text(
'Small JSON',
style: Theme.of(context).textTheme.headline6,
),
const _OpenJsonButton(
title: 'ISS current location',
url: 'http://api.open-notify.org/iss-now.json',
padding: EdgeInsets.symmetric(vertical: 8.0),
),
Text(
'Medium JSON',
style: Theme.of(context).textTheme.headline6,
),
const _OpenJsonButton(
title: 'Nobel prizes country',
url: 'http://api.nobelprize.org/v1/country.json',
padding: EdgeInsets.symmetric(vertical: 8.0),
),
const _OpenJsonButton(
title: 'Australia ABC Local Stations',
url:
'https://data.gov.au/geoserver/abc-local-stations/wfs?request=GetFeature&typeName=ckan_d534c0e9_a9bf_487b_ac8f_b7877a09d162&outputFormat=json',
),
Text(
'Large JSON',
style: Theme.of(context).textTheme.headline6,
),
const _OpenJsonButton(
title: 'Pokémon',
url: 'https://pokeapi.co/api/v2/pokemon/?offset=0&limit=2000',
padding: EdgeInsets.symmetric(vertical: 8.0),
),
const _OpenJsonButton(
title: 'Earth Meteorite Landings',
url: 'https://data.nasa.gov/resource/y77d-th95.json',
),
const _OpenJsonButton(
title: 'Reddit r/all',
url: 'https://www.reddit.com/r/all.json',
),
Text(
'Exploding JSON',
style: Theme.of(context).textTheme.headline6,
),
const _OpenJsonButton(
title: '25MB GitHub Json',
url:
'https://raw.githubusercontent.com/json-iterator/test-data/master/large-file.json',
padding: EdgeInsets.only(top: 8.0, bottom: 32.0),
),
Text(
'More datasets at https://awesomeopensource.com/project/jdorfman/awesome-json-datasets',
style: Theme.of(context).textTheme.caption,
),
],
),
);
}
}
class DataExplorerPage extends StatefulWidget {
final String jsonUrl;
final String title;
const DataExplorerPage({
Key? key,
required this.jsonUrl,
required this.title,
}) : super(key: key);
@override
_DataExplorerPageState createState() => _DataExplorerPageState();
}
class _DataExplorerPageState extends State<DataExplorerPage> {
final searchController = TextEditingController();
final itemScrollController = ItemScrollController();
final DataExplorerStore store = DataExplorerStore();
@override
void initState() {
_loadJsonDataFrom(widget.jsonUrl);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SafeArea(
minimum: const EdgeInsets.all(16),
child: ChangeNotifierProvider.value(
value: store,
child: Consumer<DataExplorerStore>(
builder: (context, state, child) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: TextField(
controller: searchController,
/// Delegates the search to [DataExplorerStore] when
/// the text field changes.
onChanged: (term) => state.search(term),
decoration: const InputDecoration(
hintText: 'Search',
),
),
),
const SizedBox(
width: 8,
),
if (state.searchResults.isNotEmpty)
Text(_searchFocusText()),
if (state.searchResults.isNotEmpty)
IconButton(
onPressed: () {
store.focusPreviousSearchResult();
_scrollToSearchMatch();
},
icon: const Icon(Icons.arrow_drop_up),
),
if (state.searchResults.isNotEmpty)
IconButton(
onPressed: () {
store.focusNextSearchResult();
_scrollToSearchMatch();
},
icon: const Icon(Icons.arrow_drop_down),
),
],
),
const SizedBox(
height: 16.0,
),
Row(
children: [
TextButton(
onPressed:
state.areAllExpanded() ? null : state.expandAll,
child: const Text('Expand All'),
),
const SizedBox(
width: 8.0,
),
TextButton(
onPressed:
state.areAllCollapsed() ? null : state.collapseAll,
child: const Text('Collapse All'),
),
],
),
const SizedBox(
height: 16.0,
),
Expanded(
child: JsonDataExplorer(
nodes: state.displayNodes,
itemScrollController: itemScrollController,
itemSpacing: 4,
/// Builds a widget after each root node displaying the
/// number of children nodes that it has. Displays `{x}`
/// if it is a class or `[x]` in case of arrays.
rootInformationBuilder: (context, node) => DecoratedBox(
decoration: const BoxDecoration(
color: Color(0x80E1E1E1),
borderRadius: BorderRadius.all(Radius.circular(2)),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4,
vertical: 2,
),
child: Text(
node.isClass
? '{${node.childrenCount}}'
: '[${node.childrenCount}]',
style: GoogleFonts.inconsolata(
fontSize: 12,
color: const Color(0xFF6F6F6F),
),
),
),
),
/// Build an animated collapse/expand indicator. Implicitly
/// animates the indicator when
/// [NodeViewModelState.isCollapsed] changes.
collapsableToggleBuilder: (context, node) =>
AnimatedRotation(
turns: node.isCollapsed ? -0.25 : 0,
duration: const Duration(milliseconds: 300),
child: const Icon(Icons.arrow_drop_down),
),
/// Builds a trailing widget that copies the node key: value
///
/// Uses [NodeViewModelState.isFocused] to display the
/// widget only in focused widgets.
trailingBuilder: (context, node) => node.isFocused
? IconButton(
padding: EdgeInsets.zero,
constraints: const BoxConstraints(maxHeight: 18),
icon: const Icon(
Icons.copy,
size: 18,
),
onPressed: () => _printNode(node),
)
: const SizedBox(),
/// Creates a custom format for classes and array names.
rootNameFormatter: (dynamic name) => '$name',
/// Dynamically changes the property value style and
/// interaction when an URL is detected.
valueStyleBuilder: (dynamic value, style) {
final isUrl = _valueIsUrl(value);
return PropertyOverrides(
style: isUrl
? style.copyWith(
decoration: TextDecoration.underline,
)
: style,
onTap: isUrl ? () => _launchUrl(value as String) : null,
);
},
/// Theme definitions of the json data explorer
theme: DataExplorerTheme(
rootKeyTextStyle: GoogleFonts.inconsolata(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 16,
),
propertyKeyTextStyle: GoogleFonts.inconsolata(
color: Colors.black.withOpacity(0.7),
fontWeight: FontWeight.bold,
fontSize: 16,
),
keySearchHighlightTextStyle: GoogleFonts.inconsolata(
color: Colors.black,
backgroundColor: const Color(0xFFFFEDAD),
fontWeight: FontWeight.bold,
fontSize: 16,
),
focusedKeySearchHighlightTextStyle:
GoogleFonts.inconsolata(
color: Colors.black,
backgroundColor: const Color(0xFFF29D0B),
fontWeight: FontWeight.bold,
fontSize: 16,
),
valueTextStyle: GoogleFonts.inconsolata(
color: const Color(0xFFCA442C),
fontSize: 16,
),
valueSearchHighlightTextStyle: GoogleFonts.inconsolata(
color: const Color(0xFFCA442C),
backgroundColor: const Color(0xFFFFEDAD),
fontWeight: FontWeight.bold,
fontSize: 16,
),
focusedValueSearchHighlightTextStyle:
GoogleFonts.inconsolata(
color: Colors.black,
backgroundColor: const Color(0xFFF29D0B),
fontWeight: FontWeight.bold,
fontSize: 16,
),
indentationLineColor: const Color(0xFFE1E1E1),
highlightColor: const Color(0xFFF1F1F1),
),
),
),
],
),
),
),
),
);
}
String _searchFocusText() =>
'${store.focusedSearchResultIndex + 1} of ${store.searchResults.length}';
Future _loadJsonDataFrom(String url) async {
debugPrint('Calling Json API');
final data = await http.read(Uri.parse(url));
debugPrint('Done!');
final dynamic decoded = json.decode(data);
store.buildNodes(decoded, areAllCollapsed: true);
}
void _printNode(NodeViewModelState node) {
if (node.isRoot) {
final value = node.isClass ? 'class' : 'array';
debugPrint('${node.key}: $value');
return;
}
debugPrint('${node.key}: ${node.value}');
}
void _scrollToSearchMatch() {
final index = store.displayNodes.indexOf(store.focusedSearchResult.node);
if (index != -1) {
itemScrollController.scrollTo(
index: index,
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOutCubic,
);
}
}
bool _valueIsUrl(dynamic value) {
if (value is String) {
return Uri.tryParse(value)?.hasAbsolutePath ?? false;
}
return false;
}
Future _launchUrl(String url) {
return launch(url);
}
@override
void dispose() {
searchController.dispose();
super.dispose();
}
}
/// A button that navigates to the data explorer page on pressed.
class _OpenJsonButton extends StatelessWidget {
final String url;
final String title;
final EdgeInsets padding;
const _OpenJsonButton({
Key? key,
required this.url,
required this.title,
this.padding = const EdgeInsets.only(bottom: 8.0),
}) : super(key: key);
@override
Widget build(BuildContext context) => Padding(
padding: padding,
child: ElevatedButton(
child: Text(title),
onPressed: () => Navigator.of(context).push<MaterialPageRoute>(
MaterialPageRoute(
builder: (ctx) => DataExplorerPage(
jsonUrl: url,
title: title,
),
),
),
),
);
}