Flutter如何实现加载本地的txt/markdown等文件,只需要使用下面这个方法

已收录   阅读次数: 1,096
2021-08-0820:09:07 发表评论
摘要

如何在Flutter应用中实现加载阅读诸如txt, Markdown, Js等等的文件,官方开发文档是给予了一篇指导,但是阅读过后,亲自实践却发现有些问题,在查询了一些资料后,找到了一个可以实现的方法,不用引用第三方资料库,使用官方的'package:flutter/services.dart'即可,详情如下……

分享至:
Flutter如何实现加载本地的txt/markdown等文件,只需要使用下面这个方法

开篇寄语

如何在Flutter应用中实现加载阅读诸如txt, Markdown, Js等等的文件,官方开发文档是给予了一篇指导,但是阅读过后,亲自实践却发现有些问题,在查询了一些资料后,找到了一个可以实现的方法,不用引用第三方资料库,使用官方的'package:flutter/services.dart'即可,详情请看本篇文章。

前情提要

内容详情

以下内容是更改lib下的main.dart文件内容,删掉里面的内容,复制粘贴代码,开启调试就可以出现了。

首先是要在pubspec.yaml文件列出放置诸如txt等文件的文件夹位置,在特定位置输入以下代码:

flutter:
  uses-material-design: true
  assets:
      - assets/images/
      - assets/code/
      - assets/text/

如下图所示:

Flutter如何实现加载本地的txt/markdown等文件,只需要使用下面这个方法

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

Flutter如何实现加载本地的txt/markdown等文件,只需要使用下面这个方法

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]);
          },
        ),
      ),
    );
  }
}

生成效果如下图所示:

Flutter如何实现加载本地的txt/markdown等文件,只需要使用下面这个方法

其中最为关键的使用是这段代码:

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;
}

稍微简化了一下,只是能够阅读,不能书写保存文件哦。

  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: