Flutter
  • Flutter Tutorials Handbook
  • 01 Flutter: Hello World
    • Related Article
  • 02 Flutter: Stateless Widgets
  • 03 Flutter: Buttons and Stateful widgets
  • 04 Flutter: Basic Navigation & Routes
    • Simple routes using StatelessWidget
    • Routes using StatefulWidget
  • 05 Flutter: Using onChanged to show input text
  • 06 Flutter: Using onSubmitted to show input text after submit
  • 07 Flutter: Adding-Deleting text in TextField
  • 08 Flutter: Tab Navigation
  • 09 Flutter: HTTP requests and Rest API
  • 10 Flutter: ListView with JSON or List Data
  • 11 Flutter: Sliding menu using a Drawer
    • Simple Drawer
    • Drawer using variables
  • 12 Flutter: Animations
  • 13 Flutter: JSON Storage
  • 14 Flutter: Friendly Chat App
  • 15 Flutter: Changing icon color onfocus
  • 16 Flutter: Horizontal ListView and Tabs
  • 17 Flutter: RaisedButton
  • 18 Flutter: RaisedButton with parameters
  • 19 Flutter: FlatButton
  • 20 Flutter: IconButton
  • 21 Flutter: Updating data in TextField
  • 22 Flutter: Checkbox
  • 23 Flutter: Radio with Functions
  • 24 Flutter: Switch
  • 25 Flutter: Slider
  • 26 Flutter: DatePicker
  • 27 Flutter: appBar
  • 28 Flutter: Floating Action Button
  • 29 Flutter: Drawer which shows Toggle Menu
  • 30 Flutter: Footer Buttons
  • 31 Flutter: BottomNavigationBar
  • 32 Flutter: Using BottomSheets
  • 33 Flutter: Using SnackBar
  • 34 Flutter: AlertDialog
  • 35 Flutter: SimpleDialog
  • 36 Flutter: Rows and Columns
  • 37 Flutter: Using Cards
  • 38 Flutter: Using Expanded
  • 39 Flutter: ListviewBuilder using Dart maps
  • 40 Flutter: ListviewBuilder using Dart lists
  • 41 Flutter: Using Custom Widgets
  • 42 Flutter: Using Image Assets
  • 43 Flutter: ListviewBuilder with Refresh Indicator
Powered by GitBook
On this page

13 Flutter: JSON Storage

main.dart
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 {
  @override
  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; 

  @override
  void initState() {
    super.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()));
    });
  }

  @override
  void dispose() {
    keyInputController.dispose();
    valueInputController.dispose();
    super.dispose();
  }

  void createFile(Map<String, String> content, Directory dir, String fileName) {
    print("Creating file!");
    File file = new File(dir.path + "/" + fileName);
    file.createSync();
    fileExists = true;
    file.writeAsStringSync(JSON.encode(content));
  }

  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());
      jsonFileContent.addAll(content);
      jsonFile.writeAsStringSync(JSON.encode(jsonFileContent));
    } else {
      print("File does not exist!");
      createFile(content, dir, fileName);
    }
    this.setState(() => fileContent = JSON.decode(jsonFile.readAsStringSync()));
    print(fileContent);
  }

  @override
  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),
          )
        ],
      ),
    );
  }
}
pubspec.yaml
name: tutorial
description: A new Flutter project.

dependencies:
  flutter:
    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

dev_dependencies:
  flutter_test:
    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.
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
Previous12 Flutter: AnimationsNext14 Flutter: Friendly Chat App

Last updated 6 years ago