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

Overview

Colored JSON

Convert JSON string into customizable widget.

Getting Started

ColoredJson is a stateless widget that produces a structured view of JSON string provided. It can be used like any other flutter widget. It's fully customizable where you can set different colors to different datatypes including colon, comma and brackets. Set indent length. Use text style of your choice. You can also change the background color.

Default View Customized View 1 Customized View 2

Usage

  • Pass a JSON string to the data parameter of ColoredJson Widget

Simple Usage

const String responseBody = '''
{
  'id' : 1,
  'name' : 'Colored Json',
  'isFlutterAwesome' : true,
}
''';

ColoredJson(
	data: responseBody,
)

Full Usage

final dartMap = {
  "id": 24,
  "name": "Manthan Khandale",
  "score": 7.6,
  "socials": null,
  "hobbies": [
    "Music",
    "Filmmaking",
  ],
  "isFlutterCool": true,
};

ColoredJson(
	data: jsonEncode(dartMap),
	indentLength: 5,
	keyColor: Colors.green,
	backgroundColor: Colors.black,
	boolColor: Colors.white,
	nullColor: Colors.redAccent,
	stringColor: Colors.cyan,
	curlyBracketColor: Colors.yellow,
	doubleColor: Colors.deepOrange,
	squareBracketColor: Colors.amber,
	commaColor: Colors.yellow,
	colonColor: Colors.purple,
	intColor: Colors.lime,
	textStyle: const TextStyle(
		fontSize: 20,
		letterSpacing: 2,
		),	
	)
Parameter Info
data (required) A JSON string to be formatted
keyColor Color of Json Key
intColor Color of integer type value
doubleColor Color of decimal type value
stringColor Color of string type value
boolColor Color of boolean type value
nullColor Color of null type value
curlyBracketColor Color of curly brackets {}
squareBracketColor Color of square brackets []
commaColor Color of comma ( , )
colonColor Color of colon ( : )
backgroundColor Background color of widget
textStyle Textstyle of texts in the widget
indentLength Indent length

Upcoming Tasks

  • Code shrink feature
  • Add Inner Spacing parameter
  • Add tests
You might also like...

A Dart package that converts big numbers to what's pleasant to see

Convert big numbers to what's pleasant to see (an adorable, little girl, perhaps?)

Apr 16, 2022

Flutter plugin which helps you to find links in String using NSDataDetector and Linkify

Flutter plugin which helps you to find links in String using NSDataDetector and Linkify

Flutter's Native Linkify native_linkify is a Flutter plugin. Use it to find links in plain-text. The plugin uses NSDataDetector for iOS and macOS; Lin

Nov 29, 2022

Fluter-json - App Demonstrating JSON Data Parsing with various flutter widgets

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

Jul 10, 2021

Json editor - A json editor on flutter

Json editor - A json editor on flutter

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

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

Sep 28, 2022

Flutter mapbox - This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget

Flutter mapbox - This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget

Flutter Mapbox GL Please note that this project is community driven and is not a

Jan 31, 2022

Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Dec 29, 2022

A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

Nov 26, 2022

Zooper flutter encoding utf16 - Helper classes to encode and decode UTF16 string to List

zooper_flutter_encoding_utf16 Helper classes to encode and decode UTF16 string t

Feb 10, 2022
Owner
null
A flutter app which calculate your heart beat and takes few inputs and predict whether you have heart disease or not.

Heart Care App ?? ?? ❤️ ⭐️ Features: ⚡️ Lets you sign up and login ⚡️ Montioring your heart failure risk and heart beat through charts ⚡️ View Medical

HINA KHADIM 8 Oct 31, 2022
A beautifully crafted app that takes you through an onboarding experience

Onboarding App davidcobbina.com Beautifully crafted with flutter and love, a useful UI Kit for developers and designers who want to kick start their a

David-Legend 80 Dec 3, 2022
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022
An Interactive tool for visualization of data reported by the Amiga Tractor onto the panoramic cluster display of Liquid Galaxy.

Amiga Crop Visualizer About Amiga Crop Visualizer The App takes Data from the Amiga Drone and shows it in colored KML onto the Liquid Galaxy. For demo

Yash Raj Bharti 3 Oct 16, 2022
Easy to use text widget for Flutter apps, which converts inlined urls into working, clickable links

LinkText Easy to use text widget for Flutter apps, which converts inlined URLs into clickable links. Allows custom styling. Usage LinkText widget does

Aleksander Woźniak 20 Nov 4, 2022
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
A highly customizable Flutter widget to render and interact with JSON objects.

The spreadsheet with superpowers ✨ ! JSON Data Explorer A highly customizable widget to render and interact with JSON objects. Features Expand and col

rows 15 Dec 21, 2022
It's OK to love Flutter and hate hand-coding design elements. Parabeac-Core converts design files into Flutter code.

Parabeac-Core Parabeac-Core converts design files into Flutter code driven by open-source & community. Contribute · Discord Community · Designer Proto

Parabeac 536 Jan 4, 2023
This is a dart package that converts words to numbers. It can be used in Flutter and normal Dart programs

Wordstonumbers.dart Wordstonumbers.dart is a simple dart package that converts a string of simple worded numbers into digits (e.g one hundred -> 100).

Michael Essiet 3 Oct 17, 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