No sirve de nada construir una interfaz de usuario en Flutter hasta que la integres con tu backend. Se utiliza una solicitud GET para extraer datos útiles de su backend para usarlos en su aplicación. Para realizar una solicitud GET en Flutter , debemos seguir 3 pasos:
- Obtenga el paquete más reciente de Dart Http.
- Ingrese el paquete en el archivo pubspec.yaml en su sección de dependencias.
- Importe el paquete en su archivo main.dart.
En la parte de la URL, puede ingresar el enlace de la API REST de backend.
NOTA:
- También puede dividir el archivo main.dart en varias secciones, pero para simplificar, se realiza solo en un archivo.
- Aquí se ha utilizado una URL de solicitud JSON GET aleatoria de Internet, que se puede reemplazar con cualquier API Restful de backend .
Dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
//Creating a class user to store the data;
class User {
final int id;
final int userId;
final String title;
final String body;
User({
this.id,
this.userId,
this.title,
this.body,
});
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//Applying get request.
Future<List<User>> getRequest() async {
//replace your restFull API here.
String url = "https://jsonplaceholder.typicode.com/posts";
final response = await http.get(url);
var responseData = json.decode(response.body);
//Creating a list to store input data;
List<User> users = [];
for (var singleUser in responseData) {
User user = User(
id: singleUser["id"],
userId: singleUser["userId"],
title: singleUser["title"],
body: singleUser["body"]);
//Adding user to the list.
users.add(user);
}
return users;
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Http Get Request."),
leading: Icon(
Icons.get_app,
),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: FutureBuilder(
future: getRequest(),
builder: (BuildContext ctx, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (ctx, index) => ListTile(
title: Text(snapshot.data[index].title),
subtitle: Text(snapshot.data[index].body),
contentPadding: EdgeInsets.only(bottom: 20.0),
),
);
}
},
),
),
),
);
}
}
Publicación traducida automáticamente
Artículo escrito por AkashDubey3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA