Flutter Example - Read Asset File

 

 

1. Prepare a file for use in your app.

Save the following file in the assets/files directory.

albums.json

0.01MB

 

2. Add this to pubspec.yaml file

flutter:
  uses-material-design: true
  assets:
    - assets/files/albums.json # add this

 

3. Source Code

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

ReadAssetFileState pageState;

class ReadAssetFile extends StatefulWidget {
  @override
  ReadAssetFileState createState() {
    pageState = ReadAssetFileState();
    return pageState;
  }
}

class ReadAssetFileState extends State<ReadAssetFile> {
  String filePath = "assets/files/albums.json";
  String fileText = "";

  readFile() async {
    String text = await rootBundle.loadString(filePath);
    setState(() {
      fileText = text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Read Asset File")),
      body: Column(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Row(
              children: <Widget>[
                Text("File Info: "),
                Container(width: 10),
                Expanded(child: customTextContainer(filePath)),
                Container(width: 10),
                customButton("Read", () {
                  readFile();
                })
              ],
            ),
          ),
          Expanded(
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              decoration: BoxDecoration(
                  color: Colors.grey[200],
                  border: Border.all(color: Colors.grey, width: 1)),
              child: Center(
                child: SingleChildScrollView(
                  child: Text(
                    fileText,
                    style: TextStyle(fontSize: 13),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  customTextContainer(String text) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 1),
          borderRadius: BorderRadius.circular(5)),
      child: Text(text),
    );
  }

  customButton(String text, Null Function() onPressed) {
    return SizedBox(
      height: 30,
      width: 60,
      child: FlatButton(
        padding: const EdgeInsets.all(0),
        color: Colors.blue,
        textColor: Colors.white,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        child: Text(
          text,
          style: TextStyle(fontSize: 13),
        ),
        onPressed: onPressed,
      ),
    );
  }
}

 

 

▶ Go to Table of Contents | 강의 목차로 이동

---

※ This example is also available in the Flutter Code Examples app. | 본 예제는 Flutter Code Examples 앱에서도 제공됩니다.

Flutter Code Examples - Google Play 앱