Next Gen UI demo (#1778)

First pass at a Next Generation UI demo app. The UI needs work, feedback
gratefully accepted.

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md

next_gen_ui_demo/lib/title_screen_3a/title_screen.dart

@@ -0,0 +1,112 @@
+// Copyright 2023 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+import '../assets.dart';
+import '../styles.dart';
+import '../title_screen/title_screen.dart';
+import 'title_screen_ui.dart';
+
+class TitleScreen extends TitleScreenBase {
+  const TitleScreen({super.key, required super.callback});
+
+  final _finalReceiveLightAmt = 0.7;
+  final _finalEmitLightAmt = 0.5;
+
+  @override
+  State<TitleScreen> createState() => _TitleScreenState();
+}
+
+class _TitleScreenState extends State<TitleScreen> {
+  @override
+  Widget build(BuildContext context) {
+    final orbColor = AppColors.orbColors[0];
+    final emitColor = AppColors.emitColors[0];
+    WidgetsBinding.instance
+        .addPostFrameCallback((duration) => widget.callback(orbColor));
+
+    return Center(
+      child: Stack(
+        children: [
+          /// Bg-Base
+          Image.asset(AssetPaths.titleBgBase),
+
+          /// Bg-Receive
+          _LitImage(
+            color: orbColor,
+            imgSrc: AssetPaths.titleBgReceive,
+            lightAmt: widget._finalReceiveLightAmt,
+          ),
+
+          /// Mg-Base
+          _LitImage(
+            imgSrc: AssetPaths.titleMgBase,
+            color: orbColor,
+            lightAmt: widget._finalReceiveLightAmt,
+          ),
+
+          /// Mg-Receive
+          _LitImage(
+            imgSrc: AssetPaths.titleMgReceive,
+            color: orbColor,
+            lightAmt: widget._finalReceiveLightAmt,
+          ),
+
+          /// Mg-Emit
+          _LitImage(
+            imgSrc: AssetPaths.titleMgEmit,
+            color: emitColor,
+            lightAmt: widget._finalEmitLightAmt,
+          ),
+
+          /// Fg-Rocks
+          Image.asset(AssetPaths.titleFgBase),
+
+          /// Fg-Receive
+          _LitImage(
+            imgSrc: AssetPaths.titleFgReceive,
+            color: orbColor,
+            lightAmt: widget._finalReceiveLightAmt,
+          ),
+
+          /// Fg-Emit
+          _LitImage(
+            imgSrc: AssetPaths.titleFgEmit,
+            color: emitColor,
+            lightAmt: widget._finalEmitLightAmt,
+          ),
+
+          /// UI
+          const Positioned.fill(
+            child: TitleScreenUi(),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _LitImage extends StatelessWidget {
+  const _LitImage({
+    required this.color,
+    required this.imgSrc,
+    required this.lightAmt,
+  });
+  final Color color;
+  final String imgSrc;
+  final double lightAmt;
+
+  @override
+  Widget build(BuildContext context) {
+    final hsl = HSLColor.fromColor(color);
+    return ColorFiltered(
+      colorFilter: ColorFilter.mode(
+        hsl.withLightness(hsl.lightness * lightAmt).toColor(),
+        BlendMode.modulate,
+      ),
+      child: Image.asset(imgSrc),
+    );
+  }
+}

next_gen_ui_demo/lib/title_screen_3a/title_screen_ui.dart

@@ -0,0 +1,62 @@
+// Copyright 2023 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:extra_alignments/extra_alignments.dart';
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+
+import '../assets.dart';
+import '../common/ui_scaler.dart';
+import '../styles.dart';
+
+class TitleScreenUi extends StatelessWidget {
+  const TitleScreenUi({
+    super.key,
+  });
+  @override
+  Widget build(BuildContext context) {
+    return const Padding(
+      padding: EdgeInsets.symmetric(vertical: 40, horizontal: 50),
+      child: Stack(
+        children: [
+          /// Title Text
+          TopLeft(
+            child: UiScaler(
+              alignment: Alignment.topLeft,
+              child: _TitleText(),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _TitleText extends StatelessWidget {
+  const _TitleText();
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const Gap(20),
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Transform.translate(
+              offset: Offset(-(TextStyles.h1.letterSpacing! * .5), 0),
+              child: Text('OUTPOST', style: TextStyles.h1),
+            ),
+            Image.asset(AssetPaths.titleSelectedLeft, height: 65),
+            Text('57', style: TextStyles.h2),
+            Image.asset(AssetPaths.titleSelectedRight, height: 65),
+          ],
+        ),
+        Text('INTO THE UNKNOWN', style: TextStyles.h3),
+      ],
+    );
+  }
+}