Книга рецептов: список рецептов
Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 28 из 33.
Пора создать целое приложение, используя всё, чему научил этот раздел: книгу рецептов. В ней есть список рецептов, экран для каждого рецепта с его ингредиентами и вкладка с избранным.
Начни с данных. В приложении уже есть класс Recipe с названием, временем приготовления в минутах и списком ингредиентов, а в начале build находятся четыре рецепта. Поле ingredients каждого рецепта имеет тип List<String>: поле тоже может быть списком.
Первый экран — это список. В нём могут быть сотни рецептов, поэтому создай его с помощью ListView.builder, по одному ListTile на каждый рецепт.
Задание
ЛегкоЗамени текст 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});
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Списки и экраны
1Прокручиваемые списки
Список с прокруткойЭлементы спискаНачало и конецНажатие на элемент спискаРазделители между строками4Ваши собственные классы
Класс для ваших данныхИменованные и обязательные параметрыПоля, которые могут быть пустымиВиджеты из данных с помощью mapФильтрация списка с помощью whereПоиск в Map7Проект: Книга рецептов
Книга рецептов: список рецептовКнига рецептов: экран рецепта6Вкладки, боковые панели и свайпы
Вкладки с панелью навигацииЗаливные значки для открытой вкладкиБоковая панельУдаление свайпомОтмена свайпаПотренируйтесь самостоятельно: Онлайн-компилятор Flutter