|
1 | | -# table_widget |
| 1 | +# Json Table Widget [](https://github.com/apgapg/json_table) [](https://twitter.com/ayushpgupta)  [](https://play.google.com/store/apps/details?id=com.coddu.flutterprofile)[](https://github.com/apgapg/json_table) |
2 | 2 |
|
3 | | -A new Flutter package. |
4 | 3 |
|
5 | | -## Getting Started |
| 4 | +This Flutter package provides a Json Table Widget for directly showing table from a json(Map). |
6 | 5 |
|
7 | | -This project is a starting point for a Dart |
8 | | -[package](https://flutter.io/developing-packages/), |
9 | | -a library module containing code that can be shared easily across |
10 | | -multiple Flutter or Dart projects. |
| 6 | +<img src="https://raw.githubusercontent.com/apgapg/json_table/master/src/s1.gif" height = "400" alt="PieChart"> |
11 | 7 |
|
12 | | -For help getting started with Flutter, view our |
13 | | -[online documentation](https://flutter.io/docs), which offers tutorials, |
14 | | -samples, guidance on mobile development, and a full API reference. |
| 8 | +# 💻 Installation |
| 9 | +In the `dependencies:` section of your `pubspec.yaml`, add the following line: |
| 10 | + |
| 11 | +[](https://pub.dartlang.org/packages/json_table) |
| 12 | + |
| 13 | +```yaml |
| 14 | +dependencies: |
| 15 | + json_table: <latest version> |
| 16 | +``` |
| 17 | +
|
| 18 | +# ❔ Usage |
| 19 | +
|
| 20 | +### Import this class |
| 21 | +
|
| 22 | +```dart |
| 23 | +import 'package:json_table/json_table.dart'; |
| 24 | +``` |
| 25 | + |
| 26 | +### Add Json Table Widget |
| 27 | +- Accepts Map<dynamic> as input. Just decode your json array string and pass it in JsonTable. No casting to model required. |
| 28 | +- Option for creating column header builder. This basically returns a widget to show as table column header |
| 29 | +```dart |
| 30 | +tableHeaderBuilder: (String header) { |
| 31 | + return Container( |
| 32 | + padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0), |
| 33 | + decoration: BoxDecoration(border: Border.all(width: 0.5),color: Colors.grey[300]), |
| 34 | + child: Text( |
| 35 | + header, |
| 36 | + textAlign: TextAlign.center, |
| 37 | + style: Theme.of(context).textTheme.display1.copyWith(fontWeight: FontWeight.w700, fontSize: 14.0,color: Colors.black87), |
| 38 | + ), |
| 39 | + ); |
| 40 | + } |
| 41 | +``` |
| 42 | +- Option for creating table cell builder |
| 43 | +```dart |
| 44 | +tableCellBuilder: (value) { |
| 45 | + return Container( |
| 46 | + padding: EdgeInsets.symmetric(horizontal: 4.0, vertical: 2.0), |
| 47 | + decoration: BoxDecoration(border: Border.all(width: 0.5, color: Colors.grey.withOpacity(0.5))), |
| 48 | + child: Text( |
| 49 | + value, |
| 50 | + textAlign: TextAlign.center, |
| 51 | + style: Theme.of(context).textTheme.display1.copyWith(fontSize: 14.0, color: Colors.grey[900]), |
| 52 | + ), |
| 53 | + ); |
| 54 | + } |
| 55 | +``` |
| 56 | + |
| 57 | +### Simple Implementation |
| 58 | +```dart |
| 59 | +//Decode your json string |
| 60 | +final String jsonSample='[{"id":1},{"id":2}]'; |
| 61 | +var json = jsonDecode(jsonSample); |
| 62 | +
|
| 63 | +//Simply pass this json to JsonTable |
| 64 | +child: JsonTable(json) |
| 65 | +``` |
| 66 | + |
| 67 | +### Full Implementation |
| 68 | +```dart |
| 69 | +JsonTable( |
| 70 | + json, |
| 71 | + tableHeaderBuilder: (String header) { |
| 72 | + return Container( |
| 73 | + padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0), |
| 74 | + decoration: BoxDecoration(border: Border.all(width: 0.5),color: Colors.grey[300]), |
| 75 | + child: Text( |
| 76 | + header, |
| 77 | + textAlign: TextAlign.center, |
| 78 | + style: Theme.of(context).textTheme.display1.copyWith(fontWeight: FontWeight.w700, fontSize: 14.0,color: Colors.black87), |
| 79 | + ), |
| 80 | + ); |
| 81 | + }, |
| 82 | + tableCellBuilder: (value) { |
| 83 | + return Container( |
| 84 | + padding: EdgeInsets.symmetric(horizontal: 4.0, vertical: 2.0), |
| 85 | + decoration: BoxDecoration(border: Border.all(width: 0.5, color: Colors.grey.withOpacity(0.5))), |
| 86 | + child: Text( |
| 87 | + value, |
| 88 | + textAlign: TextAlign.center, |
| 89 | + style: Theme.of(context).textTheme.display1.copyWith(fontSize: 14.0, color: Colors.grey[900]), |
| 90 | + ), |
| 91 | + ); |
| 92 | + }, |
| 93 | + ) |
| 94 | +``` |
| 95 | + |
| 96 | +### Key Highlights |
| 97 | +- The table constructed isn't the flutter's native data table. |
| 98 | +- The table is manually coded hence serves a great learning purpose on how to create simple tables manually in flutter |
| 99 | + |
| 100 | +### Limitations |
| 101 | +- The Json array item's must contain the same keys set in every json object. |
| 102 | +- Currently the column header keys are extracted from first json item of json array. Hence no required keys that are to be shown must be missing in first json object |
| 103 | + |
| 104 | +## TODO |
| 105 | +- [ ] Custom header list parameter. This will help to show only those keys as mentioned in header list |
| 106 | +- [ ] Add support for keys missing in json object |
| 107 | +- [ ] Add support for auto formatting of date |
| 108 | +- [ ] Extracting column headers logic must be change. Not to depend on first object |
| 109 | +- [ ] Pagination support etc. Its good if this table can be replaced with Flutter's native DataTable |
| 110 | + |
| 111 | +# ⭐ My Flutter Packages |
| 112 | +- [pie_chart](https://pub.dartlang.org/packages/pie_chart) [](https://github.com/apgapg/pie_chart) Flutter Pie Chart with cool animation. |
| 113 | +- [avatar_glow](https://pub.dartlang.org/packages/avatar_glow) [](https://github.com/apgapg/avatar_glow) Flutter Avatar Glow Widget with glowing animation. |
| 114 | +- [search_widget](https://pub.dartlang.org/packages/search_widget) [](https://github.com/apgapg/search_widget) Flutter Search Widget for selecting an option from list. |
| 115 | +- [animating_location_pin](https://pub.dev/packages/animating_location_pin) [](https://github.com/apgapg/animating_location_pin) Flutter Animating Location Pin Widget providing Animating Location Pin Widget which can be used while fetching device location. |
| 116 | + |
| 117 | +# ⭐ My Flutter Apps |
| 118 | +- [flutter_profile](https://github.com/apgapg/flutter_profile) [](https://github.com/apgapg/flutter_profile) Showcase My Portfolio: Ayush P Gupta on Playstore. |
| 119 | +- [flutter_sankalan](https://github.com/apgapg/flutter_sankalan) [](https://github.com/apgapg/flutter_sankalan) Flutter App which allows reading/uploading short stories. |
| 120 | + |
| 121 | +# 👍 Contribution |
| 122 | +1. Fork it |
| 123 | +2. Create your feature branch (git checkout -b my-new-feature) |
| 124 | +3. Commit your changes (git commit -m 'Add some feature') |
| 125 | +4. Push to the branch (git push origin my-new-feature) |
| 126 | +5. Create new Pull Request |
0 commit comments