mirror of
https://git.selfprivacy.org/kherel/selfprivacy.org.app.git
synced 2024-08-24 14:01:51 +00:00
148 lines
4.5 KiB
Dart
148 lines
4.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:selfprivacy/ui/components/pre_styled_buttons/flash_fab.dart';
|
|
import 'package:selfprivacy/ui/helpers/widget_size.dart';
|
|
|
|
class BrandHeroScreen extends StatelessWidget {
|
|
const BrandHeroScreen({
|
|
required this.children,
|
|
final super.key,
|
|
this.hasBackButton = true,
|
|
this.hasFlashButton = true,
|
|
this.heroIcon,
|
|
this.heroIconWidget,
|
|
this.heroTitle = '',
|
|
this.heroSubtitle,
|
|
this.onBackButtonPressed,
|
|
});
|
|
|
|
final List<Widget> children;
|
|
final bool hasBackButton;
|
|
final bool hasFlashButton;
|
|
final IconData? heroIcon;
|
|
final Widget? heroIconWidget;
|
|
final String heroTitle;
|
|
final String? heroSubtitle;
|
|
final VoidCallback? onBackButtonPressed;
|
|
|
|
@override
|
|
Widget build(final BuildContext context) {
|
|
final Widget heroIconWidget = this.heroIconWidget ??
|
|
Icon(
|
|
heroIcon ?? Icons.help,
|
|
size: 48.0,
|
|
color: Theme.of(context).colorScheme.onBackground,
|
|
);
|
|
final bool hasHeroIcon = heroIcon != null || this.heroIconWidget != null;
|
|
|
|
return Scaffold(
|
|
floatingActionButton: hasFlashButton ? const BrandFab() : null,
|
|
body: CustomScrollView(
|
|
slivers: [
|
|
HeroSliverAppBar(
|
|
heroTitle: heroTitle,
|
|
hasHeroIcon: hasHeroIcon,
|
|
hasBackButton: hasBackButton,
|
|
onBackButtonPressed: onBackButtonPressed,
|
|
heroIconWidget: heroIconWidget,
|
|
),
|
|
if (heroSubtitle != null)
|
|
SliverPadding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16.0,
|
|
vertical: 4.0,
|
|
),
|
|
sliver: SliverList(
|
|
delegate: SliverChildListDelegate([
|
|
Text(
|
|
heroSubtitle!,
|
|
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
|
|
color: Theme.of(context).colorScheme.onBackground,
|
|
),
|
|
textAlign: hasHeroIcon ? TextAlign.center : TextAlign.start,
|
|
),
|
|
]),
|
|
),
|
|
),
|
|
SliverPadding(
|
|
padding: const EdgeInsets.all(16.0),
|
|
sliver: SliverList(
|
|
delegate: SliverChildListDelegate(children),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class HeroSliverAppBar extends StatefulWidget {
|
|
const HeroSliverAppBar({
|
|
required this.heroTitle,
|
|
required this.hasHeroIcon,
|
|
required this.hasBackButton,
|
|
required this.onBackButtonPressed,
|
|
required this.heroIconWidget,
|
|
final super.key,
|
|
});
|
|
|
|
final String heroTitle;
|
|
final bool hasHeroIcon;
|
|
final bool hasBackButton;
|
|
final VoidCallback? onBackButtonPressed;
|
|
final Widget heroIconWidget;
|
|
|
|
@override
|
|
State<HeroSliverAppBar> createState() => _HeroSliverAppBarState();
|
|
}
|
|
|
|
class _HeroSliverAppBarState extends State<HeroSliverAppBar> {
|
|
Size _size = Size.zero;
|
|
@override
|
|
Widget build(final BuildContext context) => SliverAppBar(
|
|
expandedHeight:
|
|
widget.hasHeroIcon ? 148.0 + _size.height : 72.0 + _size.height,
|
|
primary: true,
|
|
pinned: true,
|
|
stretch: true,
|
|
leading: widget.hasBackButton
|
|
? IconButton(
|
|
icon: const Icon(Icons.arrow_back),
|
|
onPressed: widget.onBackButtonPressed ??
|
|
() => Navigator.of(context).pop(),
|
|
)
|
|
: null,
|
|
flexibleSpace: FlexibleSpaceBar(
|
|
title: LayoutBuilder(
|
|
builder: (final context, final constraints) => SizedBox(
|
|
width: constraints.maxWidth - 72.0,
|
|
child: WidgetSize(
|
|
onChange: (final Size size) => setState(() => _size = size),
|
|
child: Text(
|
|
widget.heroTitle,
|
|
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
),
|
|
overflow: TextOverflow.fade,
|
|
textAlign: TextAlign.center,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
expandedTitleScale: 1.2,
|
|
centerTitle: true,
|
|
collapseMode: CollapseMode.pin,
|
|
titlePadding: const EdgeInsets.only(
|
|
bottom: 12.0,
|
|
top: 16.0,
|
|
),
|
|
background: Column(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
const SizedBox(height: 72.0),
|
|
if (widget.hasHeroIcon) widget.heroIconWidget,
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|