Flutter – Actualización de datos en Internet

En el mundo actual, la mayoría de las aplicaciones dependen en gran medida de obtener y actualizar información de los servidores a través de Internet. En Flutter, dichos servicios son proporcionados por el paquete http. En este artículo, exploraremos lo mismo.

Para actualizar los datos en Internet, siga los siguientes pasos:

1. Importar el paquete http
2. Actualizar datos t usando el paquete http
3. Convierta la respuesta en un objeto Dart personalizado
4. Obtenga los datos de Internet.
5. Actualizar y mostrar la respuesta en la pantalla

Importación del paquete http:

Para instalar el paquete http, use el siguiente comando en su símbolo del sistema:

pub get

O, si está usando flutter cmd, use el siguiente comando:

flutter pub get

Después de la instalación, agregue la dependencia al archivo pubsec.yml como se muestra a continuación:

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

Actualizar datos a través de Internet:

Utilice el método http.put() para actualizar el título del álbum en JSONPlaceholder como se muestra a continuación:

Future<Album> updateAlbum(String title) async {
  final http.Response response = await http.put(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );

Convirtiendo la respuesta:

Aunque hacer una solicitud de red no es gran cosa, trabajar con los datos de respuesta sin procesar puede ser un inconveniente. Para facilitarle la vida, convierta los datos sin procesar (es decir, http.response) en un objeto de dardo. Aquí crearemos una clase de álbum que contenga los datos JSON como se muestra a continuación:

class Album {
  final int id;
  final String title;
 
  Album({required this.id, required this.title});
 
  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'],
      title: json['title'],
    );
  }
}

Convierta http.Response en un álbum:

Ahora, siga los pasos a continuación para actualizar la función fetchAlbum() para devolver un Future<Album>:

1. Use el paquete dart: convert para convertir el cuerpo de la respuesta en un mapa JSON.
2. Use el método de fábrica fromJSON() para convertir JSON Map en Album si el servidor devuelve una respuesta OK con un código de estado de 200.
3. Ejecute una excepción si el servidor no devuelve una respuesta OK con un código de estado de 200.

Future<Album> updateAlbum(String title) async {
  final http.Response response = await http.put(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );
// parsing JSOn or throwing an exception
  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to update album.');
  }
}

Obteniendo los datos:

Ahora use el método fetch() para obtener los datos como se muestra a continuación:

Future<Album> fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
 
// Dispatch action depending upon
//the server response
  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}

Actualice los datos existentes a través de la entrada del usuario:

Ahora cree un TextField para que el usuario ingrese un título y un RaisedButton para enviar datos al servidor. Además, defina un TextEditingController para leer la entrada del usuario desde un TextField como se muestra a continuación:

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(snapshot.data!.title),
      TextField(
        controller: _controller,
        decoration:
            const InputDecoration(hintText: 'Enter Title'),
      ),
       
      ElevatedButton(
        child: const Text('Update Data'),
        onPressed: () {
          setState(() {
            _futureAlbum = updateAlbum(_controller.text);
          });
        },
      )

Visualización de los datos:

Use el widget FlutterBuilder para mostrar los datos en la pantalla como se muestra a continuación:

FutureBuilder<Album>(
   future: _futureAlbum,
   builder: (context, snapshot) {
     if (snapshot.connectionState == ConnectionState.done) {
       if (snapshot.hasData) {
         return Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             Text(snapshot.data!.title),
             TextField(
               controller: _controller,
               decoration:
                   const InputDecoration(hintText: 'Enter Title'),
             ),
             ElevatedButton(
               child: const Text('Update Data'),
               onPressed: () {
                 setState(() {
                   _futureAlbum = updateAlbum(_controller.text);
                 });
               },
             )
 
             // RaisedButton is deprecated and should not be used.
             // Use ElevatedButton instead.
 
             // RaisedButton(
             //     child: const Text('Update Data'),
             //     onPressed: () {
             //     setState(() {
             //         _futureAlbum = updateAlbum(_controller.text);
             //     });
             //     },
             // ),
           ],
         );
       } else if (snapshot.hasError) {
         return Text("${snapshot.error}");
       }
     }
     return const CircularProgressIndicator();
   },
 ),

Código fuente completo:

import 'dart:async';
import 'dart:convert';
 
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
 
Future<Album> fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
 
// Dispatch action depending upon
//the server response
  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}
 
Future<Album> updateAlbum(String title) async {
  final http.Response response = await http.put(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );
// parsing JSOn or throwing an exception
  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to update album.');
  }
}
 
class Album {
  final int id;
  final String title;
 
  Album({required this.id, required this.title});
 
  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'],
      title: json['title'],
    );
  }
}
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
// ignore: library_private_types_in_public_api
  _MyAppState createState() {
    return _MyAppState();
  }
}
 
class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();
  late Future<Album> _futureAlbum;
 
  @override
  void initState() {
    super.initState();
    _futureAlbum = fetchAlbum();
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Update Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8.0),
          child: FutureBuilder<Album>(
            future: _futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasData) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(snapshot.data!.title),
                      TextField(
                        controller: _controller,
                        decoration:
                            const InputDecoration(hintText: 'Enter Title'),
                      ),
                      ElevatedButton(
                        child: const Text('Update Data'),
                        onPressed: () {
                          setState(() {
                            _futureAlbum = updateAlbum(_controller.text);
                          });
                        },
                      )
 
                      // RaisedButton is deprecated and should not be used.
                      // Use ElevatedButton instead.
 
                      // RaisedButton(
                      //     child: const Text('Update Data'),
                      //     onPressed: () {
                      //     setState(() {
                      //         _futureAlbum = updateAlbum(_controller.text);
                      //     });
                      //     },
                      // ),
                    ],
                  );
                } else if (snapshot.hasError) {
                  return Text("${snapshot.error}");
                }
              }
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Producción: