Flutter - JSON from File

This example loads a sample dataset from a file and displays a random entry in the UI

Loading data from a static json file

assets:
  - assets/data/quotes.json

Import Services and convert

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

Load data into a variable

class _MyHomePageState extends State<MyHomePage> {
  List _quotes = [];
  

  @override
  void initState() {
    readJson();
    
    super.initState();
  }
...

  void readJson() async {
    final String response =
        await rootBundle.loadString('assets/data/quotes.json');
    final data = await json.decode(response);

    setState(() {
      _quotes = data;
    });
  }

Display a random quote

class Quote {
  String quote = "";
  String author = "";
}
class _MyHomePageState extends State<MyHomePage> {
  List _quotes = [];
  Quote qod = Quote();

  @override
  void initState() {
    readJson();
  
    super.initState();
  }
...
  


  void _getRandomQuote() {
    if (_quotes.length > 0) {
      int index = Random().nextInt(_quotes.length);
      Quote q = Quote()
        ..author = _quotes[index]["author"]
        ..quote = _quotes[index]["quote"];

      setState(() {
        qod = q;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    _getRandomQuote();

...

  Text(qod.quote),

Pull a new quote



  ...

     floatingActionButton: FloatingActionButton(
        onPressed: _getRandomQuote,
        tooltip: 'Refresh',
        child: const Icon(Icons.refresh),
      ),

  ...

[[../../../_notes/_tech/Flutter/Flutter|Back to Flutter]]