mirror of https://github.com/flutter/pinball.git
feat: character selection for desktop and mobile (#280)
parent
97193c63f3
commit
3fbb2564cc
After Width: | Height: | Size: 1.6 KiB |
@ -1 +1,2 @@
|
||||
export 'pinball_dialog.dart';
|
||||
export 'pixelated_decoration.dart';
|
||||
|
@ -0,0 +1,87 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:pinball_ui/pinball_ui.dart';
|
||||
|
||||
/// {@template pinball_dialog}
|
||||
/// Pinball-themed dialog.
|
||||
/// {@endtemplate}
|
||||
class PinballDialog extends StatelessWidget {
|
||||
/// {@macro pinball_dialog}
|
||||
const PinballDialog({
|
||||
Key? key,
|
||||
required this.title,
|
||||
required this.child,
|
||||
this.subtitle,
|
||||
}) : super(key: key);
|
||||
|
||||
/// Title shown in the dialog.
|
||||
final String title;
|
||||
|
||||
/// Optional subtitle shown below the [title].
|
||||
final String? subtitle;
|
||||
|
||||
/// Body of the dialog.
|
||||
final Widget child;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final height = MediaQuery.of(context).size.height * 0.5;
|
||||
return Center(
|
||||
child: SizedBox(
|
||||
height: height,
|
||||
width: height * 1.4,
|
||||
child: PixelatedDecoration(
|
||||
header: subtitle != null
|
||||
? _TitleAndSubtitle(title: title, subtitle: subtitle!)
|
||||
: _Title(title: title),
|
||||
body: child,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Title extends StatelessWidget {
|
||||
const _Title({Key? key, required this.title}) : super(key: key);
|
||||
|
||||
final String title;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Text(
|
||||
title,
|
||||
style: Theme.of(context).textTheme.headline3!.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: PinballColors.darkBlue,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
);
|
||||
}
|
||||
|
||||
class _TitleAndSubtitle extends StatelessWidget {
|
||||
const _TitleAndSubtitle({
|
||||
Key? key,
|
||||
required this.title,
|
||||
required this.subtitle,
|
||||
}) : super(key: key);
|
||||
|
||||
final String title;
|
||||
final String subtitle;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_Title(title: title),
|
||||
Text(
|
||||
subtitle,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
style: textTheme.headline3!.copyWith(fontWeight: FontWeight.normal),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
@ -0,0 +1,50 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:pinball_ui/gen/gen.dart';
|
||||
import 'package:pinball_ui/pinball_ui.dart';
|
||||
|
||||
/// {@template pinball_button}
|
||||
/// Pinball-themed button with pixel art.
|
||||
/// {@endtemplate}
|
||||
class PinballButton extends StatelessWidget {
|
||||
/// {@macro pinball_button}
|
||||
const PinballButton({
|
||||
Key? key,
|
||||
required this.text,
|
||||
required this.onTap,
|
||||
}) : super(key: key);
|
||||
|
||||
/// Text of the button.
|
||||
final String text;
|
||||
|
||||
/// Tap callback.
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(Assets.images.button.pinballButton.keyName),
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 32,
|
||||
vertical: 16,
|
||||
),
|
||||
child: Text(
|
||||
text,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.headline3!
|
||||
.copyWith(color: PinballColors.white),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
@ -0,0 +1 @@
|
||||
export 'pinball_button.dart';
|
@ -0,0 +1,44 @@
|
||||
// ignore_for_file: prefer_const_constructors
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:pinball_ui/pinball_ui.dart';
|
||||
|
||||
void main() {
|
||||
group('PinballDialog', () {
|
||||
group('with title only', () {
|
||||
testWidgets('renders the title and the body', (tester) async {
|
||||
tester.binding.window.physicalSizeTestValue = const Size(2000, 4000);
|
||||
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
|
||||
await tester.pumpWidget(
|
||||
const MaterialApp(
|
||||
home: PinballDialog(title: 'title', child: Placeholder()),
|
||||
),
|
||||
);
|
||||
expect(find.byType(PixelatedDecoration), findsOneWidget);
|
||||
expect(find.text('title'), findsOneWidget);
|
||||
expect(find.byType(Placeholder), findsOneWidget);
|
||||
});
|
||||
});
|
||||
|
||||
group('with title and subtitle', () {
|
||||
testWidgets('renders the title, subtitle and the body', (tester) async {
|
||||
tester.binding.window.physicalSizeTestValue = const Size(2000, 4000);
|
||||
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
|
||||
await tester.pumpWidget(
|
||||
MaterialApp(
|
||||
home: PinballDialog(
|
||||
title: 'title',
|
||||
subtitle: 'sub',
|
||||
child: Icon(Icons.home),
|
||||
),
|
||||
),
|
||||
);
|
||||
expect(find.byType(PixelatedDecoration), findsOneWidget);
|
||||
expect(find.text('title'), findsOneWidget);
|
||||
expect(find.text('sub'), findsOneWidget);
|
||||
expect(find.byType(Icon), findsOneWidget);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
@ -0,0 +1,27 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:pinball_ui/pinball_ui.dart';
|
||||
|
||||
void main() {
|
||||
group('PinballButton', () {
|
||||
testWidgets('renders the given text and responds to taps', (tester) async {
|
||||
var wasTapped = false;
|
||||
await tester.pumpWidget(
|
||||
MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Center(
|
||||
child: PinballButton(
|
||||
text: 'test',
|
||||
onTap: () {
|
||||
wasTapped = true;
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
await tester.tap(find.text('test'));
|
||||
expect(wasTapped, isTrue);
|
||||
});
|
||||
});
|
||||
}
|
Loading…
Reference in new issue