flutter-wonderous-app/lib/ui/screens/editorial/widgets/_title_text.dart

part of '../editorial_screen.dart';

class _TitleText extends StatelessWidget {
  const _TitleText(this.data, {super.key, required this.scroller});
  final WonderData data;
  final ScrollController scroller;

  @override
  Widget build(BuildContext context) {
    return MergeSemantics(
      child: DefaultTextColor(
        color: $styles.colors.offWhite,
        child: StaticTextScale(
          child: Center(
            child: SizedBox(
              width: $styles.sizes.maxContentWidth1,
              child: Column(
                children: [
                  Gap($styles.insets.md),
                  Gap(30),

                  /// Sub-title row
                  SeparatedRow(
                    padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm),
                    separatorBuilder: () => Gap($styles.insets.sm),
                    children: [
                      Expanded(
                        child: Divider(
                          color: data.type.fgColor,
                        ).maybeAnimate().scale(curve: Curves.easeOut, delay: 500.delayMs),
                      ),
                      Semantics(
                        header: true,
                        sortKey: OrdinalSortKey(1),
                        child: Text(
                          data.subTitle.toUpperCase(),
                          style: $styles.text.title2,
                        ).maybeAnimate().fade(delay: 100.delayMs),
                      ),
                      Expanded(
                        child: Divider(
                          color: data.type.fgColor,
                        ).maybeAnimate().scale(curve: Curves.easeOut, delay: 500.delayMs),
                      ),
                    ],
                  ),
                  Gap($styles.insets.md),

                  /// Wonder title text
                  Semantics(
                    sortKey: OrdinalSortKey(0),
                    child: AnimatedBuilder(
                        animation: scroller,
                        builder: (_, __) {
                          final yPos = ContextUtils.getGlobalPos(context)?.dy ?? 0;
                          bool enableHero = yPos > -100;
                          return WonderTitleText(data, enableHero: enableHero);
                        }),
                  ),
                  Gap($styles.insets.xs),

                  /// Region
                  Text(
                    data.regionTitle.toUpperCase(),
                    style: $styles.text.title1,
                    textAlign: TextAlign.center,
                  ),
                  Gap($styles.insets.md),

                  /// Compass divider
                  ExcludeSemantics(
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm),
                      child: AnimatedBuilder(
                        animation: scroller,
                        builder: (_, __) => CompassDivider(
                          isExpanded: scroller.position.pixels <= 0,
                          linesColor: data.type.fgColor,
                          compassColor: $styles.colors.offWhite,
                        ),
                      ),
                    ),
                  ),
                  Gap($styles.insets.sm),

                  /// Date
                  Text(
                    $strings.titleLabelDate(StringUtils.formatYr(data.startYr), StringUtils.formatYr(data.endYr)),
                    style: $styles.text.h4,
                    textAlign: TextAlign.center,
                  ),
                  Gap($styles.insets.sm),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}