first commit
This commit is contained in:
@@ -0,0 +1,190 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../core/theme/app_colors.dart';
|
||||
import '../../../../core/theme/app_motion.dart';
|
||||
import '../../../../shared/widgets/riotz_shell.dart';
|
||||
|
||||
class RiotzThemePreviewPage extends StatefulWidget {
|
||||
const RiotzThemePreviewPage({super.key});
|
||||
|
||||
@override
|
||||
State<RiotzThemePreviewPage> createState() => _RiotzThemePreviewPageState();
|
||||
}
|
||||
|
||||
class _RiotzThemePreviewPageState extends State<RiotzThemePreviewPage> {
|
||||
bool _switchValue = true;
|
||||
bool _chipSelected = true;
|
||||
double _slider = 42;
|
||||
bool _animatedOn = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return RiotzShell(
|
||||
title: 'RIOTZ // Theme Preview',
|
||||
child: ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
Text('Typography', style: theme.textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
Text('Display Medium', style: theme.textTheme.displayMedium),
|
||||
Text('Headline Medium', style: theme.textTheme.headlineMedium),
|
||||
Text('Title Medium', style: theme.textTheme.titleMedium),
|
||||
Text('Body Medium example text', style: theme.textTheme.bodyMedium),
|
||||
Text('Label Large', style: theme.textTheme.labelLarge),
|
||||
const SizedBox(height: 18),
|
||||
Text('Color Tokens', style: theme.textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: const [
|
||||
_ColorSwatch(name: 'black', color: AppColors.black),
|
||||
_ColorSwatch(name: 'blackRaised', color: AppColors.blackRaised),
|
||||
_ColorSwatch(name: 'deepRed', color: AppColors.deepRed),
|
||||
_ColorSwatch(name: 'neonRed', color: AppColors.neonRed),
|
||||
_ColorSwatch(name: 'neonPurple', color: AppColors.neonPurple),
|
||||
_ColorSwatch(name: 'white', color: AppColors.white),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
Text('Buttons', style: theme.textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
FilledButton(onPressed: () {}, child: const Text('Filled')),
|
||||
FilledButton.tonal(onPressed: () {}, child: const Text('Tonal')),
|
||||
OutlinedButton(onPressed: () {}, child: const Text('Outlined')),
|
||||
TextButton(onPressed: () {}, child: const Text('Text')),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
Text('Inputs', style: theme.textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
const TextField(
|
||||
decoration: InputDecoration(
|
||||
labelText: 'Username',
|
||||
hintText: 'riotz_name',
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
const TextField(
|
||||
decoration: InputDecoration(
|
||||
labelText: 'Bio',
|
||||
hintText: 'Underground frequencies only',
|
||||
),
|
||||
minLines: 2,
|
||||
maxLines: 3,
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
Text('Cards / Controls', style: theme.textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Column(
|
||||
children: [
|
||||
SwitchListTile(
|
||||
value: _switchValue,
|
||||
onChanged: (v) => setState(() => _switchValue = v),
|
||||
title: const Text('Glitch mode'),
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
Slider(
|
||||
value: _slider,
|
||||
min: 0,
|
||||
max: 100,
|
||||
label: _slider.round().toString(),
|
||||
onChanged: (v) => setState(() => _slider = v),
|
||||
),
|
||||
Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: FilterChip(
|
||||
label: const Text('punk-rap'),
|
||||
selected: _chipSelected,
|
||||
onSelected: (v) => setState(() => _chipSelected = v),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
Text('Motion', style: theme.textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
FilledButton(
|
||||
onPressed: () => setState(() => _animatedOn = !_animatedOn),
|
||||
child: const Text('Trigger animation'),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
AnimatedContainer(
|
||||
duration: AppMotion.normal,
|
||||
curve: AppMotion.emphasizedCurve,
|
||||
height: 56,
|
||||
width: _animatedOn ? double.infinity : 140,
|
||||
decoration: BoxDecoration(
|
||||
color: _animatedOn ? AppColors.neonRed : AppColors.blackSoft,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(color: AppColors.border),
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
_animatedOn ? 'Chaos On' : 'Chaos Idle',
|
||||
style: theme.textTheme.labelLarge,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
Text('Snackbar', style: theme.textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
OutlinedButton(
|
||||
onPressed: () {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('RIOTZ snack style preview')),
|
||||
);
|
||||
},
|
||||
child: const Text('Show Snackbar'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ColorSwatch extends StatelessWidget {
|
||||
const _ColorSwatch({
|
||||
required this.name,
|
||||
required this.color,
|
||||
});
|
||||
|
||||
final String name;
|
||||
final Color color;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 110,
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.blackSoft,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: AppColors.border),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
height: 26,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(name, style: Theme.of(context).textTheme.bodySmall),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user