feat(proj): init
This commit is contained in:
vl.arkhangelskii
@@ -0,0 +1,35 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
/// App glyph: rounded green tile with a ruble, same language as [AppIconBadge].
|
||||
class AppBrandMark extends StatelessWidget {
|
||||
const AppBrandMark({super.key, this.size = 96});
|
||||
|
||||
final double size;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final radius = size * 0.235;
|
||||
return Container(
|
||||
width: size,
|
||||
height: size,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.of(context, AppColors.accent),
|
||||
borderRadius: BorderRadius.circular(radius),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColors.of(context, AppColors.accent).withValues(alpha: 0.28),
|
||||
blurRadius: size * 0.28,
|
||||
offset: Offset(0, size * 0.08),
|
||||
),
|
||||
],
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Icon(
|
||||
CupertinoIcons.money_rubl,
|
||||
size: size * 0.52,
|
||||
color: const Color(0xFFFFFFFF),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
/// iOS 15+ button styles.
|
||||
enum AppButtonStyle { filled, tinted, gray, plain, destructive }
|
||||
|
||||
/// Apple control sizes: large 50pt, medium 44pt, small 34pt.
|
||||
enum AppButtonSize { large, medium, small }
|
||||
|
||||
class AppButton extends StatelessWidget {
|
||||
const AppButton({
|
||||
super.key,
|
||||
required this.label,
|
||||
this.onPressed,
|
||||
this.style = AppButtonStyle.filled,
|
||||
this.size = AppButtonSize.large,
|
||||
this.expanded = true,
|
||||
this.icon,
|
||||
this.loading = false,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final VoidCallback? onPressed;
|
||||
final AppButtonStyle style;
|
||||
final AppButtonSize size;
|
||||
final bool expanded;
|
||||
final IconData? icon;
|
||||
final bool loading;
|
||||
|
||||
double get _height => switch (size) {
|
||||
AppButtonSize.large => AppSizes.buttonLarge,
|
||||
AppButtonSize.medium => AppSizes.buttonMedium,
|
||||
AppButtonSize.small => AppSizes.buttonSmall,
|
||||
};
|
||||
|
||||
TextStyle get _textStyle => switch (size) {
|
||||
AppButtonSize.large => AppTypography.headline,
|
||||
AppButtonSize.medium => AppTypography.body,
|
||||
AppButtonSize.small => AppTypography.subhead.copyWith(fontWeight: FontWeight.w600),
|
||||
};
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final accent = AppColors.of(context, AppColors.accent);
|
||||
final red = AppColors.of(context, AppColors.systemRed);
|
||||
|
||||
final (Color background, Color foreground) = switch (style) {
|
||||
AppButtonStyle.filled => (accent, const Color(0xFFFFFFFF)),
|
||||
AppButtonStyle.tinted => (accent.withValues(alpha: 0.15), accent),
|
||||
AppButtonStyle.gray => (
|
||||
AppColors.of(context, AppColors.systemGray5),
|
||||
AppColors.of(context, AppColors.label),
|
||||
),
|
||||
AppButtonStyle.plain => (const Color(0x00000000), accent),
|
||||
AppButtonStyle.destructive => (red.withValues(alpha: 0.15), red),
|
||||
};
|
||||
|
||||
final disabled = onPressed == null || loading;
|
||||
final content = loading
|
||||
? CupertinoActivityIndicator(
|
||||
radius: size == AppButtonSize.small ? 8 : 10,
|
||||
color: foreground,
|
||||
)
|
||||
: Row(
|
||||
mainAxisSize: expanded ? MainAxisSize.max : MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
if (icon != null) ...[
|
||||
Icon(icon, size: size == AppButtonSize.small ? 16 : 19, color: foreground),
|
||||
const SizedBox(width: AppSpacing.s2),
|
||||
],
|
||||
Flexible(
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.inter(textStyle: _textStyle, color: foreground),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
return Opacity(
|
||||
opacity: disabled && !loading ? 0.35 : 1,
|
||||
child: SizedBox(
|
||||
height: _height,
|
||||
width: expanded ? double.infinity : null,
|
||||
child: CupertinoButton(
|
||||
onPressed: disabled ? null : onPressed,
|
||||
color: style == AppButtonStyle.plain ? null : background,
|
||||
disabledColor: background,
|
||||
borderRadius: BorderRadius.circular(
|
||||
size == AppButtonSize.small ? AppRadii.md : AppRadii.lg,
|
||||
),
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: size == AppButtonSize.small ? AppSpacing.s3 : AppSpacing.s4,
|
||||
),
|
||||
minimumSize: Size.zero,
|
||||
child: content,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
class AppIcon extends StatelessWidget {
|
||||
const AppIcon(
|
||||
this.icon, {
|
||||
super.key,
|
||||
this.size = 22,
|
||||
this.color = AppColors.label,
|
||||
this.semanticLabel,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final double size;
|
||||
final Color color;
|
||||
final String? semanticLabel;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Icon(
|
||||
icon,
|
||||
size: size,
|
||||
color: AppColors.of(context, color),
|
||||
semanticLabel: semanticLabel,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Settings-style rounded square glyph used as a list row leading item.
|
||||
class AppIconBadge extends StatelessWidget {
|
||||
const AppIconBadge({
|
||||
super.key,
|
||||
required this.icon,
|
||||
this.size = 29,
|
||||
this.color = AppColors.accent,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final double size;
|
||||
final Color color;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: size,
|
||||
height: size,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.of(context, color),
|
||||
borderRadius: BorderRadius.circular(size * 0.235),
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Icon(icon, size: size * 0.6, color: const Color(0xFFFFFFFF)),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
/// Semantic text following the iOS type scale.
|
||||
class AppText extends StatelessWidget {
|
||||
const AppText(
|
||||
this.data, {
|
||||
super.key,
|
||||
this.style = AppTypography.body,
|
||||
this.color = AppColors.label,
|
||||
this.maxLines,
|
||||
this.overflow,
|
||||
this.textAlign,
|
||||
});
|
||||
|
||||
const AppText.largeTitle(this.data, {super.key, this.color = AppColors.label, this.maxLines, this.overflow, this.textAlign})
|
||||
: style = AppTypography.largeTitle;
|
||||
|
||||
const AppText.title(this.data, {super.key, this.color = AppColors.label, this.maxLines, this.overflow, this.textAlign})
|
||||
: style = AppTypography.title2;
|
||||
|
||||
const AppText.headline(this.data, {super.key, this.color = AppColors.label, this.maxLines, this.overflow, this.textAlign})
|
||||
: style = AppTypography.headline;
|
||||
|
||||
const AppText.body(this.data, {super.key, this.color = AppColors.label, this.maxLines, this.overflow, this.textAlign})
|
||||
: style = AppTypography.body;
|
||||
|
||||
const AppText.callout(this.data, {super.key, this.color = AppColors.secondaryLabel, this.maxLines, this.overflow, this.textAlign})
|
||||
: style = AppTypography.callout;
|
||||
|
||||
const AppText.subhead(this.data, {super.key, this.color = AppColors.secondaryLabel, this.maxLines, this.overflow, this.textAlign})
|
||||
: style = AppTypography.subhead;
|
||||
|
||||
const AppText.footnote(this.data, {super.key, this.color = AppColors.secondaryLabel, this.maxLines, this.overflow, this.textAlign})
|
||||
: style = AppTypography.footnote;
|
||||
|
||||
const AppText.caption(this.data, {super.key, this.color = AppColors.tertiaryLabel, this.maxLines, this.overflow, this.textAlign})
|
||||
: style = AppTypography.caption1;
|
||||
|
||||
final String data;
|
||||
final TextStyle style;
|
||||
final Color color;
|
||||
final int? maxLines;
|
||||
final TextOverflow? overflow;
|
||||
final TextAlign? textAlign;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Text(
|
||||
data,
|
||||
maxLines: maxLines,
|
||||
overflow: overflow,
|
||||
textAlign: textAlign,
|
||||
style: GoogleFonts.inter(
|
||||
textStyle: style,
|
||||
color: AppColors.of(context, color),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Uppercase grouped-list header, e.g. `НАСТРОЙКИ`.
|
||||
class AppSectionHeader extends StatelessWidget {
|
||||
const AppSectionHeader(this.text, {super.key, this.padding});
|
||||
|
||||
final String text;
|
||||
final EdgeInsetsGeometry? padding;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: padding ??
|
||||
const EdgeInsets.fromLTRB(
|
||||
AppSpacing.gutter,
|
||||
AppSpacing.s4,
|
||||
AppSpacing.gutter,
|
||||
AppSpacing.s2,
|
||||
),
|
||||
child: Text(
|
||||
text.toUpperCase(),
|
||||
style: GoogleFonts.inter(
|
||||
textStyle: AppTypography.footnote,
|
||||
color: AppColors.of(context, AppColors.secondaryLabel),
|
||||
letterSpacing: 0.4,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_text.dart';
|
||||
|
||||
/// Rounded iOS text field with optional grouped-style caption and error.
|
||||
class AppTextField extends StatelessWidget {
|
||||
const AppTextField({
|
||||
super.key,
|
||||
this.label,
|
||||
this.placeholder,
|
||||
this.controller,
|
||||
this.onChanged,
|
||||
this.keyboardType,
|
||||
this.obscureText = false,
|
||||
this.enabled = true,
|
||||
this.errorText,
|
||||
this.prefixIcon,
|
||||
this.clearable = true,
|
||||
this.maxLines = 1,
|
||||
});
|
||||
|
||||
final String? label;
|
||||
final String? placeholder;
|
||||
final TextEditingController? controller;
|
||||
final ValueChanged<String>? onChanged;
|
||||
final TextInputType? keyboardType;
|
||||
final bool obscureText;
|
||||
final bool enabled;
|
||||
final String? errorText;
|
||||
final IconData? prefixIcon;
|
||||
final bool clearable;
|
||||
final int maxLines;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final hasError = errorText != null && errorText!.isNotEmpty;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (label != null) AppSectionHeader(label!, padding: const EdgeInsets.only(bottom: AppSpacing.s2)),
|
||||
Opacity(
|
||||
opacity: enabled ? 1 : 0.4,
|
||||
child: CupertinoTextField(
|
||||
controller: controller,
|
||||
onChanged: onChanged,
|
||||
keyboardType: keyboardType,
|
||||
obscureText: obscureText,
|
||||
enabled: enabled,
|
||||
maxLines: maxLines,
|
||||
placeholder: placeholder,
|
||||
clearButtonMode: clearable ? OverlayVisibilityMode.editing : OverlayVisibilityMode.never,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.s3,
|
||||
vertical: AppSpacing.s3,
|
||||
),
|
||||
prefix: prefixIcon == null
|
||||
? null
|
||||
: Padding(
|
||||
padding: const EdgeInsets.only(left: AppSpacing.s3),
|
||||
child: Icon(
|
||||
prefixIcon,
|
||||
size: 20,
|
||||
color: AppColors.of(context, AppColors.secondaryLabel),
|
||||
),
|
||||
),
|
||||
placeholderStyle: GoogleFonts.inter(
|
||||
textStyle: AppTypography.body,
|
||||
color: AppColors.of(context, AppColors.tertiaryLabel),
|
||||
),
|
||||
style: GoogleFonts.inter(
|
||||
textStyle: AppTypography.body,
|
||||
color: AppColors.of(context, AppColors.label),
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.of(context, AppColors.groupedSurface),
|
||||
borderRadius: BorderRadius.circular(AppRadii.md),
|
||||
border: Border.all(
|
||||
color: hasError
|
||||
? AppColors.of(context, AppColors.systemRed)
|
||||
: AppColors.of(context, AppColors.opaqueSeparator),
|
||||
width: AppSizes.hairline,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (hasError)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: AppSpacing.s2, left: AppSpacing.s1),
|
||||
child: AppText.footnote(errorText!, color: AppColors.systemRed),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
/// Native iOS spinner.
|
||||
class AppSpinner extends StatelessWidget {
|
||||
const AppSpinner({super.key, this.radius = 12, this.color});
|
||||
|
||||
final double radius;
|
||||
final Color? color;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoActivityIndicator(
|
||||
radius: radius,
|
||||
color: color == null ? null : AppColors.of(context, color!),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// iOS progress bar: 4pt capsule track.
|
||||
class AppProgressBar extends StatelessWidget {
|
||||
const AppProgressBar({
|
||||
super.key,
|
||||
required this.value,
|
||||
this.color = AppColors.accent,
|
||||
this.height = 4,
|
||||
});
|
||||
|
||||
/// 0..1
|
||||
final double value;
|
||||
final Color color;
|
||||
final double height;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppRadii.capsule),
|
||||
child: SizedBox(
|
||||
height: height,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) => Stack(
|
||||
children: [
|
||||
Container(color: AppColors.of(context, AppColors.systemGray5)),
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
curve: Curves.easeOut,
|
||||
width: constraints.maxWidth * value.clamp(0.0, 1.0),
|
||||
color: AppColors.of(context, color),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
/// Pulsing placeholder block used while content loads.
|
||||
class AppSkeleton extends StatefulWidget {
|
||||
const AppSkeleton({
|
||||
super.key,
|
||||
this.width,
|
||||
this.height = 16,
|
||||
this.radius = AppRadii.sm,
|
||||
});
|
||||
|
||||
const AppSkeleton.circle({super.key, required double size})
|
||||
: width = size,
|
||||
height = size,
|
||||
radius = AppRadii.capsule;
|
||||
|
||||
final double? width;
|
||||
final double height;
|
||||
final double radius;
|
||||
|
||||
@override
|
||||
State<AppSkeleton> createState() => _AppSkeletonState();
|
||||
}
|
||||
|
||||
class _AppSkeletonState extends State<AppSkeleton> with SingleTickerProviderStateMixin {
|
||||
late final AnimationController _controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 1100),
|
||||
)..repeat(reverse: true);
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FadeTransition(
|
||||
opacity: Tween<double>(begin: 0.45, end: 1).animate(
|
||||
CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
|
||||
),
|
||||
child: Container(
|
||||
width: widget.width,
|
||||
height: widget.height,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.of(context, AppColors.systemGray5),
|
||||
borderRadius: BorderRadius.circular(widget.radius),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Skeleton shaped like an [AppListTile] row.
|
||||
class AppSkeletonRow extends StatelessWidget {
|
||||
const AppSkeletonRow({super.key, this.hasLeading = true});
|
||||
|
||||
final bool hasLeading;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.gutter,
|
||||
vertical: AppSpacing.s3,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
if (hasLeading) ...[
|
||||
const AppSkeleton.circle(size: 29),
|
||||
const SizedBox(width: AppSpacing.s3),
|
||||
],
|
||||
const Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
AppSkeleton(width: 140, height: 15),
|
||||
SizedBox(height: AppSpacing.s2),
|
||||
AppSkeleton(width: 90, height: 12),
|
||||
],
|
||||
),
|
||||
),
|
||||
const AppSkeleton(width: 56, height: 15),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_button.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_icon.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_text.dart';
|
||||
import 'package:please_pay_me/ui/feedback/app_progress.dart';
|
||||
|
||||
/// Centered placeholder for empty collections.
|
||||
class AppEmptyState extends StatelessWidget {
|
||||
const AppEmptyState({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.message,
|
||||
this.icon = CupertinoIcons.tray,
|
||||
this.actionLabel,
|
||||
this.onAction,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String? message;
|
||||
final IconData icon;
|
||||
final String? actionLabel;
|
||||
final VoidCallback? onAction;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.s6,
|
||||
vertical: AppSpacing.s7,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
AppIcon(icon, size: 44, color: AppColors.tertiaryLabel),
|
||||
const SizedBox(height: AppSpacing.s3),
|
||||
AppText.headline(title, textAlign: TextAlign.center),
|
||||
if (message != null) ...[
|
||||
const SizedBox(height: AppSpacing.s1),
|
||||
AppText.subhead(message!, textAlign: TextAlign.center),
|
||||
],
|
||||
if (actionLabel != null && onAction != null) ...[
|
||||
const SizedBox(height: AppSpacing.s4),
|
||||
AppButton(
|
||||
label: actionLabel!,
|
||||
size: AppButtonSize.medium,
|
||||
style: AppButtonStyle.tinted,
|
||||
expanded: false,
|
||||
onPressed: onAction,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Failure placeholder with a retry affordance.
|
||||
class AppErrorView extends StatelessWidget {
|
||||
const AppErrorView({super.key, required this.message, this.onRetry});
|
||||
|
||||
final String message;
|
||||
final VoidCallback? onRetry;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AppEmptyState(
|
||||
icon: CupertinoIcons.exclamationmark_triangle,
|
||||
title: 'Не получилось загрузить',
|
||||
message: message,
|
||||
actionLabel: onRetry == null ? null : 'Повторить',
|
||||
onAction: onRetry,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AppLoadingView extends StatelessWidget {
|
||||
const AppLoadingView({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: AppSpacing.s7),
|
||||
child: Center(child: AppSpinner()),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_text.dart';
|
||||
|
||||
/// iOS has no SnackBar — the platform idiom is a floating blurred capsule
|
||||
/// (AirPods / Silent-mode style). Kept dismiss-free and auto-hiding.
|
||||
class AppToast extends StatelessWidget {
|
||||
const AppToast({
|
||||
super.key,
|
||||
required this.message,
|
||||
this.icon = CupertinoIcons.check_mark_circled_solid,
|
||||
this.tint = AppColors.accent,
|
||||
});
|
||||
|
||||
final String message;
|
||||
final IconData? icon;
|
||||
final Color tint;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppRadii.capsule),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.s4,
|
||||
vertical: AppSpacing.s3,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.of(context, AppColors.groupedSurface).withValues(alpha: 0.82),
|
||||
borderRadius: BorderRadius.circular(AppRadii.capsule),
|
||||
boxShadow: const [
|
||||
BoxShadow(color: Color(0x1F000000), blurRadius: 24, offset: Offset(0, 8)),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (icon != null) ...[
|
||||
Icon(icon, size: 20, color: AppColors.of(context, tint)),
|
||||
const SizedBox(width: AppSpacing.s2),
|
||||
],
|
||||
Flexible(child: AppText.subhead(message, color: AppColors.label)),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> showAppToast(
|
||||
BuildContext context, {
|
||||
required String message,
|
||||
IconData? icon = CupertinoIcons.check_mark_circled_solid,
|
||||
Duration duration = const Duration(seconds: 2),
|
||||
}) async {
|
||||
final overlay = Overlay.of(context, rootOverlay: true);
|
||||
final entry = OverlayEntry(
|
||||
builder: (ctx) => Positioned(
|
||||
left: AppSpacing.s5,
|
||||
right: AppSpacing.s5,
|
||||
bottom: MediaQuery.of(ctx).padding.bottom + AppSpacing.s7,
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Center(child: AppToast(message: message, icon: icon)),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
overlay.insert(entry);
|
||||
await Future<void>.delayed(duration);
|
||||
entry.remove();
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
/// Circular avatar — image, initials, or the iOS person placeholder.
|
||||
class AppAvatar extends StatelessWidget {
|
||||
const AppAvatar({
|
||||
super.key,
|
||||
this.imageUrl,
|
||||
this.initials,
|
||||
this.radius = 22,
|
||||
this.backgroundColor = AppColors.systemGray5,
|
||||
});
|
||||
|
||||
final String? imageUrl;
|
||||
final String? initials;
|
||||
final double radius;
|
||||
final Color backgroundColor;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final size = radius * 2;
|
||||
final hasImage = imageUrl != null && imageUrl!.isNotEmpty;
|
||||
|
||||
return ClipOval(
|
||||
child: Container(
|
||||
width: size,
|
||||
height: size,
|
||||
color: AppColors.of(context, backgroundColor),
|
||||
alignment: Alignment.center,
|
||||
child: hasImage
|
||||
? Image.network(imageUrl!, width: size, height: size, fit: BoxFit.cover)
|
||||
: initials != null && initials!.isNotEmpty
|
||||
? Text(
|
||||
initials!.toUpperCase(),
|
||||
style: GoogleFonts.inter(
|
||||
textStyle: AppTypography.headline.copyWith(fontSize: radius * 0.8),
|
||||
color: AppColors.of(context, AppColors.secondaryLabel),
|
||||
),
|
||||
)
|
||||
: Icon(
|
||||
CupertinoIcons.person_fill,
|
||||
size: radius,
|
||||
color: AppColors.of(context, AppColors.systemGray),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_text.dart';
|
||||
|
||||
/// Inset-grouped card for free-form content (metrics, summaries).
|
||||
class AppCard extends StatelessWidget {
|
||||
const AppCard({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.title,
|
||||
this.subtitle,
|
||||
this.padding = const EdgeInsets.all(AppSpacing.s4),
|
||||
this.margin = const EdgeInsets.symmetric(horizontal: AppSpacing.gutter),
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
final Widget child;
|
||||
final String? title;
|
||||
final String? subtitle;
|
||||
final EdgeInsetsGeometry padding;
|
||||
final EdgeInsetsGeometry margin;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final card = Container(
|
||||
margin: margin,
|
||||
padding: padding,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.of(context, AppColors.groupedSurface),
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (title != null) AppText.headline(title!),
|
||||
if (subtitle != null) ...[
|
||||
const SizedBox(height: 2),
|
||||
AppText.footnote(subtitle!),
|
||||
],
|
||||
if (title != null || subtitle != null) const SizedBox(height: AppSpacing.s3),
|
||||
child,
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
if (onTap == null) return card;
|
||||
|
||||
return CupertinoButton(
|
||||
padding: EdgeInsets.zero,
|
||||
minimumSize: Size.zero,
|
||||
onPressed: onTap,
|
||||
child: card,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
/// Capsule tag / filter pill (iOS has no Material chip — this is the HIG-ish
|
||||
/// equivalent used in Photos & Mail filters).
|
||||
class AppChip extends StatelessWidget {
|
||||
const AppChip({
|
||||
super.key,
|
||||
required this.label,
|
||||
this.selected = false,
|
||||
this.icon,
|
||||
this.onPressed,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final bool selected;
|
||||
final IconData? icon;
|
||||
final VoidCallback? onPressed;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final accent = AppColors.of(context, AppColors.accent);
|
||||
final background = selected ? accent : AppColors.of(context, AppColors.systemGray5);
|
||||
final foreground = selected ? const Color(0xFFFFFFFF) : AppColors.of(context, AppColors.label);
|
||||
|
||||
return CupertinoButton(
|
||||
padding: EdgeInsets.zero,
|
||||
minimumSize: Size.zero,
|
||||
onPressed: onPressed,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.s3,
|
||||
vertical: AppSpacing.s2 - 1,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: background,
|
||||
borderRadius: BorderRadius.circular(AppRadii.capsule),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (icon != null) ...[
|
||||
Icon(icon, size: 15, color: foreground),
|
||||
const SizedBox(width: AppSpacing.s1 + 2),
|
||||
],
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.inter(
|
||||
textStyle: AppTypography.subhead.copyWith(fontWeight: FontWeight.w500),
|
||||
color: foreground,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_text.dart';
|
||||
|
||||
/// Inset-grouped section: rounded surface + hairline separators between rows.
|
||||
class AppListSection extends StatelessWidget {
|
||||
const AppListSection({
|
||||
super.key,
|
||||
required this.children,
|
||||
this.header,
|
||||
this.footer,
|
||||
this.separatorIndent = 16,
|
||||
this.margin = const EdgeInsets.symmetric(horizontal: AppSpacing.gutter),
|
||||
});
|
||||
|
||||
final List<Widget> children;
|
||||
final String? header;
|
||||
final String? footer;
|
||||
final double separatorIndent;
|
||||
final EdgeInsetsGeometry margin;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final rows = <Widget>[];
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
rows.add(children[i]);
|
||||
if (i < children.length - 1) {
|
||||
rows.add(
|
||||
Padding(
|
||||
padding: EdgeInsets.only(left: separatorIndent),
|
||||
child: Container(
|
||||
height: AppSizes.hairline,
|
||||
color: AppColors.of(context, AppColors.opaqueSeparator),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
if (header != null) AppSectionHeader(header!),
|
||||
Container(
|
||||
margin: margin,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.of(context, AppColors.groupedSurface),
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: Column(children: rows),
|
||||
),
|
||||
if (footer != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppSpacing.gutter + 4,
|
||||
AppSpacing.s2,
|
||||
AppSpacing.gutter + 4,
|
||||
0,
|
||||
),
|
||||
child: AppText.footnote(footer!),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_text.dart';
|
||||
|
||||
/// Single row of an inset-grouped list (Settings-style).
|
||||
class AppListTile extends StatefulWidget {
|
||||
const AppListTile({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.subtitle,
|
||||
this.leading,
|
||||
this.value,
|
||||
this.trailing,
|
||||
this.onTap,
|
||||
this.showChevron = true,
|
||||
this.destructive = false,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String? subtitle;
|
||||
final Widget? leading;
|
||||
|
||||
/// Secondary gray text aligned to the right (iOS `additionalInfo`).
|
||||
final String? value;
|
||||
|
||||
/// Custom trailing widget — replaces [value] and the chevron.
|
||||
final Widget? trailing;
|
||||
|
||||
final VoidCallback? onTap;
|
||||
final bool showChevron;
|
||||
final bool destructive;
|
||||
|
||||
@override
|
||||
State<AppListTile> createState() => _AppListTileState();
|
||||
}
|
||||
|
||||
class _AppListTileState extends State<AppListTile> {
|
||||
bool _pressed = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final tappable = widget.onTap != null;
|
||||
|
||||
final row = Container(
|
||||
color: _pressed
|
||||
? AppColors.of(context, AppColors.systemGray5)
|
||||
: AppColors.of(context, AppColors.groupedSurface),
|
||||
constraints: const BoxConstraints(minHeight: AppSizes.rowMinHeight),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.gutter,
|
||||
vertical: AppSpacing.s2 + 2,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
if (widget.leading != null) ...[
|
||||
widget.leading!,
|
||||
const SizedBox(width: AppSpacing.s3),
|
||||
],
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
AppText.body(
|
||||
widget.title,
|
||||
color: widget.destructive ? AppColors.systemRed : AppColors.label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
if (widget.subtitle != null) ...[
|
||||
const SizedBox(height: 2),
|
||||
AppText.footnote(widget.subtitle!, maxLines: 2, overflow: TextOverflow.ellipsis),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (widget.trailing != null)
|
||||
widget.trailing!
|
||||
else ...[
|
||||
if (widget.value != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: AppSpacing.s2),
|
||||
child: AppText.body(widget.value!, color: AppColors.secondaryLabel),
|
||||
),
|
||||
if (tappable && widget.showChevron)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: AppSpacing.s1),
|
||||
child: Icon(
|
||||
CupertinoIcons.chevron_forward,
|
||||
size: 16,
|
||||
color: AppColors.of(context, AppColors.tertiaryLabel),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
if (!tappable) return row;
|
||||
|
||||
return GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: widget.onTap,
|
||||
onTapDown: (_) => setState(() => _pressed = true),
|
||||
onTapUp: (_) => setState(() => _pressed = false),
|
||||
onTapCancel: () => setState(() => _pressed = false),
|
||||
child: row,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
import 'package:please_pay_me/ui/molecules/app_list_tile.dart';
|
||||
|
||||
/// Settings row with a native iOS switch on the trailing edge.
|
||||
class AppSwitchRow extends StatelessWidget {
|
||||
const AppSwitchRow({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.value,
|
||||
required this.onChanged,
|
||||
this.subtitle,
|
||||
this.leading,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String? subtitle;
|
||||
final Widget? leading;
|
||||
final bool value;
|
||||
final ValueChanged<bool>? onChanged;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AppListTile(
|
||||
title: title,
|
||||
subtitle: subtitle,
|
||||
leading: leading,
|
||||
showChevron: false,
|
||||
trailing: CupertinoSwitch(
|
||||
value: value,
|
||||
onChanged: onChanged,
|
||||
activeTrackColor: AppColors.of(context, AppColors.accent),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_text.dart';
|
||||
|
||||
/// Native iOS alert.
|
||||
class AppAlert extends StatelessWidget {
|
||||
const AppAlert({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.message,
|
||||
this.confirmLabel = 'OK',
|
||||
this.cancelLabel,
|
||||
this.destructive = false,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String? message;
|
||||
final String confirmLabel;
|
||||
final String? cancelLabel;
|
||||
final bool destructive;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoAlertDialog(
|
||||
title: AppText.headline(title),
|
||||
content: message == null
|
||||
? null
|
||||
: Padding(
|
||||
padding: const EdgeInsets.only(top: 6),
|
||||
child: AppText.subhead(message!, textAlign: TextAlign.center),
|
||||
),
|
||||
actions: [
|
||||
if (cancelLabel != null)
|
||||
CupertinoDialogAction(
|
||||
onPressed: () => Navigator.of(context).pop(false),
|
||||
child: Text(cancelLabel!),
|
||||
),
|
||||
CupertinoDialogAction(
|
||||
isDefaultAction: !destructive,
|
||||
isDestructiveAction: destructive,
|
||||
onPressed: () => Navigator.of(context).pop(true),
|
||||
child: Text(confirmLabel),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Future<bool?> showAppAlert({
|
||||
required BuildContext context,
|
||||
required String title,
|
||||
String? message,
|
||||
String confirmLabel = 'OK',
|
||||
String? cancelLabel,
|
||||
bool destructive = false,
|
||||
}) {
|
||||
return showCupertinoDialog<bool>(
|
||||
context: context,
|
||||
builder: (_) => AppAlert(
|
||||
title: title,
|
||||
message: message,
|
||||
confirmLabel: confirmLabel,
|
||||
cancelLabel: cancelLabel,
|
||||
destructive: destructive,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class AppActionSheetAction {
|
||||
const AppActionSheetAction({
|
||||
required this.label,
|
||||
this.destructive = false,
|
||||
this.isDefault = false,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final bool destructive;
|
||||
final bool isDefault;
|
||||
}
|
||||
|
||||
Future<int?> showAppActionSheet({
|
||||
required BuildContext context,
|
||||
String? title,
|
||||
String? message,
|
||||
required List<AppActionSheetAction> actions,
|
||||
String cancelLabel = 'Отмена',
|
||||
}) {
|
||||
return showCupertinoModalPopup<int>(
|
||||
context: context,
|
||||
builder: (ctx) => CupertinoActionSheet(
|
||||
title: title == null ? null : Text(title),
|
||||
message: message == null ? null : Text(message),
|
||||
actions: [
|
||||
for (var i = 0; i < actions.length; i++)
|
||||
CupertinoActionSheetAction(
|
||||
isDestructiveAction: actions[i].destructive,
|
||||
isDefaultAction: actions[i].isDefault,
|
||||
onPressed: () => Navigator.of(ctx).pop(i),
|
||||
child: Text(actions[i].label),
|
||||
),
|
||||
],
|
||||
cancelButton: CupertinoActionSheetAction(
|
||||
onPressed: () => Navigator.of(ctx).pop(),
|
||||
child: Text(cancelLabel),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_text.dart';
|
||||
|
||||
/// Standard iOS navigation bar (44pt) with optional subtitle line.
|
||||
class AppNavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
|
||||
const AppNavBar({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.subtitle,
|
||||
this.leading,
|
||||
this.trailing,
|
||||
this.previousPageTitle,
|
||||
this.transparent = false,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String? subtitle;
|
||||
final Widget? leading;
|
||||
final Widget? trailing;
|
||||
final String? previousPageTitle;
|
||||
final bool transparent;
|
||||
|
||||
@override
|
||||
Size get preferredSize => const Size.fromHeight(44);
|
||||
|
||||
@override
|
||||
bool shouldFullyObstruct(BuildContext context) => !transparent;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoNavigationBar(
|
||||
leading: leading,
|
||||
trailing: trailing,
|
||||
previousPageTitle: previousPageTitle,
|
||||
backgroundColor: transparent
|
||||
? const Color(0x00000000)
|
||||
: AppColors.of(context, AppColors.barBackground),
|
||||
border: transparent
|
||||
? null
|
||||
: Border(
|
||||
bottom: BorderSide(
|
||||
color: AppColors.of(context, AppColors.separator),
|
||||
width: AppSizes.hairline,
|
||||
),
|
||||
),
|
||||
middle: subtitle == null
|
||||
? AppText.headline(title)
|
||||
: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
AppText.headline(title, maxLines: 1, overflow: TextOverflow.ellipsis),
|
||||
AppText.caption(
|
||||
subtitle!,
|
||||
color: AppColors.secondaryLabel,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Large-title bar for the root of a scrollable screen.
|
||||
class AppLargeNavBar extends StatelessWidget {
|
||||
const AppLargeNavBar({super.key, required this.title, this.trailing});
|
||||
|
||||
final String title;
|
||||
final Widget? trailing;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoSliverNavigationBar(
|
||||
largeTitle: AppText.largeTitle(title),
|
||||
trailing: trailing,
|
||||
backgroundColor: AppColors.of(context, AppColors.barBackground),
|
||||
border: Border(
|
||||
bottom: BorderSide(
|
||||
color: AppColors.of(context, AppColors.separator),
|
||||
width: AppSizes.hairline,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
import 'package:please_pay_me/ui/atoms/app_button.dart';
|
||||
|
||||
/// Bottom sheet with a native wheel date picker.
|
||||
Future<DateTime?> showAppDatePicker({
|
||||
required BuildContext context,
|
||||
required DateTime initialDate,
|
||||
DateTime? minimumDate,
|
||||
DateTime? maximumDate,
|
||||
String confirmLabel = 'Готово',
|
||||
}) {
|
||||
var selected = initialDate;
|
||||
|
||||
return showCupertinoModalPopup<DateTime>(
|
||||
context: context,
|
||||
builder: (ctx) => Container(
|
||||
height: 320,
|
||||
padding: const EdgeInsets.only(top: AppSpacing.s2),
|
||||
color: AppColors.of(ctx, AppColors.groupedSurface),
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: CupertinoDatePicker(
|
||||
mode: CupertinoDatePickerMode.date,
|
||||
initialDateTime: initialDate,
|
||||
minimumDate: minimumDate,
|
||||
maximumDate: maximumDate,
|
||||
onDateTimeChanged: (value) => selected = value,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppSpacing.gutter,
|
||||
AppSpacing.s2,
|
||||
AppSpacing.gutter,
|
||||
AppSpacing.s3,
|
||||
),
|
||||
child: AppButton(
|
||||
label: confirmLabel,
|
||||
onPressed: () => Navigator.of(ctx).pop(
|
||||
DateTime(selected.year, selected.month, selected.day),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Full-height modal used for create/edit forms.
|
||||
Future<T?> showAppFormSheet<T>({
|
||||
required BuildContext context,
|
||||
required WidgetBuilder builder,
|
||||
}) {
|
||||
return showCupertinoModalPopup<T>(
|
||||
context: context,
|
||||
builder: (ctx) => Padding(
|
||||
padding: EdgeInsets.only(top: MediaQuery.of(ctx).padding.top + AppSpacing.s6),
|
||||
child: ClipRRect(
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(AppRadii.xl)),
|
||||
child: Builder(builder: builder),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
/// iOS sliding segmented control — the native alternative to tabs.
|
||||
class AppSegmentedControl extends StatelessWidget {
|
||||
const AppSegmentedControl({
|
||||
super.key,
|
||||
required this.labels,
|
||||
required this.index,
|
||||
required this.onChanged,
|
||||
this.padding = const EdgeInsets.symmetric(horizontal: AppSpacing.gutter),
|
||||
});
|
||||
|
||||
final List<String> labels;
|
||||
final int index;
|
||||
final ValueChanged<int> onChanged;
|
||||
final EdgeInsetsGeometry padding;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: padding,
|
||||
child: SizedBox(
|
||||
width: double.infinity,
|
||||
child: CupertinoSlidingSegmentedControl<int>(
|
||||
groupValue: index.clamp(0, labels.length - 1),
|
||||
backgroundColor: AppColors.of(context, AppColors.systemGray5),
|
||||
thumbColor: AppColors.of(context, AppColors.groupedSurface),
|
||||
onValueChanged: (value) {
|
||||
if (value != null) onChanged(value);
|
||||
},
|
||||
children: {
|
||||
for (var i = 0; i < labels.length; i++)
|
||||
i: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 6),
|
||||
child: Text(
|
||||
labels[i],
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.inter(
|
||||
textStyle: AppTypography.subhead.copyWith(
|
||||
fontWeight: i == index ? FontWeight.w600 : FontWeight.w400,
|
||||
),
|
||||
color: AppColors.of(context, AppColors.label),
|
||||
),
|
||||
),
|
||||
),
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:please_pay_me/theme/tokens.dart';
|
||||
|
||||
class AppTabItem {
|
||||
const AppTabItem({required this.icon, required this.label, this.activeIcon});
|
||||
|
||||
final IconData icon;
|
||||
final IconData? activeIcon;
|
||||
final String label;
|
||||
}
|
||||
|
||||
/// Bottom tab bar (iOS): 49pt, hairline top border, tint = brand accent.
|
||||
///
|
||||
/// Extends [CupertinoTabBar] so it can be passed to [CupertinoTabScaffold];
|
||||
/// dynamic colors are resolved by the base class against the active theme.
|
||||
class AppTabBar extends CupertinoTabBar {
|
||||
AppTabBar({
|
||||
super.key,
|
||||
required List<AppTabItem> items,
|
||||
required super.currentIndex,
|
||||
required ValueChanged<int> super.onTap,
|
||||
}) : super(
|
||||
items: [
|
||||
for (final item in items)
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(item.icon),
|
||||
activeIcon: item.activeIcon == null ? null : Icon(item.activeIcon),
|
||||
label: item.label,
|
||||
),
|
||||
],
|
||||
activeColor: AppColors.accent,
|
||||
inactiveColor: AppColors.systemGray,
|
||||
backgroundColor: AppColors.barBackground,
|
||||
border: const Border(
|
||||
top: BorderSide(color: AppColors.separator, width: AppSizes.hairline),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
export 'atoms/app_brand_mark.dart';
|
||||
export 'atoms/app_button.dart';
|
||||
export 'atoms/app_icon.dart';
|
||||
export 'atoms/app_text.dart';
|
||||
export 'atoms/app_text_field.dart';
|
||||
export 'feedback/app_progress.dart';
|
||||
export 'feedback/app_skeleton.dart';
|
||||
export 'feedback/app_state_views.dart';
|
||||
export 'feedback/app_toast.dart';
|
||||
export 'molecules/app_avatar.dart';
|
||||
export 'molecules/app_card.dart';
|
||||
export 'molecules/app_chip.dart';
|
||||
export 'molecules/app_list_section.dart';
|
||||
export 'molecules/app_list_tile.dart';
|
||||
export 'molecules/app_switch_row.dart';
|
||||
export 'navigation/app_dialog.dart';
|
||||
export 'navigation/app_nav_bar.dart';
|
||||
export 'navigation/app_pickers.dart';
|
||||
export 'navigation/app_segmented_control.dart';
|
||||
export 'navigation/app_tab_bar.dart';
|
||||
Reference in New Issue
Block a user