Restaurant Detail
Loading preview
Starting the Flutter app
A showcase of Flutter's restaurant detail functionality
import 'package:flutter/material.dart';
class RestaurantDetail extends StatelessWidget {
const RestaurantDetail({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: const Text('Pizza Palace'),
background: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.orange.shade300,
Colors.orange.shade700,
],
),
),
child: Icon(Icons.restaurant, size: 80, color: Colors.white.withValues(alpha: 0.5)),
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Icons.star, color: Colors.amber[700], size: 20),
Text(' 4.5', style: Theme.of(context).textTheme.titleMedium),
Text(' • Italian • \$',
style: Theme.of(context).textTheme.bodyMedium),
Text(' 25-35 min delivery',
style: Theme.of(context).textTheme.bodyMedium),
],
),
const SizedBox(height: 16),
Text(
'Authentic Italian pizza made with fresh ingredients. Family owned since 1995.',
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(height: 16),
Row(
children: [
FilledButton.icon(
onPressed: () => _showDemo(context, 'View Menu (demo)'),
icon: const Icon(Icons.menu_book),
label: const Text('View Menu'),
),
const SizedBox(width: 8),
OutlinedButton.icon(
onPressed: () => _showDemo(context, 'Directions (demo)'),
icon: const Icon(Icons.location_on),
label: const Text('Directions'),
),
],
),
],
),
),
),
],
),
);
}
}
void _showDemo(BuildContext context, String message) {
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(SnackBar(content: Text(message)));
}
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
With the title inside FlexibleSpaceBar, Pizza Palace shrinks into the pinned toolbar as the 200px SliverAppBar collapses. The gradient and Icons.restaurant stand in for a photo. Below sit a rating row, a description and two buttons that show a demo SnackBar. Everything is literal, including a lone $ in the info row that plays the part of a price tier.
Adapting it
- Give
RestaurantDetaila model parameter and drop the literals. - Push your menu route from
View Menu, and open a maps URL fromDirectionswithurl_launcher. - The rating line is an unflexed
RowofTexts, so long cuisine names will overflow; switch it toWrap.