Flutter – Load Text Assets

In Flutter, you can easily load text assets such as JSON files, configuration files, or plain text files into your app’s memory at runtime. This allows you to access the data contained in these files and use it to populate your app’s UI or perform other operations. To load text assets in Flutter, you first need to add the files to your project’s assets directory. This can be done by adding the file paths to the pubspec.yaml file, which is located at the root of your project.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the material package that gives us the important methods and then call the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';

void main() {
    runApp(RunMyApp());
}

Step 3: Now we have to make a stateful widget RunMyApp Because our application does go to change its state and then return the materialApp widget which allows us the set the title and theme and many more.

Step 4: Open the pubspec.yaml file and add the following code to specify the asset.

flutter:
 assets:
   - assets/data.json

Step 5: In your Dart code, import the flutter/services package:

import 'package:flutter/services.dart' show rootBundle;

To load the Text data from the asset, use the rootBundle.loadString method as shown below:

Future<void> loadAsset() async {
   String fileText = await rootBundle.loadString('assets/about.txt');
   setState(() {
     _fileContents = fileText;
   });
 }

Code Example:

Dart

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

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatefulWidget {
  @override
  _RunMyAppState createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  String _fileContents = '';

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

  Future<void> loadAsset() async {
    String fileText = await rootBundle.loadString('assets/about.txt');
    setState(() {
      _fileContents = fileText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Asset Text File'),
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Text(_fileContents),
        ),
      ),
    );
  }
}

Output:

This code creates a Flutter app with a Text widget that initially displays an empty string. In the initState() method, the loadAsset() method is called to load the contents of the example.txt file from the assets folder. The loadString() method of rootBundle is used to load the file contents as a string. Once the file contents are loaded, the setState() method is called to update the _fileContents variable with the loaded text. Finally, the Text widget in the body of the app is updated with the loaded text.