Menu
CoddyTech

Книга рецептов: список рецептов

Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 28 из 33.

Пора создать целое приложение, используя всё, чему научил этот раздел: книгу рецептов. В ней есть список рецептов, экран для каждого рецепта с его ингредиентами и вкладка с избранным.

Начни с данных. В приложении уже есть класс Recipe с названием, временем приготовления в минутах и списком ингредиентов, а в начале build находятся четыре рецепта. Поле ingredients каждого рецепта имеет тип List<String>: поле тоже может быть списком.

Первый экран — это список. В нём могут быть сотни рецептов, поэтому создай его с помощью ListView.builder, по одному ListTile на каждый рецепт.

challenge icon

Задание

Легко

Замени текст No recipes yet списком рецептов:

  • ListView.builder с одним ListTile для каждого рецепта
  • у каждой плитки в качестве leading: указан Icons.restaurant_menu, в заголовке — название рецепта, а в подзаголовке — 20 min (с количеством минут, указанным для рецепта)

Попробуйте сами

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});
}
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Списки и экраны

Потренируйтесь самостоятельно: Онлайн-компилятор Flutter