qzl/social-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增 AppLoadingIndicator 和 AppPressable 组件

Browse Source 
- 新增 AppLoadingIndicator 加载指示器组件
- 新增 AppPressable 按压反馈组件
- 新增 AppSheetInputField 输入框组件
- 更新 AppButton 和其他共享组件
This commit is contained in:
qzl
2026-03-16 16:11:16 +08:00
parent e55f12cdc1
commit a75c868bca
6 changed files with 360 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/shared/widgets/app_button.dart
+7 -12
View File
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import '../../core/theme/design_tokens.dart';
import 'app_loading_indicator.dart';
class AppButton extends StatelessWidget {
const AppButton({
@@ -47,13 +48,10 @@ class AppButton extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xl),
),
child: isLoading
? SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
strokeWidth: 2.2,
? const AppLoadingIndicator(
variant: AppLoadingVariant.button,
color: AppColors.authSecondaryButtonText,
),
trackColor: AppColors.authSecondaryButtonBorder,
)
: Text(
text,
@@ -115,13 +113,10 @@ class AppButton extends StatelessWidget {
),
),
child: isLoading
? const SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
strokeWidth: 2.2,
? const AppLoadingIndicator(
variant: AppLoadingVariant.button,
color: AppColors.authPrimaryButtonText,
),
trackColor: AppColors.blue400,
)
: Text(
text,
apps/lib/shared/widgets/app_loading_indicator.dart
+107
View File
@@ -0,0 +1,107 @@
import 'package:flutter/material.dart';
import '../../core/theme/design_tokens.dart';
enum AppLoadingVariant { surface, inline, button }
class AppLoadingIndicator extends StatelessWidget {
const AppLoadingIndicator({
super.key,
this.variant = AppLoadingVariant.surface,
this.size,
this.strokeWidth,
this.color,
this.trackColor,
this.withContainer,
});
final AppLoadingVariant variant;
final double? size;
final double? strokeWidth;
final Color? color;
final Color? trackColor;
final bool? withContainer;
double get _resolvedSize {
return size ??
switch (variant) {
AppLoadingVariant.surface => 22,
AppLoadingVariant.inline => 16,
AppLoadingVariant.button => 18,
};
}
double get _resolvedStrokeWidth {
return strokeWidth ??
switch (variant) {
AppLoadingVariant.surface => 2.2,
AppLoadingVariant.inline => 2,
AppLoadingVariant.button => 2.2,
};
}
Color get _resolvedColor {
return color ??
switch (variant) {
AppLoadingVariant.surface => AppColors.blue500,
AppLoadingVariant.inline => AppColors.slate500,
AppLoadingVariant.button => AppColors.white,
};
}
Color get _resolvedTrackColor {
return trackColor ??
switch (variant) {
AppLoadingVariant.surface => AppColors.blue100,
AppLoadingVariant.inline => AppColors.slate200,
AppLoadingVariant.button => AppColors.blue300,
};
}
bool get _resolvedWithContainer {
return withContainer ??
switch (variant) {
AppLoadingVariant.surface => true,
AppLoadingVariant.inline => false,
AppLoadingVariant.button => false,
};
}
Widget _buildSpinner() {
return SizedBox(
width: _resolvedSize,
height: _resolvedSize,
child: CircularProgressIndicator(
strokeWidth: _resolvedStrokeWidth,
color: _resolvedColor,
backgroundColor: _resolvedTrackColor,
),
);
}
@override
Widget build(BuildContext context) {
if (!_resolvedWithContainer) {
return _buildSpinner();
}
return Container(
width: _resolvedSize + AppSpacing.md,
height: _resolvedSize + AppSpacing.md,
padding: const EdgeInsets.all(AppSpacing.xs),
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(AppRadius.full),
border: Border.all(color: AppColors.borderSecondary),
boxShadow: [
BoxShadow(
color: AppColors.slate200.withValues(alpha: 0.55),
blurRadius: AppRadius.md,
offset: const Offset(0, AppSpacing.xs),
),
],
),
child: _buildSpinner(),
);
}
}
apps/lib/shared/widgets/app_pressable.dart
+52
View File
@@ -0,0 +1,52 @@
import 'package:flutter/material.dart';
import '../../core/theme/design_tokens.dart';
class AppPressable extends StatefulWidget {
const AppPressable({
super.key,
required this.child,
this.onTap,
this.borderRadius,
this.pressedScale = 0.97,
});
final Widget child;
final VoidCallback? onTap;
final BorderRadius? borderRadius;
final double pressedScale;
@override
State<AppPressable> createState() => _AppPressableState();
}
class _AppPressableState extends State<AppPressable> {
bool _isPressed = false;
@override
Widget build(BuildContext context) {
return AnimatedScale(
scale: _isPressed ? widget.pressedScale : 1,
duration: const Duration(milliseconds: 110),
curve: Curves.easeOut,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: widget.borderRadius,
onTap: widget.onTap,
onHighlightChanged: (pressed) {
if (_isPressed == pressed) {
return;
}
setState(() {
_isPressed = pressed;
});
},
splashColor: AppColors.blue100.withValues(alpha: 0.32),
highlightColor: AppColors.blue50.withValues(alpha: 0.28),
child: widget.child,
),
),
);
}
}
apps/lib/shared/widgets/app_sheet_input_field.dart
+106
View File
@@ -0,0 +1,106 @@
import 'package:flutter/material.dart';
import '../../core/theme/design_tokens.dart';
class AppSheetInputField extends StatefulWidget {
const AppSheetInputField({
super.key,
required this.controller,
required this.label,
required this.hint,
this.maxLines = 1,
this.autofocus = false,
});
final TextEditingController controller;
final String label;
final String hint;
final int maxLines;
final bool autofocus;
@override
State<AppSheetInputField> createState() => _AppSheetInputFieldState();
}
class _AppSheetInputFieldState extends State<AppSheetInputField> {
final FocusNode _focusNode = FocusNode();
bool _isFocused = false;
@override
void initState() {
super.initState();
_focusNode.addListener(_onFocusChange);
}
@override
void dispose() {
_focusNode.removeListener(_onFocusChange);
_focusNode.dispose();
super.dispose();
}
void _onFocusChange() {
if (_isFocused == _focusNode.hasFocus) {
return;
}
setState(() {
_isFocused = _focusNode.hasFocus;
});
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.label,
style: const TextStyle(
fontFamily: 'Inter',
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
),
),
const SizedBox(height: AppSpacing.sm),
AnimatedContainer(
duration: const Duration(milliseconds: 140),
curve: Curves.easeOut,
decoration: BoxDecoration(
color: AppColors.slate50,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(
color: _isFocused
? AppColors.borderQuaternary
: AppColors.borderSecondary,
),
boxShadow: _isFocused
? [
BoxShadow(
color: AppColors.blue200.withValues(alpha: 0.35),
blurRadius: AppRadius.sm,
offset: const Offset(0, AppSpacing.xs / 2),
),
]
: const [],
),
child: TextField(
controller: widget.controller,
focusNode: _focusNode,
autofocus: widget.autofocus,
maxLines: widget.maxLines,
decoration: InputDecoration(
hintText: widget.hint,
hintStyle: const TextStyle(color: AppColors.slate400),
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.md,
),
),
),
),
],
);
}
}
apps/lib/shared/widgets/message_composer.dart
+5 -5
View File
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../core/theme/design_tokens.dart';
import 'app_loading_indicator.dart';
enum MessageComposerMode { text, holdToSpeak }
@@ -125,13 +126,12 @@ class MessageComposer extends StatelessWidget {
visualDensity: VisualDensity.compact,
onPressed: onTapRightAction,
icon: _isTranscribing
? const SizedBox(
width: AppSpacing.lg,
height: AppSpacing.lg,
child: CircularProgressIndicator(
? const AppLoadingIndicator(
variant: AppLoadingVariant.inline,
size: AppSpacing.lg,
strokeWidth: AppSpacing.xs / 2,
color: AppColors.blue600,
),
trackColor: AppColors.blue100,
)
: Icon(
_resolveRightIcon(),
apps/lib/shared/widgets/page_header.dart
+75 -13
View File
@@ -17,6 +17,7 @@ class PageHeader extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
leading ?? const SizedBox.shrink(),
trailing ?? const SizedBox.shrink(),
@@ -27,30 +28,91 @@ class PageHeader extends StatelessWidget {
}
}
class BackButton extends StatelessWidget {
class BackButton extends StatefulWidget {
final VoidCallback? onPressed;
const BackButton({super.key, this.onPressed});
@override
State<BackButton> createState() => _BackButtonState();
}
class _BackButtonState extends State<BackButton> {
bool _isPressed = false;
@override
Widget build(BuildContext context) {
return SizedBox(
width: AppSpacing.xxl * 2,
height: AppSpacing.xxl * 2,
child: TextButton(
onPressed: onPressed ?? () => Navigator.of(context).pop(),
style: TextButton.styleFrom(
padding: const EdgeInsets.all(AppSpacing.none),
backgroundColor: AppColors.surfaceTertiary,
shape: RoundedRectangleBorder(
final background = _isPressed ? AppColors.surfaceInfo : AppColors.white;
final borderColor = _isPressed
? AppColors.borderQuaternary
: AppColors.borderTertiary;
return AnimatedScale(
scale: _isPressed ? 0.96 : 1,
duration: const Duration(milliseconds: 110),
curve: Curves.easeOut,
child: AnimatedContainer(
duration: const Duration(milliseconds: 110),
decoration: BoxDecoration(
color: background,
borderRadius: BorderRadius.circular(AppRadius.full),
side: const BorderSide(color: AppColors.borderTertiary),
border: Border.all(color: borderColor),
boxShadow: _isPressed
? const []
: [
const BoxShadow(
color: AppColors.white,
blurRadius: AppRadius.sm,
offset: Offset(0, -1),
),
BoxShadow(
color: AppColors.slate200.withValues(alpha: 0.42),
blurRadius: AppRadius.md,
offset: const Offset(0, AppSpacing.xs),
),
child: const Icon(
],
),
child: SizedBox(
width: AppSpacing.xl * 2,
height: AppSpacing.xl * 2,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(AppRadius.full),
onTap: widget.onPressed ?? () => Navigator.of(context).pop(),
onTapDown: (_) {
if (_isPressed) {
return;
}
setState(() {
_isPressed = true;
});
},
onTapCancel: () {
if (!_isPressed) {
return;
}
setState(() {
_isPressed = false;
});
},
onTapUp: (_) {
if (!_isPressed) {
return;
}
setState(() {
_isPressed = false;
});
},
child: Center(
child: Icon(
Icons.chevron_left,
size: AppSpacing.lg + AppSpacing.xs,
color: AppColors.slate700,
color: _isPressed ? AppColors.blue600 : AppColors.slate700,
),
),
),
),
),
),
);