Książka kucharska: Lista przepisów

Część sekcji Listy i ekrany ścieżki Flutter w Coddy. Lekcja 28 z 33.

Czas zbudować całą aplikację, korzystając z tego, czego nauczyła ta sekcja: książkę kucharską. Zawiera listę przepisów, ekran dla każdego przepisu z jego składnikami oraz kartę ulubionych.

Zacznij od danych. Aplikacja ma już klasę Recipe z nazwą, czasem przygotowania w minutach i listą składników oraz cztery przepisy na początku build. Wartość ingredients każdego przepisu to List<String>: pole również może być listą.

Pierwszym ekranem jest lista. Może zawierać setki przepisów, więc zbuduj ją za pomocą ListView.builder, umieszczając po jednym ListTile dla każdego przepisu.

Wyzwanie

Łatwy

Zastąp tekst No recipes yet listą przepisów:

użyj ListView.builder z jednym elementem ListTile dla każdego przepisu
każdy element powinien mieć Icons.restaurant_menu jako leading:, nazwę przepisu jako tytuł oraz 20 min (z liczbą minut potrzebnych na przygotowanie przepisu) jako podtytuł

Spróbuj swoich sił

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});
}