🚀 Uso de flutter_dotenv en Flutter.
Tabla de Contenido
Introducción
Siempre es importante manejar variables de entorno en nuestros proyectos de software, ya que nos permiten guardar allí cierta información que podemos manejar como configuración para no hacer ajustes en código. También se puede almacenar datos seguros, pero no es lo más recomendable, existen otras formas o alternativas que nos brindan seguridad, pero para información no tan crítica, las variables de entorno son una excelente opción.
Dentro de Flutter, existen paquetes para trabajar con variables de entorno del sistema y uno de ellos es flutter_dotenv . El cual estaremos utilizando en este artículo para aprender a configurarlo y aplicarlo en Apps construidas en Flutter.
El uso más común que se le puede dar a las variables de entorno, puede ser para almacenar datos como configuraciones de APIs, bases de datos, banderas de encendido y apagado, identificadores, tiempos de timeout de las APIs, en sí cualquier dato o valor no sensible de su aplicación se puede agregar como variable de entorno.
Instalación
- Para instalar el paquete de flutter_dotenv, basta con ejecutar alguno de los siguientes comandos:
flutter pub add flutter_dotenv
dart pub add flutter_dotenv
- Otra alternativa es realizar el cambio directamente en el archivo
pubspec.yamlagregando la versión.
dependencies:
flutter_dotenv: ^5.2.1
Después de realizar alguna de las dos opciones anteriores, debemos ejecutar el siguiente comando para asegurar que se instale correctamente.
flutter pub get
Con esto debería ser suficiente para tener instalado el paquete correctamente.
Configuración
Una vez instalado el paquete, podemos pasar a realizar la configuración del mismo dentro de nuestra App de Flutter.
En caso de que no tengamos una app creada aún, podemos realizarlo con el siguiente comando.
flutter create flutter_dotenv_app
Una vez tenemos el proyecto Flutter listo, podemos realizar la configuración necesaria para utilizarlo.
- Crear archivo
.enven la raíz del proyecto.
SCOPE=prod
LIMIT=12
API_URL=https://api.com
ACTIVE_FLOW=false
- Agregar en el archivo
pubspec.yamlla configuración para leer el archivo.env. Se debe activar la sección deassets.
flutter:
uses-material-design: true
assets:
- .env
- También debe agregarse
*.enven el archivo.gitignorepara que no quede versionado en git. - Para utilizar el paquete, debe agregarse en la configuración inicial para que cargue las variables de entorno al cargar la aplicación.
import 'package:flutter_dotenv/flutter_dotenv.dart';
void main() async {
// podemos especificar el archivo como tal acá,
// igual por defecto toma el .env
// await dotenv.load(fileName='.env');
await dotenv.load();
runApp(const MyApp());
}
- Se puede acceder al valor de las variables de la siguiente manera.
dotenv.env['SCOPE']
Ejemplo
environment.dart
import 'package:flutter_dotenv/flutter_dotenv.dart';
class Environment {
static String scope = dotenv.env['SCOPE'] ?? 'dev';
static int limit = dotenv.getInt('LIMIT', fallback: 10);
static String urlAPI = dotenv.env['API_URL'] ?? 'http://localhost:8080';
static bool activeFlow = dotenv.getBool('ACTIVE_FLOW', fallback: false);
}
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter_dotenv_app/environment.dart';
void main() async {
// podemos especificar el archivo como tal acá, igual por defecto toma el .env
await dotenv.load();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter DotEnv'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
String _scope = '';
String _apiUrl = '';
bool _active = Environment.activeFlow;
void _incrementCounter() {
setState(() {
_counter++;
if (_counter > Environment.limit) {
_counter = 0;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Al presionar el botón + se incrementará el contador:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
setState(() {
_active = !_active;
_scope = Environment.scope;
_apiUrl = Environment.urlAPI;
});
},
child: Text('Mostrar variables de entorno'),
),
if (_active)
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Scope: $_scope',
),
Text(
'URL de API: $_apiUrl',
),
Text(
'Límite: ${Environment.limit}',
)
],
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
Ejemplo completo en GitHub
Conclusión
Una ventaja de las variables de entorno, es que no necesitamos realizar cambios en código para ajustar valores, simplemente actualizamos el valor y volvemos a desplegar la aplicación para que tome los cambios. Este paquete nos brinda la opción de almacenar en variables de entorno, valores o datos no sensibles de la aplicación, datos como claves, tokens no es recomendable por seguridad realizarlo, existen otros mecanismos para esto.
¡Gracias por leer!
https://buymeacoffee.com/jaimetellezb
