Displaying json models in a Flutter widget

Overview

Displaying json models in a Flutter widget

😎 Cool solution for viewing models in debug working


Image Image Image

Getting Started

Add dependency

dependencies:
  flutter_json_view: ^0.2.1

Add import package

import 'package:flutter_json_view/flutter_json_view.dart';

Easy to use

Add one of the constructors in your code

String constructor

JsonView.string('{"key":"value"}'),

Asset file constructor

JsonView.asset('assets/data.json'),

Map constructor

JsonView.map({"key":"value"}),

Customization

🎨 The package was created in order to be able to customize your json view

drawing

JsonView.string(
    '{"key":"value"}',
    theme: JsonViewTheme(
      keyStyle: TextStyle(
        color: Colors.black54,
        fontSize: 16,
        fontWeight: FontWeight.w600,
      ),
      doubleStyle: TextStyle(
        color: Colors.green,
        fontSize: 16,
      ),
      intStyle: TextStyle(
        color: Colors.green,
        fontSize: 16,
      ),
      stringStyle: TextStyle(
        color: Colors.green,
        fontSize: 16,
      ),
      boolStyle: TextStyle(
        color: Colors.green,
        fontSize: 16,
      ),
      closeIcon: Icon(
        Icons.close,
        color: Colors.green,
        size: 20,
      ),
      openIcon: Icon(
        Icons.add,
        color: Colors.green,
        size: 20,
      ),
      separator: Padding(
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        child: Icon(
          Icons.arrow_right_alt_outlined,
          size: 20,
          color: Colors.green,
        ),
      ),
    ),
  ),

More examples you can see here

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

You might also like...

MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

MoneyTextFormField MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying

Jan 1, 2023

The Flutter app demonstrates displaying data in a weekly format.

The Flutter app demonstrates displaying data in a weekly format.

Flutter weekly chart The Flutter app demonstrates displaying data in a weekly format. I came across this kind of screen in the app that I have been wo

Jan 2, 2023

A showcase app for displaying image lists, developed on Flutter.

A showcase app for displaying image lists, developed on Flutter.

flutter_showcase_app Pixabay: A Flutter demo application. A showcase app for displaying image lists, developed on Flutter. Uses BLOC pattern, SQFLite

Nov 25, 2022

Flutter package for displaying grid view of daily task like Github-Contributions.

Flutter package for displaying grid view of daily task like Github-Contributions.

flutter_annual_task flutter_annual_task Flutter package for displaying grid view of daily task like Github-Contributions. Example Usage Make sure to c

Sep 21, 2022

Flutter package for displaying and animating Scalable Vector Graphics 1.1 files. The package has been written solely in Dart Language.

Flutter package for displaying and animating Scalable Vector   Graphics 1.1 files. The package has been written solely in Dart Language.

Animated SVG | Flutter Package Flutter package for displaying and animating Scalable Vector Graphics 1.1 files. The package has been written solely in

Jul 19, 2022

Android view for displaying PDFs rendered with PdfiumAndroid

Looking for new maintainer! Android PdfViewer AndroidPdfViewer 1.x is available on AndroidPdfViewerV1 repo, where can be developed independently. Vers

Jan 2, 2023

A Funtioning basic Clock UI APP with extra functionalities such as displaying thecurrent time location being used and checking time for other timezones simultaneosly.

clock_UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Dec 28, 2021

🌈 Repository for a compass project, basically an App for displaying bank transfers, with API requests, Flag persistence, Infinite Scroll, Error Handling, Unit Tests, Extract Sharing working with SOLID, BLoC and Designer Patterns.

🌈 Repository for a compass project, basically an App for displaying bank transfers, with API requests, Flag persistence, Infinite Scroll, Error Handling, Unit Tests, Extract Sharing working with SOLID, BLoC and Designer Patterns.

💸 Green Bank Aplicação desenvolvida em Flutter com intuito de trabalhar conexão com API, Gerenciamento de estado usando BLoC, Refatoração, Arquitetur

Oct 7, 2022

This is a Flutter plugin that takes a JSON string and converts it onto a customizable Flutter Widget.

This is a Flutter plugin that takes a JSON string and converts it onto a customizable Flutter Widget.

Colored JSON Convert JSON string into customizable widget. Getting Started ColoredJson is a stateless widget that produces a structured view of JSON s

May 20, 2022
Comments
  • JsonListBuilder-jsonObj is empty list error

    JsonListBuilder-jsonObj is empty list error

    error at: widget.jsonObj.first

    Widget _buildItem(List items) { if (!isOpened) { return ClosedJsonObjectItem( isList: true, jsonViewTheme: widget.jsonViewTheme, count: widget.jsonObj.length, type: Typer.getType(widget.jsonObj.first), ); } return Column( crossAxisAlignment: CrossAxisAlignment.start, children: items, ); }

    opened by pxz8858 0
Releases(1.0.0)
  • 1.0.0(Nov 26, 2022)

  • 0.6.0(Nov 25, 2022)

    What's Changed

    • fix List empty by @pxz8858 in https://github.com/Frezyx/flutter_json_view/pull/13
    • primitiveJsonItemBuilder by @qcks in https://github.com/Frezyx/flutter_json_view/pull/14

    New Contributors

    • @pxz8858 made their first contribution in https://github.com/Frezyx/flutter_json_view/pull/13
    • @qcks made their first contribution in https://github.com/Frezyx/flutter_json_view/pull/14

    Full Changelog: https://github.com/Frezyx/flutter_json_view/compare/0.4.0...0.5.0

    Source code(tar.gz)
    Source code(zip)
  • 0.4.0(Aug 28, 2022)

  • 0.3.1(Apr 30, 2022)

    What's Changed

    • Upgrade android gradle, kotlin and minSDK versions by @codemaker2015 in https://github.com/Frezyx/flutter_json_view/pull/10

    New Contributors

    • @codemaker2015 made their first contribution in https://github.com/Frezyx/flutter_json_view/pull/10

    Full Changelog: https://github.com/Frezyx/flutter_json_view/compare/0.3.0...0.3.1

    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(Jan 8, 2022)

    What's Changed

    • Use SelectableText for values by @jinyus in https://github.com/Frezyx/flutter_json_view/pull/8

    New Contributors

    • @jinyus made their first contribution in https://github.com/Frezyx/flutter_json_view/pull/8

    Full Changelog: https://github.com/Frezyx/flutter_json_view/compare/0.2.1...0.3.0

    Source code(tar.gz)
    Source code(zip)
Owner
Stanislav Ilin
CyberSenior LeadKiller MiddleJuniorEnginer
Stanislav Ilin
Flutter package: Json Table Widget to create table from json array

Json Table Widget ?? Proudly Sponsored by FieldAssist Request a Demo This Flutter package provides a Json Table Widget for directly showing table from

Ayush P Gupta 193 Jan 7, 2023
This is tool to create 3D Models which can be used in Flutter Applications. Tool is developed completely using Flutter.

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

Shubham Yeole 2 Nov 8, 2022
A Dart validation DSL to validate your flutter app models.

Validations made simple A fp inspired validation DSL. For Dart and Flutter projects. Features Completely extensible (create your own combinators, vali

Daniel Cardona Rojas 26 Feb 8, 2022
An unofficial, platform independent, client for accessing different AI models developed by OpenAI

The OpenAI API can be applied to virtually any task that involves understanding or generating natural language or code. They offer a spectrum of model

Francesco Coppola 14 Dec 30, 2022
Fluter-json - App Demonstrating JSON Data Parsing with various flutter widgets

users_list Flutter App to Demonstrate JSON Parsing Getting Started This project is a starting point for a Flutter application. A few resources to get

Khurram Rizvi 5 Jul 10, 2021
Json editor - A json editor on flutter

Features Support add comment; Support show errors for invalid json text; Pretty

Chan Young 12 Nov 18, 2022
State Persistence - Persist state across app launches. By default this library store state as a local JSON file called `data.json` in the applications data directory. Maintainer: @slightfoot

State Persistence Persist state across app launches. By default this library store state as a local JSON file called data.json in the applications dat

Flutter Community 70 Sep 28, 2022
Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON.

JSON to Dart Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON. This library is designed to ge

Javier Lecuona 1.2k Dec 25, 2022
A JSON serialize class to convert 'to' and 'from' JSON format Enums, DateTime and any of your own classes.

A JSON serialize class to convert 'to' and 'from' JSON format Enums, DateTime and any of your own classes. Introduction Jsonize solves the problem of

null 2 Nov 17, 2022
A cross-platform Flutter widget for displaying websites. Optional navigation buttons.

Overview Gives you a cross-platform Flutter widget for displaying websites and other web content. Licensed under the Apache License 2.0. Links Github

Dint 11 Oct 23, 2022