
开篇寄语
如何在Flutter应用中实现加载阅读诸如txt, Markdown, Js等等的文件,官方开发文档是给予了一篇指导,但是阅读过后,亲自实践却发现有些问题,在查询了一些资料后,找到了一个可以实现的方法,不用引用第三方资料库,使用官方的'package:flutter/services.dart'即可,详情请看本篇文章。
前情提要
- 《Flutter如何侦测运行的App是在哪个系统平台呢?非常简单实现》
- 《Flutter如何实现搜索内容功能,只需要用到这个方法》
- 《终于用Flutter制作了第一个App——Flutter Dictionary学习Flutter事半功倍》
内容详情
以下内容是更改lib下的main.dart文件内容,删掉里面的内容,复制粘贴代码,开启调试就可以出现了。
首先是要在pubspec.yaml文件列出放置诸如txt等文件的文件夹位置,在特定位置输入以下代码:
flutter:
uses-material-design: true
assets:
- assets/images/
- assets/code/
- assets/text/
如下图所示:

随后,在项目中创建assets文件夹,其下创建text文件夹,在text文件夹放置要加载的txt文件,如下图所示:

test.txt内容如下:
12345 678910 1112131415
然后就可以在lib文件夹下的main.dart放置下面的代码内容了:
// ignore_for_file: prefer_const_constructors
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Questions',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyAppScreen(),
);
}
}
class MyAppScreen extends StatefulWidget {
const MyAppScreen({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return MyAppScreenState();
}
}
class MyAppScreenState extends State<MyAppScreen> {
List<String> _questions = [];
Future<List<String>> _loadQuestions() async {
List<String> questions = [];
await rootBundle.loadString('assets/text/test.txt').then((q) {
for (String i in LineSplitter().convert(q)) {
questions.add(i);
}
});
return questions;
}
@override
void initState() {
_setup();
super.initState();
}
_setup() async {
// Retrieve the questions (Processed in the background)
List<String> questions = await _loadQuestions();
// Notify the UI and display the questions
setState(() {
_questions = questions;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Flutter Questions")),
body: Center(
child: ListView.builder(
itemCount: _questions.length,
itemBuilder: (context, index) {
return Text(_questions[index]);
},
),
),
);
}
}
生成效果如下图所示:

其中最为关键的使用是这段代码:
import 'dart:async' show Future;
import 'package:flutter/services.dart';
Future<String> loadAsset() async {
var s = await rootBundle.loadString('assets/my_text.txt');
return s;
}
稍微简化了一下,只是能够阅读,不能书写保存文件哦。
- 我的微信
- 微信扫一扫加好友
-
- 我的微信公众号
- 扫描关注公众号
-





