13 Flutter: JSON Storage

import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:convert'; //to convert json to maps and vice versa
import 'package:path_provider/path_provider.dart'; //add path provider dart plugin on pubspec.yaml file
void main() {
runApp(new MaterialApp(
home: new Home(),
class Home extends StatefulWidget {
State createState() => new HomeState();
class HomeState extends State<Home> {
TextEditingController keyInputController = new TextEditingController();
TextEditingController valueInputController = new TextEditingController();
File jsonFile;
Directory dir;
String fileName = "myJSONFile.json";
bool fileExists = false;
Map<String, String> fileContent;
void initState() {
/*to store files temporary we use getTemporaryDirectory() but we need
permanent storage so we use getApplicationDocumentsDirectory() */
getApplicationDocumentsDirectory().then((Directory directory) {
dir = directory;
jsonFile = new File(dir.path + "/" + fileName);
fileExists = jsonFile.existsSync();
if (fileExists) this.setState(() => fileContent = JSON.decode(jsonFile.readAsStringSync()));
void dispose() {
void createFile(Map<String, String> content, Directory dir, String fileName) {
print("Creating file!");
File file = new File(dir.path + "/" + fileName);
fileExists = true;
void writeToFile(String key, String value) {
print("Writing to file!");
Map<String, String> content = {key: value};
if (fileExists) {
print("File exists");
Map<String, String> jsonFileContent = json.decode(jsonFile.readAsStringSync());
} else {
print("File does not exist!");
createFile(content, dir, fileName);
this.setState(() => fileContent = JSON.decode(jsonFile.readAsStringSync()));
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("JSON Tutorial"),),
body: new Column(
children: <Widget>[
new Padding(padding: new EdgeInsets.only(top: 10.0)),
new Text("File content: ", style: new TextStyle(fontWeight: FontWeight.bold),),
new Text(fileContent.toString()),
new Padding(padding: new EdgeInsets.only(top: 10.0)),
new Text("Add to JSON file: "),
new TextField(
controller: keyInputController,
new TextField(
controller: valueInputController,
new Padding(padding: new EdgeInsets.only(top: 20.0)),
new RaisedButton(
child: new Text("Add key, value pair"),
onPressed: () => writeToFile(keyInputController.text, valueInputController.text),
name: tutorial
description: A new Flutter project.
sdk: flutter
path_provider: "^0.4.0"
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.0
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec
# The following section is specific to Flutter.
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.io/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.io/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
# For details regarding fonts from package dependencies,
# see https://flutter.io/custom-fonts/#from-packages