Flutter: envío de datos a Internet

Interactuar con Internet es crucial para que la mayoría de las aplicaciones funcionen. En Flutter, el paquete http se usa para enviar los datos a Internet. En este artículo, exploraremos el mismo tema en detalle. Para enviar datos a Internet a través de su aplicación, siga los siguientes pasos:

1. Importar el paquete http
2. Enviar datos al servidor a través del paquete http
3. Cambia la respuesta a un objeto de dardo personalizado
4. Mostrar la respuesta

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á utilizando 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;

Enviar datos al servidor:

En este artículo, crearemos los datos de un álbum y los enviaremos a JSONPlaceholder a través del método http.post() .

Future<Album> createAlbum(String title) async {
  final http.Response response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    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 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. Utilice 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> createAlbum(String title) async {
  final http.Response response = await http.post(
    'https://jsonplaceholder.typicode.com/albums',
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );
   
  // Dispatch action depending upon
  // the server response
  if (response.statusCode == 201) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Album loading failed!');
  }
}

Preguntar al usuario por un título de álbum:

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>[
    TextField(
      controller: _controller,
      decoration:
          const InputDecoration(hintText: 'Enter Title'),
    ),
    ElevatedButton(
      child: const Text('Create Data'),
      onPressed: () {
        setState(() {
          _futureAlbum = createAlbum(_controller.text);
        });
      },
    ),
 
    // RiisedButton is deprecated and shouldn't be used. Use ElevatedButton.
 
    // RaisedButton(
    //   child: Text('Create Data'),
    //   onPressed: () {
    //     setState(() {
    //       _futureAlbum = createAlbum(_controller.text);
    //     });
    //   },
    // ),
  ],
)

Mostrar la respuesta:

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.hasData) {
      return Text(snapshot.data!.title);
    } 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> createAlbum(String title) async {
  final http.Response response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );
 
  if (response.statusCode == 201) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to create 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
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Creating Data',
      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),
          // ignore: unnecessary_null_comparison
          child: (_futureAlbum == null)
              ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    TextField(
                      controller: _controller,
                      decoration:
                          const InputDecoration(hintText: 'Enter Title'),
                    ),
                    ElevatedButton(
                      child: const Text('Create Data'),
                      onPressed: () {
                        setState(() {
                          _futureAlbum = createAlbum(_controller.text);
                        });
                      },
                    ),
 
                    // RiisedButton is deprecated and shouldn't be used. Use ElevatedButton.
 
                    // RaisedButton(
                    //   child: Text('Create Data'),
                    //   onPressed: () {
                    //     setState(() {
                    //       _futureAlbum = createAlbum(_controller.text);
                    //     });
                    //   },
                    // ),
                  ],
                )
              : FutureBuilder<Album>(
                  future: _futureAlbum,
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return Text(snapshot.data!.title);
                    } else if (snapshot.hasError) {
                      return Text("${snapshot.error}");
                    }
 
                    return const CircularProgressIndicator();
                  },
                ),
        ),
      ),
    );
  }
}

Producción: