A widget to show json object

Overview

flutter_json_widget

A Json viewer widget for flutter.

Using the library

The /example/ folder in the GitHub repo contains a full Flutter app with demo examples.

Use this package as a library on Dart dev

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_json_widget: ^1.0.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_json_widget/flutter_json_widget.dart';

4. Show it

@override
Widget build(BuildContext context) {
    var testString = '''{
        "I": "How are you?",
        "You": "Excellent!"}
        ''';
    Map<String, dynamic> jsonObj = jsonDecode(testString);
    return SafeArea(
        child: SingleChildScrollView(
            child: JsonViewerWidget(jsonObj)
        ),
    );
}

Demo

Demo

You might also like...

A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.

A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.

English | 简体中文 The official BottomAppBar can only display a notch FAB with an app bar, and sometimes we need a convex FAB. BottomAppBar and NotchShape

Dec 28, 2022

Provide easy and flexible way to show SnackBar. Simple text, undo, and error style are supported.

Provide easy and flexible way to show SnackBar. Simple text, undo, and error style are supported.

snack_bar_presenter Provide easy and flexible way to show SnackBar. Simple text, undo, and error style are supported. . . . Usage import 'package:exam

Nov 30, 2020

Android app to show movie ratings when browsing Netflix, Amazon Prime Video and other supported video streaming apps on the phone

Android app to show movie ratings when browsing Netflix, Amazon Prime Video and other supported video streaming apps on the phone

Flutter - Movie Ratings You can get the latest Playstore version here on Playstore - or download directly - 0.4.5 Screenshots of master Search Page Fa

Nov 23, 2022

An app to show everything bus related in Singapore, including arrival times and a directory

An app to show everything bus related in Singapore, including arrival times and a directory

NextBus SG An app to show everything bus related in Singapore, including bus arrival times and a directory, with extra features. 🎆 Gallery Click here

Sep 13, 2022

The easiest way to show notification.

The easiest way to show notification.

Starlight Notification The easiest way to show notification. Features ☑️ Show Notification ☑️ Cancel Notification ☑️ Cancel All Notification Watch the

Oct 19, 2022

This plugin lets you show a message in a simple way.

error_message This plugin lets you show a message in a simple way. Usage ErrorMessage( icon: Icon(Icons.error), title: "Error Title",

Dec 5, 2021

This App Currently is a Simple Budget Manager Show Analytics Based on Your Past Transactions

This App Currently is a Simple Budget Manager Show Analytics Based on Your Past Transactions

Budgex [In Progress] This App Currently is a Simple Budget Manager Show Analytics Based on Your Past Transactions Features Localization Persistant Sto

Nov 14, 2022

Application that consumes the Movie Database (TMDB) api to show and search any kind of movie with its actors.

# cartelera A new Flutter project. ## Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Jan 11, 2022

A sample application to show Paytm Flutter Clone.

A sample application to show Paytm Flutter Clone.

Flutter Paytm UI Demo A sample application to show Paytm Flutter Clone. Demo Android Screen iOS Screen Getting Started This project is a starting poin

Sep 27, 2022
Comments
  • Support for Dark Mode

    Support for Dark Mode

    The widget works and looks great on primarily bright backgrounds. With a dark background the contrast is sometimes a bit difficult.

    Two ideas that might be useful:

    • Making the color theme of all colors customizable.
    • Providing predefined colorsets for e.g. dark / bright colors.
    opened by beevelop 3
Releases(1.0.2)
Owner
demdog
demdog
A flutter widget that show the camera stream and allow ML vision recognition on it, it allow you to detect barcodes, labels, text, faces...

Flutter Camera Ml Vision A Flutter package for iOS and Android to show a preview of the camera and detect things with Firebase ML Vision. Installation

Rushio Consulting 257 Jan 2, 2023
validate JSON against your own Blueprint 👑🧬

PART OF QUEEN ?? Validate JSON Against Your Own Blueprint ?? ?? Content Validate JSON Against Your Own Blueprint ?? ?? Content Motivation NOTE Feature

Ahmed Masoud 12 Oct 29, 2022
My flutter projects work with JSON

Apps work with JSON A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Samandar 1 Oct 21, 2021
Fluttermobile - Flutter Movie App Using BLoc Pattern and JSON API

Flutter Movie App Using BLoc Pattern and JSON API. Data Provider: https://www.th

BEŞİR ÖZTEN 5 Jul 6, 2022
A Completed Functional Flutter App - FindSeat (BLoC + Json API + Unit Test + Firebase Auth)

A Completed Functional Flutter App - FindSeat (BLoC + Json API + Unit Test + Firebase Auth) I. Introduction I’m Android Developer and I’m working in a

Khoa Hoang 1k Jan 6, 2023
WeatherApp - A Weather App using json api And Flutter

Weather App Bu uygulamda json api kullanarak bir WeatherApp yaptım. State Manage

Kerem 4 Oct 12, 2022
A Completed Functional Flutter App - FindSeat (BLoC + Json API + Unit Test + Firebase Auth)

A Completed Functional Flutter App - FindSeat (BLoC + Json API + Unit Test + Firebase Auth) II. Showcase 2.1. Home In Home screen, it just simply load

Dominique Rwema Bagirishya 48 Dec 6, 2022
A Flutter package for show custom in-app notification.

?? in_app_notification A Flutter package to show custom in-app notification with any Widgets. ✍️ Usage Import it. dependencies: in_app_notificatio

CBcloud 18 Oct 27, 2022
This Dashboard was made to show one of the use cases in which Flutter web is applied.

Dashboard Flutter Web This Dashboard was made to show one of the use cases in which Flutter web is applied. Tasks Improve the splash Screen Create Log

Celestino Lopes 96 Nov 2, 2022
Flutter app that uses Instagram public API to show users profile

instagramfinder A new Flutter project. Getting Started This project is a starting point for a Flutter application. I used Instagram public API for fet

Wali Seddiqi 5 Sep 7, 2022