{"id":22034,"date":"2025-07-10T09:58:00","date_gmt":"2025-07-10T07:58:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=22034"},"modified":"2025-07-15T12:35:19","modified_gmt":"2025-07-15T10:35:19","slug":"como-crear-app-con-flutter-guia-basica-3","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-crear-app-con-flutter-guia-basica-3\/","title":{"rendered":"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica 3"},"content":{"rendered":"\n

Continuamos con nuestro proyecto de crear una aplicaci\u00f3n en Flutter, en este punto ya tenemos claro como crear un proyecto, como emularlo y unas cuantas cosas sobre como obtener y mostrar la informaci\u00f3n. En este art\u00edculo nos centraremos en otras funcionalidades muy \u00fatiles que te ser\u00e1n de gran ayuda para tu aplicaci\u00f3n. Si no has le\u00eddo los anteriores art\u00edculos, te los dejo aqu\u00ed abajo, si ya est\u00e1s al d\u00eda con esta serie de art\u00edculos, \u00a1comenzamos!<\/p>\n\n\n\n

Paquetes y plugins en Flutter<\/h2>\n\n\n\n

Los paquetes y plugins en Flutter son componentes reutilizables que a\u00f1aden funcionalidad a nuestras aplicaciones. La diferencia principal es que los plugins pueden contener c\u00f3digo nativo espec\u00edfico de plataforma.<\/p>\n\n\n\n

Instalaci\u00f3n<\/h3>\n\n\n\n

Para instalar paquetes y plugins, abrimos el archivo pubspec.yaml, aqu\u00ed encontraremos un apartado llamado dependencies<\/em>. Aqu\u00ed debemos poner los paquetes y plugins que queremos instalar junto con la versi\u00f3n del mismo. Podemos especificar una versi\u00f3n espec\u00edfica, o una versi\u00f3n m\u00ednima. <\/p>\n\n\n\n

dependencies:\n  paquete_1: ^2.3.0    # Todas las versiones superiores a 2.3.0 hasta la 3.0.0\n  paquete_2: '6.3.7'   # Solo la versi\u00f3n 6.3.7<\/code><\/pre>\n\n\n\n
Ya tenemos definidos los paquetes o plugins a instalar, ahora ejecutamos el comando flutter pub get<\/code> y observamos la consola, aqu\u00ed nos dir\u00e1 si todo ha ido bien, o si hay alg\u00fan problema con alg\u00fan paquete o plugin.<\/p>\n\n\n\n
\u00a1Genial! Ya has instalado los paquetes y plugins que quer\u00edas, ahora los puedes usar en tu c\u00f3digo. Para usarlos deber\u00e1s importarlos en tu c\u00f3digo de la siguiente manera:<\/p>\n\n\n\n
import 'package:nombre_del_paquete\/nombre_del_paquete.dart';<\/code><\/pre>\n\n\n\n
Tabs y drawers en Flutter<\/h2>\n\n\n\n
En aplicaciones que usan Material Design, hay dos opciones principales para navegar, las tabs y los drawers. Estos \u00faltimos son muy \u00fatiles cuando no disponemos de espacio suficiente para las tabs. <\/p>\n\n\n\n
Tabs<\/h3>\n\n\n\n
Para poder trabajar con tabs, es necesario tener un TabController, podemos crear uno personalizado, o usar el que viene por defecto (DefaultTabController). El TabController, es el encargado de mantener la pesta\u00f1a activa y el contenido sincronizado.<\/p>\n\n\n\n
Cada pesta\u00f1a se crea con el widget TabBar, y su contenido con TabBarView. El uso es bastante sencillo, en la documentaci\u00f3n oficial, podr\u00e1s encontrar un ejemplo interactivo<\/a> que muestra muy bien el uso de estos widgets.<\/p>\n\n\n
\n
\"C\u00f3mo<\/figure>\n<\/div>\n\n\n
    return MaterialApp(\n      home: DefaultTabController(\n        length: 3,\n        child: Scaffold(\n          appBar: AppBar(\n            bottom: const TabBar(\n              tabs: [\n                Tab(icon: Icon(Icons.directions_car)),\n                Tab(icon: Icon(Icons.directions_transit)),\n                Tab(icon: Icon(Icons.directions_bike)),\n              ],\n            ),\n            title: const Text('Tabs Demo'),\n          ),\n          body: const TabBarView(\n            children: [\n              Icon(Icons.directions_car),\n              Icon(Icons.directions_transit),\n              Icon(Icons.directions_bike),\n            ],\n          ),\n        ),\n      ),\n    );\n<\/code><\/pre>\n\n\n\n
Drawer<\/h3>\n\n\n\n
En Flutter, los drawer se crean combinando el widget Drawer con Scaffold.<\/p>\n\n\n
\n
\"C\u00f3mo<\/figure>\n<\/div>\n\n\n
static const List<Widget> _widgetOptions = <Widget>[\n    Text(\n      'Index 0: Home',\n      style: optionStyle,\n    ),\n    Text(\n      'Index 1: Business',\n      style: optionStyle,\n    ),\n    Text(\n      'Index 2: School',\n      style: optionStyle,\n    ),\n  ];\n   ListTile(\n      title: const Text('Home'),\n      selected: _selectedIndex == 0,\n      onTap: () {\n         \/\/ Update the state of the app\n         _onItemTapped(0);\n         \/\/ Then close the drawer\n         Navigator.pop(context);\n         },\n      ),\n    ListTile(\n       title: const Text('Business'),\n       selected: _selectedIndex == 1,\n       onTap: () {\n         \/\/ Update the state of the app\n         _onItemTapped(1);\n         \/\/ Then close the drawer\n         Navigator.pop(context);\n         },\n    ),\n    ListTile(\n         title: const Text('School'),\n         selected: _selectedIndex == 2,\n         onTap: () {\n            \/\/ Update the state of the app\n            _onItemTapped(2);\n            \/\/ Then close the drawer\n            Navigator.pop(context);\n         },\n   ),<\/code><\/pre>\n\n\n\n
Una vez tenemos esta estructura creada, solo nos queda a\u00f1adir contenido al drawer. Esto se podr\u00eda hacer con el widget Column, pero es m\u00e1s recomendable usar un ListView, que permite al usuario hacer scroll en caso de tener mucho contenido. Aqu\u00ed te dejo el ejemplo completo.<\/a><\/p>\n\n\n\n
Almacenamiento local<\/h2>\n\n\n\n
El almacenamiento local es algo muy necesario en la mayor\u00eda de aplicaciones. Con Flutter es muy sencillo integrarlo. Para ello tenemos que hacer uso de la librer\u00eda shared_preferences<\/a><\/em>.<\/p>\n\n\n\n
Una vez tenemos instalada la librer\u00eda, tenemos que obtener las preferencias compartidas.<\/p>\n\n\n\n
final ls = await SharedPreferences.getInstance();<\/code><\/pre>\n\n\n\n
\u00a1Perfecto! Ya podemos usar el almacenamiento local. Para guardar datos, es tan sencillo como usar la funci\u00f3n set con el tipo de dato que queremos guardar. Aqu\u00ed unos ejemplos:<\/p>\n\n\n\n
\/\/ Guardar un n\u00famero entero llamado \"numero\"\nawait ls.setInt('numero', 5);\n\n\/\/ Guardar un n\u00famero decimal llamado \"numerodec\"\nawait ls.setDouble('numerodec', 12.3);\n\n\/\/ Guardar un booleano \nawait ls.setBool('booleano', true);\n\n\/\/ Guardar un string llamado cadena\nawait ls.setString('cadena', 'Hola mundo');\n\n\/\/ Guardar una lista de Strings llamado cadenas \nawait ls.setStringList('cadenas', <String>['Hola', 'Mundo']);<\/code><\/pre>\n\n\n\n
Para recuperar datos es parecido, solo que usamos la funci\u00f3n get en vez de set.<\/p>\n\n\n\n
await ls.getInt('numero');<\/code><\/pre>\n\n\n\n
Para borrar los datos, usamos remove con la clave, en este caso para borrar los datos de cadenas har\u00edamos lo siguiente:<\/p>\n\n\n\n
final borrar = await ls.remove('cadenas');<\/code><\/pre>\n\n\n\n
Firebase para Flutter<\/h2>\n\n\n
\n
\"C\u00f3mo<\/figure>\n<\/div>\n\n\n
Firebase es una plataforma BaaS (Backend-as-a-Service) de Google, que proporciona servicios como autenticaci\u00f3n, bases de datos, machine learning y mucho m\u00e1s. Para usar cada uno de estos servicios, debes instalarlos individualmente.<\/p>\n\n\n\n
dependencies:\n  firebase_core: ^1.10.0\n  firebase_auth: ^3.1.0\n  cloud_firestore: ^2.5.0\n  firebase_storage: ^10.2.0<\/code><\/pre>\n\n\n\n
La configuraci\u00f3n es diferente para Android e iOS, recomendamos seguir paso a paso la documentaci\u00f3n oficial<\/a> para configurarlo. <\/p>\n\n\n\n
Notificaciones en aplicaciones Flutter<\/h2>\n\n\n\n
Vamos a distinguir dos tipos de notificaciones, las notificaciones locales y las notificaciones push.<\/p>\n\n\n\n
Notificaciones locales<\/h3>\n\n\n\n
Las notificaciones locales las genera la propia aplicaci\u00f3n, son completamente personalizables y no requieren de conexi\u00f3n a internet. Esto es muy \u00fatil para alarmas, eventos o notificaciones relacionadas con el tiempo. El paquete flutter m\u00e1s usado para esto es flutter_local_notifications<\/em>. En el siguiente c\u00f3digo vemos como programar\u00edamos una notificaci\u00f3n para que avise de una reuni\u00f3n a las 11:<\/p>\n\n\n
\n
\"Notificaciones<\/figure>\n<\/div>\n\n\n
import 'package:flutter_local_notifications\/flutter_local_notifications.dart';\n\nvoid scheduleMeetingNotification() async {\n  \/\/ Configuraci\u00f3n espec\u00edfica para Android\n  var androidDetails = AndroidNotificationDetails(\n    'meeting_channel_id', \/\/ ID del canal\n    'Meeting Notifications', \/\/ Nombre del canal\n    'Notificationes para reuniones programadas', \/\/ Descripci\u00f3n del canal\n    importance: Importance.high, \/\/ Importancia alta\n    priority: Priority.high, \/\/ Prioridad alta\n  );\n\n  \/\/ Configuraci\u00f3n espec\u00edfica para iOS\n  var iosDetails = IOSNotificationDetails();\n\n  \/\/ Configuraci\u00f3n general para ambas plataformas\n  var notificationDetails = NotificationDetails(\n    android: androidDetails,\n    iOS: iosDetails,\n  );\n\n  \/\/ Instancia del plugin\n  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =\n      FlutterLocalNotificationsPlugin();\n\n  \/\/ Inicializaci\u00f3n del plugin\n  var initializationSettingsAndroid =\n      AndroidInitializationSettings('@mipmap\/ic_launcher');\n  var initializationSettingsIOS = IOSInitializationSettings();\n  var initializationSettings = InitializationSettings(\n    android: initializationSettingsAndroid,\n    iOS: initializationSettingsIOS,\n  );\n  await flutterLocalNotificationsPlugin.initialize(initializationSettings);\n\n  \/\/ Programar la notificaci\u00f3n para las 11:00 AM\n  var scheduledTime = DateTime.now();\n  scheduledTime = DateTime(\n    scheduledTime.year,\n    scheduledTime.month,\n    scheduledTime.day,\n    11, \/\/ Hora\n    0,  \/\/ Minutos\n  );\n\n  \/\/ Mostrar la notificaci\u00f3n programada\n  await flutterLocalNotificationsPlugin.zonedSchedule(\n    0, \/\/ ID \u00fanico de la notificaci\u00f3n\n    'Reuni\u00f3n Programada', \/\/ T\u00edtulo\n    'No olvides tu reuni\u00f3n a las 11:00 AM.', \/\/ Cuerpo\n    scheduledTime, \/\/ Fecha y hora programadas\n    notificationDetails, \/\/ Detalles de la notificaci\u00f3n\n    androidAllowWhileIdle: true, \/\/ Permitir mientras est\u00e1 inactivo\n    uiLocalNotificationDateInterpretation:\n        UILocalNotificationDateInterpretation.absoluteTime,\n  );\n}\n<\/code><\/pre>\n\n\n\n
Notificaciones push<\/h3>\n\n\n\n
En el caso de las notificaciones push, no se generan en la aplicaci\u00f3n, sino que es un servicio cloud externo quien las lanza, lo que hace que requieran de conexi\u00f3n a internet. Es muy \u00fatil para notificaciones en tiempo real. Su personalizaci\u00f3n es limitada, sobre todo si la aplicaci\u00f3n se encuentra cerrada o ejecut\u00e1ndose en segundo plano, en estos casos los estilos de la notificaci\u00f3n dependen del sistema operativo. El paquete con el que se gestiona esto en flutter es firebase_messaging<\/em>, usando Firebase Cloud Messaging (FCM).<\/p>\n\n\n\n
  void _setupFirebaseMessaging() {\n    _firebaseMessaging = FirebaseMessaging.instance;\n\n    \/\/ Solicita permisos para notificaciones en iOS\n    _firebaseMessaging.requestPermission(\n      alert: true,\n      badge: true,\n      sound: true,\n    );\n\n    \/\/ Manejo de notificaciones en segundo plano y terminadas\n    FirebaseMessaging.onBackgroundMessage(_firebaseBackgroundHandler);\n\n    \/\/ Escucha mensajes cuando la app est\u00e1 en primer plano\n    FirebaseMessaging.onMessage.listen((RemoteMessage message) {\n      print('Mensaje recibido en primer plano: ${message.notification?.title}');\n      _showNotification(message.notification?.title, message.notification?.body);\n    });\n\n    \/\/ Obtiene el token de FCM del dispositivo\n    _firebaseMessaging.getToken().then((token) {\n      print(\"Token de dispositivo: $token\");\n      \/\/ Puedes enviar este token a tu servidor para enviar notificaciones dirigidas\n    });\n  }\n\n  \/\/ Muestra una notificaci\u00f3n en la pantalla\n  void _showNotification(String? title, String? body) {\n    showDialog(\n      context: context,\n      builder: (context) => AlertDialog(\n        title: Text(title ?? 'Nueva notificaci\u00f3n'),\n        content: Text(body ?? 'Sin contenido'),\n        actions: [\n          TextButton(\n            onPressed: () => Navigator.of(context).pop(),\n            child: Text('Cerrar'),\n          ),\n        ],\n      ),\n    );\n  }\n\n\/\/ Manejo de notificaciones en segundo plano\nFuture<void> _firebaseBackgroundHandler(RemoteMessage message) async {\n  print('Mensaje recibido en segundo plano: ${message.notification?.title}');\n}\n<\/code><\/pre>\n\n\n\n
Gestos en apps Flutter<\/h2>\n\n\n\n
Los gestos se usan para que los usuarios interact\u00faen con la aplicaci\u00f3n, vamos a ver cu\u00e1les son estos gestos y c\u00f3mo los podemos manejar.<\/p>\n\n\n\n
Los gestos m\u00e1s comunes son los siguientes:<\/p>\n\n\n\n