Custom slide parts
Add a header, footer, and background to every slide.
Custom slide parts
Use slide parts to render shared UI on every slide:
- Header (
PreferredSizeWidget) - Footer (
PreferredSizeWidget) - Background (
Widget)
Create slide parts
Header and footer widgets must implement PreferredSizeWidget.
import 'package:flutter/material.dart';
import 'package:superdeck/superdeck.dart';
class DeckHeader extends StatelessWidget implements PreferredSizeWidget {
const DeckHeader({super.key});
@override
Size get preferredSize => const Size.fromHeight(56);
@override
Widget build(BuildContext context) {
final slide = SlideConfiguration.of(context);
return Container(
height: preferredSize.height,
padding: const EdgeInsets.symmetric(horizontal: 24),
alignment: Alignment.centerLeft,
child: Text(
slide.options.title ?? 'Untitled',
style: const TextStyle(fontWeight: FontWeight.w600),
),
);
}
}
class DeckFooter extends StatelessWidget implements PreferredSizeWidget {
const DeckFooter({super.key});
@override
Size get preferredSize => const Size.fromHeight(40);
@override
Widget build(BuildContext context) {
final slide = SlideConfiguration.of(context);
return Container(
height: preferredSize.height,
padding: const EdgeInsets.symmetric(horizontal: 24),
alignment: Alignment.centerRight,
child: Text('Slide ${slide.slideIndex + 1}'),
);
}
}
class DeckBackground extends StatelessWidget {
const DeckBackground({super.key});
@override
Widget build(BuildContext context) {
return const DecoratedBox(
decoration: BoxDecoration(color: Color(0xFFF7F7F8)),
);
}
}
Register slide parts
Register your parts in DeckOptions.parts.
import 'package:flutter/widgets.dart';
import 'package:superdeck/superdeck.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await SuperDeckApp.initialize();
runApp(
SuperDeckApp(
options: DeckOptions(
parts: SlideParts(
header: DeckHeader(),
footer: DeckFooter(),
background: DeckBackground(),
),
),
),
);
}