¡Acostúmbrate a escribir juntos! Este es el noveno día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .
Este artículo trata sobre leer y escribir archivos de texto en Flutter.
introducir
Los archivos de texto (con la extensión .txt ) se utilizan ampliamente para el almacenamiento persistente de información, desde datos numéricos hasta textos extensos. Hoy, analizaré 2 aplicaciones Flutter de muestra que usan este tipo de archivo.
El primer ejemplo es rápido y fácil. Simplemente carga el contenido del texto en la carpeta de activos (u otra carpeta en el proyecto raíz) usando rootBundle (de services.dart) y muestra el resultado en la pantalla. Esto es útil cuando solo necesita leer datos y no escribir datos.
El segundo ejemplo es un poco más complicado. No solo puede leer la entrada del usuario, sino que también puede escribir la entrada del usuario en un archivo de texto. Aprenderá a usar los métodos asincrónicos de File, incluidos readAsString y writeAsString .
Ejemplo 1: cargando contenido
avance
Este ejemplo contiene un widget de texto y un botón flotante. Cuando se presiona este botón, se activará la función _loadData y el contenido se cargará desde el archivo.
Agregue el archivo de texto a su proyecto
Cree un nuevo archivo de texto llamado data.txt (o uno si aún no existe) en la carpeta de activos del directorio raíz del proyecto y agréguele contenido ficticio como este:
个人简介：华为云享专家，InfoQ签约作者，51CTO博客首席体验官，专注于前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。如果你迷茫，不妨来瞅瞅码农的轨迹，
复制代码No olvide registrar la carpeta de activos en el archivo pubspec.yaml :
flutter:
assets:
- assets/
复制代码código completo
Agrega lo siguiente a tu 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)),
);
}
}
复制代码Ejemplo 2: lectura y escritura
obtener la ruta del archivo
Por motivos de seguridad, Android e iOS no nos permiten leer y escribir en ninguna parte del disco duro. Necesitamos guardar el archivo de texto en el directorio Documentos donde la aplicación solo puede acceder a sus archivos. Estos archivos solo se eliminan cuando se elimina la aplicación.
El directorio de archivos es NSDocumentDirectory en iOS y AppData en Android. Para obtener la ruta completa a ese directorio, usamos el paquete ** path_provider ** (que es el paquete oficial de Flutter).
Instale el paquete agregando path_provider y su versión a la sección de dependencias del archivo pubspec.yaml de la siguiente manera:
dependencies:
path_provider: ^2.0.8
复制代码Luego ejecute los siguientes comandos:
flutter pub get
复制代码y encontrar la siguiente ruta:
import 'package:path_provider/path_provider.dart';
/* .... */
Future<String> get _getDirPath async {
final _dir = await getApplicationDocumentsDirectory();
return _dir.path;
}
复制代码Muestra de vista previa
Esta aplicación de muestra tiene un archivo de texto que permite al usuario ingresar su nombre para escribir en un archivo de texto. También contiene un widget de texto que muestra el nombre leído del archivo.
código completo y explicación
En este ejemplo, no necesitamos crear manualmente un archivo de texto y agregarlo al proyecto. Se crea automáticamente cuando los datos se escriben por primera vez.
Aquí está el código en nuestro 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,
)
],
),
),
);
}
}
复制代码En conclusión
Con este artículo, creó 2 aplicaciones simples y aprendió los conceptos básicos de lectura y escritura de archivos de texto. Si desea trabajar con archivos JSON o CSV en Flutter, consulte los siguientes artículos
\