blacroix / henri_potier_flutter

POC Henri Potier with Flutter

Henri Potier with Flutter

POC of coding Henri Potier exercise with Flutter Beta.

Demo

Live Coding

Live Coding focus on book list retrieval and list display, it should take ~15 min.

Steps

• Create a new Flutter project
• Remove extra comments
• Create Book class with title
• Add _book to _MyHomePageState
• Remove method _incrementCounter
• Add ListView.builder
• Use => Text as itemBuilder
• Then use => ListTile
• Override initState
• Add async, http, convert

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

• Add method fetchBooks

Future<List<Book>> fetchBooks() async {
  final response = await http.get('http://henri-potier.xebia.fr/books');
  final json = JSON.decode(response.body);
  final books = List<Book>();
  for (final jsonBook in json) {
    books.add(Book(jsonBook['title']));
  }
  return books;
}

• Code method initState

@override
void initState() {
  super.initState();
  fetchBooks().then((books) {
    setState(() {
      this._books = books;
    });
  });
}

• Live coding can stop here, or go further if more time
• Add cover to Book and convert from JSON
• Add Image.network to ListTile
• Add Column then Divider to itemBuilder

That's it folks!