> For the complete documentation index, see [llms.txt](https://avbravo-2.gitbook.io/developmentcookbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://avbravo-2.gitbook.io/developmentcookbook/viii.-fluter-con-restfull-api/8.1-proyecto-ejemplo.md).

# 8.1 Proyecto ejemplo

Basado en el tutorial

{% embed url="<https://flutter-es.io/docs/cookbook/networking/fetch-data>" %}

Crear un proyecto nuevo

Agregar la dependencia

```dart
http: 0.12.0
```

### Editar el archivo pubsec,yaml y agregar la dependencia

![](/files/-LoOGncHCLRYyq__by17)

Dar clic derecho y seleccionar

![](/files/-LoOHyUdYLofwDhGtjve)

Hacer una petición por red

```dart
Future<http.Response> fetchPost() {
  return http.get('https://jsonplaceholder.typicode.com/posts/1');
}
```

La respuesta debe ser convertido a un objeto Dart., generlamente creamos una clase.

Convertir el http.Response en un Post.

Usar el Widget  FutureBuilder para mostrar los datos.

Reemplazar main.dart con

```dart
import 'dart:async';
import 'dart:convert';

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

Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    // Si la llamada al servidor fue exitosa, analiza el JSON
    return Post.fromJson(json.decode(response.body));
  } else {
    // Si la llamada no fue exitosa, lanza un error.
    throw Exception('Failed to load post');
  }
}

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({this.userId, this.id, this.title, this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget {
  final Future<Post> post;

  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>(
            future: post,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.title);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              // Por defecto, muestra un loading spinner
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
```

Ejecute Genymotion y el Device respectivo

![](/files/-LoOIC3CRPunORDjmfNb)

Una vez que el emulador este en ejecución ejecute el proyecto desde Visual Studio Code.

### Al ejecutarlo

![](/files/-LoOGEKd6iTXOcNfF2eU)

Desde un browser podemos consultar los datos

<https://jsonplaceholder.typicode.com/posts/1>

![](/files/-LoOGSyvao0SbMxQ5Rr5)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://avbravo-2.gitbook.io/developmentcookbook/viii.-fluter-con-restfull-api/8.1-proyecto-ejemplo.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.