mirror of
https://github.com/flutter/samples.git
synced 2025-11-10 23:08:59 +00:00
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
This commit is contained in:
Brett Morgan
GitHub
178
next_gen_ui_demo/lib/title_screen_5a/title_screen.dart
Normal file
178
next_gen_ui_demo/lib/title_screen_5a/title_screen.dart
Normal file
@@ -0,0 +1,178 @@
|
||||
// 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 'package:flutter_animate/flutter_animate.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});
|
||||
|
||||
@override
|
||||
State<TitleScreen> createState() => _TitleScreenState();
|
||||
}
|
||||
|
||||
class _TitleScreenState extends State<TitleScreen> {
|
||||
Color get _emitColor =>
|
||||
AppColors.emitColors[_difficultyOverride ?? _difficulty];
|
||||
Color get _orbColor =>
|
||||
AppColors.orbColors[_difficultyOverride ?? _difficulty];
|
||||
|
||||
/// Currently selected difficulty
|
||||
int _difficulty = 0;
|
||||
|
||||
/// Currently focused difficulty (if any)
|
||||
int? _difficultyOverride;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
WidgetsBinding.instance
|
||||
.addPostFrameCallback((duration) => widget.callback(_orbColor));
|
||||
}
|
||||
|
||||
void _handleDifficultyPressed(int value) {
|
||||
setState(() => _difficulty = value);
|
||||
widget.callback(_orbColor);
|
||||
}
|
||||
|
||||
void _handleDifficultyFocused(int? value) {
|
||||
setState(() => _difficultyOverride = value);
|
||||
widget.callback(_orbColor);
|
||||
}
|
||||
|
||||
final _finalReceiveLightAmt = 0.7;
|
||||
final _finalEmitLightAmt = 0.5;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Center(
|
||||
child: _AnimatedColors(
|
||||
orbColor: _orbColor,
|
||||
emitColor: _emitColor,
|
||||
builder: (_, orbColor, emitColor) {
|
||||
return Stack(
|
||||
children: [
|
||||
/// Bg-Base
|
||||
Image.asset(AssetPaths.titleBgBase),
|
||||
|
||||
/// Bg-Receive
|
||||
_LitImage(
|
||||
color: orbColor,
|
||||
imgSrc: AssetPaths.titleBgReceive,
|
||||
lightAmt: _finalReceiveLightAmt,
|
||||
),
|
||||
|
||||
/// Mg-Base
|
||||
_LitImage(
|
||||
imgSrc: AssetPaths.titleMgBase,
|
||||
color: orbColor,
|
||||
lightAmt: _finalReceiveLightAmt,
|
||||
),
|
||||
|
||||
/// Mg-Receive
|
||||
_LitImage(
|
||||
imgSrc: AssetPaths.titleMgReceive,
|
||||
color: orbColor,
|
||||
lightAmt: _finalReceiveLightAmt,
|
||||
),
|
||||
|
||||
/// Mg-Emit
|
||||
_LitImage(
|
||||
imgSrc: AssetPaths.titleMgEmit,
|
||||
color: emitColor,
|
||||
lightAmt: _finalEmitLightAmt,
|
||||
),
|
||||
|
||||
/// Fg-Rocks
|
||||
Image.asset(AssetPaths.titleFgBase),
|
||||
|
||||
/// Fg-Receive
|
||||
_LitImage(
|
||||
imgSrc: AssetPaths.titleFgReceive,
|
||||
color: orbColor,
|
||||
lightAmt: _finalReceiveLightAmt,
|
||||
),
|
||||
|
||||
/// Fg-Emit
|
||||
_LitImage(
|
||||
imgSrc: AssetPaths.titleFgEmit,
|
||||
color: emitColor,
|
||||
lightAmt: _finalEmitLightAmt,
|
||||
),
|
||||
|
||||
/// UI
|
||||
Positioned.fill(
|
||||
child: TitleScreenUi(
|
||||
difficulty: _difficulty,
|
||||
onDifficultyFocused: _handleDifficultyFocused,
|
||||
onDifficultyPressed: _handleDifficultyPressed,
|
||||
),
|
||||
),
|
||||
],
|
||||
).animate().fadeIn(duration: 1.seconds, delay: .3.seconds);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AnimatedColors extends StatelessWidget {
|
||||
const _AnimatedColors({
|
||||
required this.emitColor,
|
||||
required this.orbColor,
|
||||
required this.builder,
|
||||
});
|
||||
|
||||
final Color emitColor;
|
||||
final Color orbColor;
|
||||
|
||||
final Widget Function(BuildContext context, Color orbColor, Color emitColor)
|
||||
builder;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final duration = .5.seconds;
|
||||
return TweenAnimationBuilder(
|
||||
tween: ColorTween(begin: emitColor, end: emitColor),
|
||||
duration: duration,
|
||||
builder: (_, emitColor, __) {
|
||||
return TweenAnimationBuilder(
|
||||
tween: ColorTween(begin: orbColor, end: orbColor),
|
||||
duration: duration,
|
||||
builder: (context, orbColor, __) {
|
||||
return builder(context, orbColor!, emitColor!);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
299
next_gen_ui_demo/lib/title_screen_5a/title_screen_ui.dart
Normal file
299
next_gen_ui_demo/lib/title_screen_5a/title_screen_ui.dart
Normal file
@@ -0,0 +1,299 @@
|
||||
// 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:flutter_animate/flutter_animate.dart';
|
||||
import 'package:focusable_control_builder/focusable_control_builder.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../assets.dart';
|
||||
import '../common/shader_effect.dart';
|
||||
import '../common/ticking_builder.dart';
|
||||
import '../common/ui_scaler.dart';
|
||||
import '../styles.dart';
|
||||
|
||||
class TitleScreenUi extends StatelessWidget {
|
||||
const TitleScreenUi({
|
||||
super.key,
|
||||
required this.difficulty,
|
||||
required this.onDifficultyPressed,
|
||||
required this.onDifficultyFocused,
|
||||
});
|
||||
|
||||
final int difficulty;
|
||||
final void Function(int difficulty) onDifficultyPressed;
|
||||
final void Function(int? difficulty) onDifficultyFocused;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 50),
|
||||
child: Stack(
|
||||
children: [
|
||||
/// Title Text
|
||||
const TopLeft(
|
||||
child: UiScaler(
|
||||
alignment: Alignment.topLeft,
|
||||
child: _TitleText(),
|
||||
),
|
||||
),
|
||||
|
||||
/// Difficulty Btns
|
||||
BottomLeft(
|
||||
child: UiScaler(
|
||||
alignment: Alignment.bottomLeft,
|
||||
child: _DifficultyBtns(
|
||||
difficulty: difficulty,
|
||||
onDifficultyPressed: onDifficultyPressed,
|
||||
onDifficultyFocused: onDifficultyFocused,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
/// StartBtn
|
||||
BottomRight(
|
||||
child: UiScaler(
|
||||
alignment: Alignment.bottomRight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 20, right: 40),
|
||||
child: _StartBtn(onPressed: () {}),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TitleText extends StatelessWidget {
|
||||
const _TitleText();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget content = 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),
|
||||
],
|
||||
).animate().fadeIn(delay: .8.seconds, duration: .7.seconds),
|
||||
Text('INTO THE UNKNOWN', style: TextStyles.h3)
|
||||
.animate()
|
||||
.fadeIn(delay: 1.seconds, duration: .7.seconds),
|
||||
],
|
||||
);
|
||||
return Consumer<Shaders?>(
|
||||
builder: (context, shaders, _) {
|
||||
if (shaders == null) return content;
|
||||
return TickingBuilder(
|
||||
builder: (context, time) {
|
||||
return AnimatedSampler(
|
||||
(image, size, canvas) {
|
||||
const double overdrawPx = 30;
|
||||
shaders.ui
|
||||
..setFloat(0, size.width)
|
||||
..setFloat(1, size.height)
|
||||
..setFloat(2, time)
|
||||
..setImageSampler(0, image);
|
||||
Rect rect = Rect.fromLTWH(-overdrawPx, -overdrawPx,
|
||||
size.width + overdrawPx, size.height + overdrawPx);
|
||||
canvas.drawRect(rect, Paint()..shader = shaders.ui);
|
||||
},
|
||||
child: content,
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DifficultyBtns extends StatelessWidget {
|
||||
const _DifficultyBtns({
|
||||
required this.difficulty,
|
||||
required this.onDifficultyPressed,
|
||||
required this.onDifficultyFocused,
|
||||
});
|
||||
|
||||
final int difficulty;
|
||||
final void Function(int difficulty) onDifficultyPressed;
|
||||
final void Function(int? difficulty) onDifficultyFocused;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_DifficultyBtn(
|
||||
label: 'Casual',
|
||||
selected: difficulty == 0,
|
||||
onPressed: () => onDifficultyPressed(0),
|
||||
onHover: (over) => onDifficultyFocused(over ? 0 : null),
|
||||
)
|
||||
.animate()
|
||||
.fadeIn(delay: 1.3.seconds, duration: .35.seconds)
|
||||
.slide(begin: const Offset(0, .2)),
|
||||
_DifficultyBtn(
|
||||
label: 'Normal',
|
||||
selected: difficulty == 1,
|
||||
onPressed: () => onDifficultyPressed(1),
|
||||
onHover: (over) => onDifficultyFocused(over ? 1 : null),
|
||||
)
|
||||
.animate()
|
||||
.fadeIn(delay: 1.5.seconds, duration: .35.seconds)
|
||||
.slide(begin: const Offset(0, .2)),
|
||||
_DifficultyBtn(
|
||||
label: 'Hardcore',
|
||||
selected: difficulty == 2,
|
||||
onPressed: () => onDifficultyPressed(2),
|
||||
onHover: (over) => onDifficultyFocused(over ? 2 : null),
|
||||
)
|
||||
.animate()
|
||||
.fadeIn(delay: 1.7.seconds, duration: .35.seconds)
|
||||
.slide(begin: const Offset(0, .2)),
|
||||
const Gap(20),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DifficultyBtn extends StatelessWidget {
|
||||
const _DifficultyBtn({
|
||||
required this.selected,
|
||||
required this.onPressed,
|
||||
required this.onHover,
|
||||
required this.label,
|
||||
});
|
||||
final String label;
|
||||
final bool selected;
|
||||
final VoidCallback onPressed;
|
||||
final void Function(bool hasFocus) onHover;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FocusableControlBuilder(
|
||||
onPressed: onPressed,
|
||||
onHoverChanged: (_, state) => onHover.call(state.isHovered),
|
||||
builder: (_, state) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: SizedBox(
|
||||
width: 250,
|
||||
height: 60,
|
||||
child: Stack(
|
||||
children: [
|
||||
/// Bg with fill and outline
|
||||
AnimatedOpacity(
|
||||
opacity: (!selected && (state.isHovered || state.isFocused))
|
||||
? 1
|
||||
: 0,
|
||||
duration: .3.seconds,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF00D1FF).withOpacity(.1),
|
||||
border: Border.all(color: Colors.white, width: 5),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
if (state.isHovered || state.isFocused) ...[
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF00D1FF).withOpacity(.1),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
/// cross-hairs (selected state)
|
||||
if (selected) ...[
|
||||
CenterLeft(
|
||||
child: Image.asset(AssetPaths.titleSelectedLeft),
|
||||
),
|
||||
CenterRight(
|
||||
child: Image.asset(AssetPaths.titleSelectedRight),
|
||||
),
|
||||
],
|
||||
|
||||
/// Label
|
||||
Center(
|
||||
child: Text(label.toUpperCase(), style: TextStyles.btn),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _StartBtn extends StatefulWidget {
|
||||
const _StartBtn({required this.onPressed});
|
||||
final VoidCallback onPressed;
|
||||
|
||||
@override
|
||||
State<_StartBtn> createState() => _StartBtnState();
|
||||
}
|
||||
|
||||
class _StartBtnState extends State<_StartBtn> {
|
||||
AnimationController? _btnAnim;
|
||||
bool _wasHovered = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FocusableControlBuilder(
|
||||
cursor: SystemMouseCursors.click,
|
||||
onPressed: widget.onPressed,
|
||||
builder: (_, state) {
|
||||
if ((state.isHovered || state.isFocused) &&
|
||||
!_wasHovered &&
|
||||
_btnAnim?.status != AnimationStatus.forward) {
|
||||
_btnAnim?.forward(from: 0);
|
||||
}
|
||||
_wasHovered = (state.isHovered || state.isFocused);
|
||||
return SizedBox(
|
||||
width: 520,
|
||||
height: 100,
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned.fill(child: Image.asset(AssetPaths.titleStartBtn)),
|
||||
if (state.isHovered || state.isFocused) ...[
|
||||
Positioned.fill(
|
||||
child: Image.asset(AssetPaths.titleStartBtnHover)),
|
||||
],
|
||||
Center(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Text('START MISSION',
|
||||
style: TextStyles.btn
|
||||
.copyWith(fontSize: 24, letterSpacing: 18)),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
.animate(autoPlay: false, onInit: (c) => _btnAnim = c)
|
||||
.shimmer(duration: .7.seconds, color: Colors.black),
|
||||
)
|
||||
.animate()
|
||||
.fadeIn(delay: 2.3.seconds)
|
||||
.slide(begin: const Offset(0, .2));
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user