Recipe Card
Loading preview
Starting the Flutter app
A showcase of Flutter's recipe card functionality
import 'package:flutter/material.dart';
class RecipeCard extends StatelessWidget {
const RecipeCard({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Recipe')),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 220,
color: Colors.orange.shade200,
child: Center(
child: Icon(Icons.restaurant_menu, size: 80, color: Colors.orange.shade700),
),
),
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Classic Margherita Pizza',
style: Theme.of(context).textTheme.headlineSmall),
const SizedBox(height: 8),
Row(
children: [
Icon(Icons.schedule, size: 16, color: Colors.grey[600]),
Text(' 45 min', style: Theme.of(context).textTheme.bodyMedium),
const SizedBox(width: 16),
Icon(Icons.restaurant, size: 16, color: Colors.grey[600]),
Text(' 4 servings', style: Theme.of(context).textTheme.bodyMedium),
],
),
const SizedBox(height: 16),
Text('Ingredients', style: Theme.of(context).textTheme.titleMedium),
...['Pizza dough', 'Tomato sauce', 'Fresh mozzarella', 'Basil', 'Olive oil']
.map((i) => ListTile(
dense: true,
leading: const Icon(Icons.circle, size: 8),
title: Text(i),
)),
const SizedBox(height: 8),
Text('Instructions', style: Theme.of(context).textTheme.titleMedium),
const SizedBox(height: 8),
Text(
'1. Preheat oven to 475°F. Stretch dough on a floured surface.\n'
'2. Spread tomato sauce, add mozzarella slices.\n'
'3. Bake 12-15 min until crust is golden.\n'
'4. Top with basil and drizzle olive oil.',
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
),
],
),
),
);
}
}
Add it to your project
Copies the Dart source into your app, so you own it. Flutter SDK only, no extra packages.
First time? Run dart pub global activate fluttertemplates_dev, or read the CLI guide.
How it works
One scrolling page: a 220px orange Container as the hero, a title, a time and servings row, then ingredients and instructions. Ingredients are a list literal mapped to dense ListTiles, and the instructions are a single multi-line Text with numbers typed by hand. With no parameters or state, there is no way to scale servings or tick anything off.
Adapting it
- Add a recipe model parameter to
RecipeCardand replace the inline strings, includingClassic Margherita Pizza. - Store steps as a list and generate the numbering, rather than embedding
\nin one string. - Swap
Icons.circletiles forCheckboxListTiles, kept in state, if cooks should tick off ingredients.