开篇寄语
如何在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; }
稍微简化了一下,只是能够阅读,不能书写保存文件哦。
- 我的微信
- 微信扫一扫加好友
- 我的微信公众号
- 扫描关注公众号