Buku Resep: Daftar Resep

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 28 dari 33.

Saatnya membuat aplikasi lengkap dengan materi dari bagian ini: buku resep. Aplikasi ini memiliki list resep, layar untuk setiap resep yang menampilkan bahan-bahannya, dan tab untuk resep favoritmu.

Mulailah dengan datanya. Aplikasi ini sudah memiliki class Recipe dengan nama, waktu yang dibutuhkan dalam menit, dan list bahan, serta empat resep di bagian atas build. ingredients setiap resep bertipe List<String>: sebuah field juga bisa berupa list.

Layar pertama menampilkan list. Isinya bisa bertambah hingga ratusan resep, jadi buat layar ini dengan ListView.builder, satu ListTile untuk setiap resep.

Tantangan

Mudah

Ganti teks No recipes yet dengan daftar resep:

ListView.builder dengan satu ListTile untuk setiap resep
setiap tile memiliki Icons.restaurant_menu sebagai leading:, nama resep sebagai judulnya, dan 20 min (dengan jumlah menit resep) sebagai subjudulnya

Coba sendiri

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final List<Recipe> recipes = [
      Recipe(name: 'Pancakes', minutes: 20, ingredients: ['Flour', 'Eggs', 'Milk', 'Butter']),
      Recipe(name: 'Tomato Soup', minutes: 35, ingredients: ['Tomatoes', 'Onion', 'Garlic', 'Olive oil']),
      Recipe(name: 'Guacamole', minutes: 10, ingredients: ['Avocados', 'Lime', 'Onion', 'Salt']),
      Recipe(name: 'Fried Rice', minutes: 25, ingredients: ['Rice', 'Eggs', 'Peas', 'Soy sauce']),
    ];
    return Scaffold(
      appBar: AppBar(title: const Text('Recipe Book')),
      body: const Center(
        child: Text('No recipes yet'),
      ),
    );
  }
}

class Recipe {
  final String name;
  final int minutes;
  final List<String> ingredients;

  Recipe({required this.name, required this.minutes, required this.ingredients});
}