Flutter: How to display a short text file from assets on screen of phone?

问题

I have ckecked all the answers about reading and writing file in Flutter. None of them answers the question of how to display a text file on the screen of the phone.

All I want to do is to have a function/method to call with the filename as input, which will display a short text file from my assets directory on a new screen on the phone that I have navigated to. The file is correctly placed in assets and mentioned in the yaml file. I have seen the suggestion to use:

Future loadAsset() async {
return await rootBundle.loadString('assets/my_text.txt');
}

but I don't know how to use it and what code to use to display a file on the screen.

回答1:

I suppose that you know how to display a Text on the Screen, so I will just try to explain how I normally read files.

First you have to import:

import 'package:path_provider/path_provider.dart';
import 'dart:io';

and then, in your class, you can use this:

Future<void> readMyFile() async {
  Directory directory = await getApplicationDocumentsDirectory();
  var _localFilePath = (directory.path + "yourfile.txt");

     if (FileSystemEntity.typeSync(_localFilePath) == FileSystemEntityType.file) {
       final myFile = await _localFile(_localFilePath);
       List<String> linesAsList = await myFile.readAsLinesSync();

    for (var i = 0; i < linesAsList.length; i++) {
      //print("Line No: " + i.toString() + "\n");
      print(linesAsList[i]);
    }
  }
}

Future<File> _localFile(String myPath) async {
  return File(myPath);
}

At the end, the content of your file is in linesAsList as a list of lines.

回答2:

First this code to have a new screen and call your code:

child: 
FlatButton(
  onPressed: () {
    Navigator.pushNamed(context, '/indled');
    setState(() {
      ReadFile(fileName: 'myfile.txt');
      print('Button 1 got pressed');
    });
    },
    ......

It prints Button 1 got pressed on console and goes fine to new screen indled, which has the code:

class Indled extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Indledning'),
  ),
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Expanded(
        child: Container(
          padding: EdgeInsets.all(8.0),
          child: Text('Indledning 2'),

It prints 'Indledning 2' on the screen as a test, but nothing more happens. I have your code as the following in a separate file:

class ReadFile {
ReadFile({this.fileName});

final String fileName;

Future<void> readMyFile() async {
Directory directory = await      getApplicationDocumentsDirectory();
var _localFilePath = (directory.path + "myfile.txt");

if (FileSystemEntity.typeSync(_localFilePath) ==
    FileSystemEntityType.file) {
  final myFile = await _localFile(_localFilePath);
  List<String> linesAsList = myFile.readAsLinesSync();

  for (var i = 0; i < linesAsList.length; i++) {
    //print("Line No: " + i.toString() + "\n");
    print(linesAsList[i]);
  }
}
}

Future<File> _localFile(String myPath) async {
return File(myPath);
}
}

On the line: List linesAsList = await myFile.readAsLinesSync(); I get a warning on await: Await only futures so I took out await. But same result if await is included.

I have tried to put fileName instead of "my file.txt" in your code, but same result.

回答3:

You do not need to add Esen Mehmet's code to a new file. Suppose you are pressing a button which opens up the text file on a new page, you just need to add the below code in the same class :

Future _future;
Future<String> loadString() async =>
await rootBundle.loadString('assets/text.txt');

@override
void initState() {
_future = loadString();
super.initState();

And the below code in the body of the scaffold:

    FutureBuilder(
future: _future,
builder: (context, snapshot) =>
Text(snapshot.hasData ? '${snapshot.data}' : ' Reading...')),

来源：https://stackoverflow.com/questions/56188076/flutter-how-to-display-a-short-text-file-from-assets-on-screen-of-phone

标签

Flutter

text-files

display