El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, exploraremos algunos de los paquetes más populares y útiles en el ecosistema de Dart. Los paquetes son colecciones de código reutilizable que pueden ayudar a simplificar y acelerar el desarrollo de aplicaciones. Dart tiene un repositorio de paquetes llamado pub.dev, donde puedes encontrar una gran variedad de paquetes para diferentes propósitos.

Introducción a los Paquetes

¿Qué es un Paquete?

Un paquete en Dart es una colección de código que puede incluir bibliotecas, herramientas, ejemplos y otros recursos. Los paquetes permiten a los desarrolladores compartir y reutilizar código de manera eficiente.

¿Cómo Usar un Paquete?

Para usar un paquete en tu proyecto Dart, debes agregarlo a tu archivo pubspec.yaml y luego importarlo en tu código.

Ejemplo:

# pubspec.yaml
dependencies:
  http: ^0.13.3

// main.dart
import 'package:http/http.dart' as http;

void main() async {
  var response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
  print('Response status: ${response.statusCode}');
  print('Response body: ${response.body}');
}

Paquetes Populares

2.1 http

El paquete http es uno de los más utilizados para realizar solicitudes HTTP. Es simple y fácil de usar.

Características:

Realizar solicitudes GET, POST, PUT, DELETE, etc.
Manejo de respuestas y errores.
Soporte para encabezados y cuerpos de solicitud.

Ejemplo:

import 'package:http/http.dart' as http;

void main() async {
  var response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
  if (response.statusCode == 200) {
    print('Response body: ${response.body}');
  } else {
    print('Request failed with status: ${response.statusCode}');
  }
}

2.2 provider

El paquete provider es una solución popular para la gestión del estado en aplicaciones Flutter. Facilita la separación de la lógica de negocio de la interfaz de usuario.

Características:

Fácil de usar y configurar.
Soporte para múltiples proveedores.
Integración con Flutter.

Ejemplo:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Consumer<Counter>(
                builder: (context, counter, child) {
                  return Text('${counter.count}', style: Theme.of(context).textTheme.headline4);
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read<Counter>().increment(),
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

2.3 freezed

El paquete freezed es utilizado para generar clases inmutables y con soporte para la igualdad de valor. Es muy útil para trabajar con datos inmutables y patrones de diseño como el patrón de datos.

Características:

Generación automática de clases inmutables.
Soporte para la igualdad de valor.
Integración con JSON.

Ejemplo:

import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';
part 'user.g.dart';

@freezed
class User with _$User {
  const factory User({
    required String name,
    required int age,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}

2.4 dio

El paquete dio es una alternativa avanzada al paquete http para realizar solicitudes HTTP. Ofrece más características y flexibilidad.

Características:

Soporte para interceptores.
Manejo de solicitudes y respuestas.
Soporte para cancelación de solicitudes.

Ejemplo:

import 'package:dio/dio.dart';

void main() async {
  var dio = Dio();
  var response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
  print('Response status: ${response.statusCode}');
  print('Response data: ${response.data}');
}

2.5 shared_preferences

El paquete shared_preferences permite almacenar datos simples de manera persistente en dispositivos móviles. Es útil para guardar configuraciones y preferencias del usuario.

Características:

Almacenamiento de datos clave-valor.
Soporte para tipos de datos básicos.
Fácil de usar.

Ejemplo:

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Shared Preferences Example')),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    _loadCounter();
  }

  _loadCounter() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter = (prefs.getInt('counter') ?? 0);
    });
  }

  _incrementCounter() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter++;
      prefs.setInt('counter', _counter);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('You have pushed the button this many times:'),
        Text('$_counter', style: Theme.of(context).textTheme.headline4),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment Counter'),
        ),
      ],
    );
  }
}

Ejercicios Prácticos

Ejercicio 1: Realizar una Solicitud HTTP

Objetivo: Utilizar el paquete http para realizar una solicitud GET a una API pública y mostrar la respuesta en la consola.

Instrucciones:

Crea un nuevo proyecto Dart.
Agrega el paquete http a tu archivo pubspec.yaml.
Realiza una solicitud GET a https://jsonplaceholder.typicode.com/posts/1.
Imprime el cuerpo de la respuesta en la consola.

Solución:

import 'package:http/http.dart' as http;

void main() async {
  var response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
  if (response.statusCode == 200) {
    print('Response body: ${response.body}');
  } else {
    print('Request failed with status: ${response.statusCode}');
  }
}

Ejercicio 2: Gestión de Estado con Provider

Objetivo: Utilizar el paquete provider para gestionar el estado de un contador en una aplicación Flutter.

Instrucciones:

Crea un nuevo proyecto Flutter.
Agrega el paquete provider a tu archivo pubspec.yaml.
Implementa un contador que se incremente al presionar un botón, utilizando ChangeNotifier y Consumer.

Solución:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Consumer<Counter>(
                builder: (context, counter, child) {
                  return Text('${counter.count}', style: Theme.of(context).textTheme.headline4);
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read<Counter>().increment(),
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Conclusión

En esta sección, hemos explorado algunos de los paquetes más populares en el ecosistema de Dart, incluyendo http, provider, freezed, dio y shared_preferences. Estos paquetes pueden ayudarte a simplificar y acelerar el desarrollo de tus aplicaciones Dart y Flutter. Asegúrate de explorar más paquetes en pub.dev para encontrar herramientas que se adapten a tus necesidades específicas.

En el próximo módulo, nos adentraremos en el desarrollo de aplicaciones web y móviles con Dart y Flutter. ¡Prepárate para llevar tus habilidades al siguiente nivel!

Paquetes Populares de Dart

Introducción a los Paquetes

¿Qué es un Paquete?

¿Cómo Usar un Paquete?

Paquetes Populares

2.1 http

2.2 provider

2.3 freezed

2.4 dio

2.5 shared_preferences

Ejercicios Prácticos

Ejercicio 1: Realizar una Solicitud HTTP

Ejercicio 2: Gestión de Estado con Provider

Conclusión

Curso de Programación en Dart

Módulo 1: Introducción a Dart

Módulo 2: Conceptos Básicos de Dart

Módulo 3: Colecciones

Módulo 4: Programación Orientada a Objetos en Dart

Módulo 5: Características Avanzadas de Dart

Módulo 6: Manejo de Errores y Depuración

Módulo 7: Paquetes y Bibliotecas de Dart

Módulo 8: Dart para Web y Móvil

Módulo 9: Mejores Prácticas y Patrones de Diseño

Módulo 10: Proyecto Final