详解Flutter如何读写文本文件

目录
  • 介绍
  • 示例 1:加载内容
    • 预览
    • 完整代码
  • 示例 2: Reading and Writing
    • 获取文件路径
    • 示例预览
    • 完整的代码和解释

介绍

文本文件(具有 .txt扩展名)广泛用于持久存储信息,从数字数据到长文本。今天,我将介绍 2 个使用此文件类型的 Flutter 应用程序示例。

第一个示例快速而简单。它仅使用 rootBundle(来自 services.dart)从 assets 文件夹(或根项目中的另一个文件夹)中的文本加载内容,然后将结果输出到屏幕上。当您只需要读取数据而不需要写入数据时,这很有用。

第二个例子稍微复杂一点。它不仅可以读取用户输入的内容,还可以将用户输入的内容写入文本文件。您将学习如何使用File 异步方法, 包括readAsString和writeAsString。

示例 1:加载内容

预览

此示例包含一个文本小部件和一个浮动按钮。当这个按钮被按下时,函数 _loadData将被触发并从文件中加载内容。

将文本文件添加到您的项目中

在项目根目录的资产文件夹中创建一个名为data.txt的新文本文件(如果尚不存在,则创建一个),并向其添加一些虚拟内容,如下所示:

个人简介:华为云享专家,InfoQ签约作者,51CTO博客首席体验官,专注于前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。如果你迷茫,不妨来瞅瞅码农的轨迹,

不要忘记在pubspec.yaml文件中注册assets文件夹:

flutter:
  assets:
    - assets/

完整代码

将以下内容添加到您的main.dart

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'dart:async';
​
void main() {
  runApp(MyApp());
}
​
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '坚果',
      home: HomePage(),
    );
  }
}
​
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
​
class _HomePageState extends State<HomePage> {
  String _data;
​
  // This function is triggered when the user presses the floating button
  Future<void> _loadData() async {
    final _loadedData = await rootBundle.loadString('assets/data.txt');
    setState(() {
      _data = _loadedData;
    });
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('坚果'),
      ),
      body: Center(
          child: Container(
              width: 300,
              child: Text(_data != null ? _data : 'Nothing to show',
                  style: TextStyle(fontSize: 24)))),
      floatingActionButton:
          FloatingActionButton(onPressed: _loadData, child: Icon(Icons.add)),
    );
  }
}

示例 2: Reading and Writing

获取文件路径

出于安全原因,Android 和 iOS 不允许我们在硬盘驱动器上的任何位置进行读写。我们需要将文本文件保存到Documents目录中,应用程序只能在该目录中访问其文件。只有在删除应用程序时才会删除这些文件。

文件目录是NSDocumentDirectory iOS和应用程序数据在Android上。要获取该目录的完整路径,我们使用path_provider包(这是 Flutter 的官方包)。

通过将path_provider及其版本添加到pubspec.yaml文件的依赖项部分来安装包,如下所示:

dependencies:
  path_provider: ^2.0.8

然后运行以下命令:

flutter pub get

并找到如下路径:

import 'package:path_provider/path_provider.dart';
​
/* .... */
​
Future<String> get _getDirPath async {
  final _dir = await getApplicationDocumentsDirectory();
  return _dir.path;
}

示例预览

此示例应用程序有一个 TextFiled,允许用户输入他/她的姓名以写入文本文件。它还包含一个文本小部件,显示从该文件读取的名称。

完整的代码和解释

在此示例中,我们不需要手动创建文本文件并将其添加到项目中。第一次写入数据时会自动创建。

这是我们的main.dart 中的代码:

// main.dart
import 'dart:convert';
​
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:path_provider/path_provider.dart';
​
void main() {
  runApp(MyApp());
}
​
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '坚果',
      home: HomePage(),
    );
  }
}
​
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
​
class _HomePageState extends State<HomePage> {
  // This will be displayed on the screen
  String _content;
​
  // Find the Documents path
  Future<String> _getDirPath() async {
    final _dir = await getApplicationDocumentsDirectory();
    return _dir.path;
  }
​
  // This function is triggered when the "Read" button is pressed
  Future<void> _readData() async {
    final _dirPath = await _getDirPath();
    final _myFile = File('$_dirPath/data.txt');
    final _data = await _myFile.readAsString(encoding: utf8);
    setState(() {
      _content = _data;
    });
  }
​
  // TextField controller
  final _textController = TextEditingController();
  // This function is triggered when the "Write" buttion is pressed
  Future<void> _writeData() async {
    final _dirPath = await _getDirPath();

    final _myFile = File('$_dirPath/data.txt');
    // If data.txt doesn't exist, it will be created automatically
​
    await _myFile.writeAsString(_textController.text);
    _textController.clear();
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('坚果'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            TextField(
              controller: _textController,
              decoration: InputDecoration(labelText: 'Enter your name'),
            ),
            ElevatedButton(
              child: Text('Save to file'),
              onPressed: _writeData,
            ),
            SizedBox(
              height: 150,
            ),
            Text(
                _content != null
                    ? _content
                    : 'Press the button to load your name',
                style: TextStyle(fontSize: 24, color: Colors.pink)),
            ElevatedButton(
              child: Text('Read my name from the file'),
              onPressed: _readData,
            )
          ],
        ),
      ),
    );
  }
}

以上就是详解Flutter如何读写文本文件的详细内容,更多关于Flutter读写文本文件的资料请关注我们其它相关文章!

(0)

相关推荐

  • Flutter实现文本组件、图标及按钮组件的代码

    •文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认值 说明 data String   要显示的文本 maxLines int 0 文本要显示的最大行数 style TextStyle null 文本样式,可定义文本的字体大小.颜色.粗细等 textAlign TextAlign TextAlign.center 文本水平方向的对齐方式,取值有center.end.justify.left.right.start.val

  • Android编程实现读取工程中的txt文件功能

    本文实例讲述了Android编程实现读取工程中的txt文件功能.分享给大家供大家参考,具体如下: 1. 众所周知,Android的res文件夹是用来存储资源的,可以在res文件夹下建立一个raw文件夹,放置在raw文件夹下的内容会被原样打包,而不会被编译成二进制文件,并且可以通过R文件进行很方便地访问. 比如我们可以将更新信息.版权信息等放到txt文件中,然后放到raw文件中,然后很方便地进行访问. 在raw中放入一个a.txt文件,然后就可以在Activity中使用getResources()

  • Android 读取txt,按行读取的实例讲解

    一个TXT 文件 对其进行读取,并且每行都单个存储读取 public class MainActivity extends AppCompatActivity { private TextView textView,textView2,textView3; private Button click; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

  • Flutter 如何封装文本输入框组件

    UI组件封装的考虑要点 封装一个 UI 组件,通常需要考虑下面这三个点: 接口如何定义:即组件接收什么输入参数来控制组件的外观和行为: 与业务分离:UI 组件应当只负责界面,而不负责业务,具体的业务应当由业务层完成: 简单易用:因为是 UI 组件,要尽可能地简单易用,方便使用者快速上手. 文本输入框接口定义 首先先看一下我们上一篇使用文本框的代码,这里实际上只是调用了一个函数返回新的组件,之所以要这么做是因为用户名.密码使用了成员属性,需要根据不同的成员属性来设置不同的行为,主要有: 文本框装饰

  • Android应用程序中读写txt文本文件的基本方法讲解

    最终效果图,点击save会保存到文件中,点击show会从文件中读取出内容并显示. main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layou

  • 详解Flutter如何读写文本文件

    目录 介绍 示例 1:加载内容 预览 完整代码 示例 2: Reading and Writing 获取文件路径 示例预览 完整的代码和解释 介绍 文本文件(具有 .txt扩展名)广泛用于持久存储信息,从数字数据到长文本.今天,我将介绍 2 个使用此文件类型的 Flutter 应用程序示例. 第一个示例快速而简单.它仅使用 rootBundle(来自 services.dart)从 assets 文件夹(或根项目中的另一个文件夹)中的文本加载内容,然后将结果输出到屏幕上.当您只需要读取数据而不需

  • 详解Flutter点击空白隐藏键盘的全局做法

    开发原生页面的时候,在处理键盘事件上,通常的需求是,点击输入框外屏幕,要隐藏键盘,同样的,这样的需求也需要在 Flutter 上实现, Android 上的实现方式是在基类 Activity 里实现事件分发,判断触摸位置是否在输入框内. /** * 获取点击事件 */ @CallSuper @Override public boolean dispatchTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.MotionEv

  • 详解Flutter 调用 Android Native 的方法

    Flutter 调用 Android Native 的方法,是通过MethodChannel的方式来实现的: 在Android端: 创建一个Class,实现FlutterPlugin和MethodCallHandler接口 重写onAttachedToEngine(),onDetachedFromEngine(),onMethodCall() onAttachedToEngine()中,根据自定义的CHANNEL_NAME创建MethodChannel, onDetachedFromEngine

  • 详解Flutter混排瀑布流解决方案

    背景 流式布局,这是一种当前无论是前端,还是Native都比较流行的一种页面布局.特别是对于商品这样的Feeds流,无论是淘宝,京东,美团,还是闲鱼.都基本上以多列瀑布流进行呈现,容器列数固定,然后每个卡片高度不一,形成参差不齐的多栏布局. 对于Native来说,无论是iOS还是Android,CollectionView和RecyclerView都能满足我们的绝大部分场景了.不过目前闲鱼很多业务场景都是在Flutter上进行实现的,当时Flutter官方只提供了ListView和GridVie

  • 详解Flutter的路由导航

    Flutter 的路由导航 路由管理或导航管理:从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理页面之间的跳转.在原生的Android 开发,是通过startActivity或startActivityForResult 来完成页面的跳转的,在Flutter 中如何实现呢? 在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的: Route 是页面的抽象,主要负责创建对应的界面,接收参数,响应 Navigator 打开和关闭: 而 Navig

  • 详解Flutter Widget

    目录 概述: Widget的本质: 分类: Widget StatelessWidget StatefulWidget State ParentDataWidget RenderObjectWidget 小结 概述: 所有的一切都可以被称为widget 在开发 Flutter 应用过程中,接触最多的无疑就是Widget,是『描述』 Flutter UI 的基本单元,通过Widget可以做到: 描述 UI 的层级结构 (通过Widget嵌套): 定制 UI 的具体样式 (如:font.color等

  • 详解Flutter中视频播放器插件的使用教程

    目录 创建一个新的视频播放器 添加播放和暂停按钮 创建一个快进 添加一个视频进度指示器 应用视频的字幕 结论 您已经看到很多包含视频内容的应用程序,比如带有视频教程的食谱应用程序.电影应用程序和体育相关的应用程序.您是否想知道如何将视频内容添加到您的下一个Flutter应用程序中? 从头开始实现视频功能将是一项繁重的任务.但有几个插件可以让开发者的生活变得轻松.视频播放器插件是可用于 Flutter 的最佳插件之一,可满足这一要求. 在这篇文章中,您将学习如何应用视频播放器插件以及控制视频播放器

  • 详解Flutter如何绘制曲线,折线图及波浪动效

    目录 正弦曲线绘制 波浪动效 曲线绘制 折线图 其他说明 总结 简介 上一篇用 Flutter 的 Canvas 画点有趣的图形我们介绍了使用 CustomPaint 绘制自定义形状,可以看到有了图形的平面绘制数学计算方法,我们可以画出所需的形状.本篇我们来介绍线条类图形的绘制,并且结合 Animation 实现了常见的波浪动效.通过本篇,你可以了解到: 正弦曲线的绘制 利用两条正弦曲线加上 Animation 实现波浪动效 曲线的一般绘制方法 折线图绘制 下面是最终实现的效果图,接下来我们一项

  • 详解Flutter和Dart取消Future的三种方法

    目录 使用异步包(推荐) 完整示例 使用 timeout() 方法 快速示例 将Future转换为流 快速示例 结论 使用异步包(推荐) async包由 Dart 编程语言的作者开发和发布.它提供了dart:async风格的实用程序来增强异步计算.可以帮助我们取消Future的是CancelableOperation类: var myCancelableFuture = CancelableOperation.fromFuture( Future<T> inner, { FutureOr on

  • 详解Flutter中网络框架dio的二次封装

    其实dio框架已经封装的很好了,但是在实战项目中,为了项目可以统一管理,还是需要对dio框架进行二次封装. 整体思路:一般情况下,后台返回的数据我们可以分为两部分 1.状态数据 2.渲染数据 状态数据就是接口有没有正常返回数据相关的数据,这部分数据跟业务无关,我们可以封装起来统一管理,渲染数据就是我们渲染页面所需要的数据,这块的数据需要我们自己处理. 接下来我们就主要处理渲染数据这块的内容,我定义了两个函数,渲染数据可能为一个对象或者一个数组,我做了分别处理,定义两个函数来接受渲染数据. //

随机推荐