jingyun
82 lines
2.5 KiB
Dart
82 lines
2.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:shadcn_ui/shadcn_ui.dart';
|
|
|
|
import '../../../common/theme/app_text.dart';
|
|
import '../../../common/theme/spacing.dart';
|
|
|
|
class TypographyTestPage extends StatelessWidget {
|
|
const TypographyTestPage({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final cs = ShadTheme.of(context).colorScheme;
|
|
const samples = <_Sample>[
|
|
_Sample('appTitle', AppText.appTitle),
|
|
_Sample('sectionTitle', AppText.sectionTitle),
|
|
_Sample('cardTitle', AppText.cardTitle),
|
|
_Sample('listTitle', AppText.listTitle),
|
|
_Sample('body', AppText.body),
|
|
_Sample('meta', AppText.meta),
|
|
_Sample('chip', AppText.chip),
|
|
_Sample('badge', AppText.badge),
|
|
];
|
|
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
backgroundColor: cs.background,
|
|
surfaceTintColor: Colors.transparent,
|
|
elevation: 0,
|
|
scrolledUnderElevation: 0,
|
|
title: Text(
|
|
'Typography',
|
|
style: TextStyle(
|
|
fontSize: 17,
|
|
fontWeight: FontWeight.w700,
|
|
color: cs.foreground,
|
|
),
|
|
),
|
|
leading: IconButton(
|
|
icon: Icon(Icons.arrow_back_ios_new, color: cs.foreground, size: 18),
|
|
onPressed: () => context.pop(),
|
|
),
|
|
),
|
|
body: ListView(
|
|
padding: const EdgeInsets.fromLTRB(Spacing.page, 8, Spacing.page, 24),
|
|
children: [
|
|
for (final sample in samples) ...[
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: cs.card,
|
|
border: Border.all(color: cs.border),
|
|
borderRadius: BorderRadius.circular(Spacing.radiusBase),
|
|
),
|
|
clipBehavior: Clip.antiAlias,
|
|
padding: const EdgeInsets.all(16),
|
|
margin: const EdgeInsets.only(bottom: Spacing.cardGap),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
sample.name,
|
|
style: AppText.meta.copyWith(color: cs.mutedForeground),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text('金值 / Jinzhi / Typography', style: sample.style),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _Sample {
|
|
const _Sample(this.name, this.style);
|
|
|
|
final String name;
|
|
final TextStyle style;
|
|
}
|