mirror of
https://gitlab.com/veilid/veilidchat.git
synced 2025-07-22 22:20:43 -04:00
sliver refactor
This commit is contained in:
Christien Rioux
parent
67812b3c6f
commit
2fa3cbd21c
25 changed files with 710 additions and 387 deletions
|
|
@ -1,3 +1,5 @@
|
|||
import 'dart:math';
|
||||
|
||||
import 'package:async_tools/async_tools.dart';
|
||||
import 'package:awesome_extensions/awesome_extensions.dart';
|
||||
import 'package:bloc_advanced_tools/bloc_advanced_tools.dart';
|
||||
|
|
@ -5,8 +7,10 @@ import 'package:blurry_modal_progress_hud/blurry_modal_progress_hud.dart';
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:flutter_spinkit/flutter_spinkit.dart';
|
||||
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
|
||||
import 'package:motion_toast/motion_toast.dart';
|
||||
import 'package:quickalert/quickalert.dart';
|
||||
import 'package:sliver_expandable/sliver_expandable.dart';
|
||||
|
||||
import '../theme.dart';
|
||||
|
||||
|
|
@ -132,7 +136,7 @@ void showErrorToast(BuildContext context, String message) {
|
|||
contentPadding: const EdgeInsets.all(16),
|
||||
primaryColor: scale.errorScale.elementBackground,
|
||||
secondaryColor: scale.errorScale.calloutBackground,
|
||||
borderRadius: 16 * scaleConfig.borderRadiusScale,
|
||||
borderRadius: 12 * scaleConfig.borderRadiusScale,
|
||||
toastDuration: const Duration(seconds: 4),
|
||||
animationDuration: const Duration(milliseconds: 1000),
|
||||
displayBorder: scaleConfig.useVisualIndicators,
|
||||
|
|
@ -152,7 +156,7 @@ void showInfoToast(BuildContext context, String message) {
|
|||
contentPadding: const EdgeInsets.all(16),
|
||||
primaryColor: scale.tertiaryScale.elementBackground,
|
||||
secondaryColor: scale.tertiaryScale.calloutBackground,
|
||||
borderRadius: 16 * scaleConfig.borderRadiusScale,
|
||||
borderRadius: 12 * scaleConfig.borderRadiusScale,
|
||||
toastDuration: const Duration(seconds: 2),
|
||||
animationDuration: const Duration(milliseconds: 500),
|
||||
displayBorder: scaleConfig.useVisualIndicators,
|
||||
|
|
@ -160,6 +164,159 @@ void showInfoToast(BuildContext context, String message) {
|
|||
).show(context);
|
||||
}
|
||||
|
||||
SliverAppBar styledSliverAppBar(
|
||||
{required BuildContext context, required String title, Color? titleColor}) {
|
||||
final theme = Theme.of(context);
|
||||
final scale = theme.extension<ScaleScheme>()!;
|
||||
//final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
final textTheme = theme.textTheme;
|
||||
|
||||
return SliverAppBar(
|
||||
title: Text(
|
||||
title,
|
||||
style: textTheme.titleSmall!
|
||||
.copyWith(color: titleColor ?? scale.primaryScale.borderText),
|
||||
),
|
||||
pinned: true,
|
||||
);
|
||||
}
|
||||
|
||||
Widget styledHeaderSliver(
|
||||
{required BuildContext context,
|
||||
required String title,
|
||||
required Widget sliver,
|
||||
Color? borderColor,
|
||||
Color? innerColor,
|
||||
Color? titleColor,
|
||||
Color? backgroundColor,
|
||||
void Function()? onTap}) {
|
||||
final theme = Theme.of(context);
|
||||
final scale = theme.extension<ScaleScheme>()!;
|
||||
final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
final textTheme = theme.textTheme;
|
||||
|
||||
return SliverStickyHeader(
|
||||
header: ColoredBox(
|
||||
color: backgroundColor ?? Colors.transparent,
|
||||
child: DecoratedBox(
|
||||
decoration: ShapeDecoration(
|
||||
color: borderColor ?? scale.primaryScale.border,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft:
|
||||
Radius.circular(12 * scaleConfig.borderRadiusScale),
|
||||
topRight: Radius.circular(
|
||||
12 * scaleConfig.borderRadiusScale)))),
|
||||
child: ListTile(
|
||||
onTap: onTap,
|
||||
title: Text(title,
|
||||
textAlign: TextAlign.center,
|
||||
style: textTheme.titleSmall!.copyWith(
|
||||
color: titleColor ?? scale.primaryScale.borderText)),
|
||||
),
|
||||
)),
|
||||
sliver: DecoratedSliver(
|
||||
decoration: ShapeDecoration(
|
||||
color: borderColor ?? scale.primaryScale.border,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft:
|
||||
Radius.circular(8 * scaleConfig.borderRadiusScale),
|
||||
bottomRight:
|
||||
Radius.circular(8 * scaleConfig.borderRadiusScale)))),
|
||||
sliver: SliverPadding(
|
||||
padding: const EdgeInsets.all(4),
|
||||
sliver: DecoratedSliver(
|
||||
decoration: ShapeDecoration(
|
||||
color: innerColor ?? scale.primaryScale.subtleBackground,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
8 * scaleConfig.borderRadiusScale))),
|
||||
sliver: SliverPadding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
sliver: sliver,
|
||||
)))),
|
||||
);
|
||||
}
|
||||
|
||||
Widget styledExpandingSliver(
|
||||
{required BuildContext context,
|
||||
required String title,
|
||||
required Widget sliver,
|
||||
required bool expanded,
|
||||
required Animation<double> animation,
|
||||
Color? borderColor,
|
||||
Color? innerColor,
|
||||
Color? titleColor,
|
||||
Color? backgroundColor,
|
||||
void Function()? onTap}) {
|
||||
final theme = Theme.of(context);
|
||||
final scale = theme.extension<ScaleScheme>()!;
|
||||
final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
final textTheme = theme.textTheme;
|
||||
|
||||
return SliverStickyHeader(
|
||||
header: ColoredBox(
|
||||
color: backgroundColor ?? Colors.transparent,
|
||||
child: DecoratedBox(
|
||||
decoration: ShapeDecoration(
|
||||
color: borderColor ?? scale.primaryScale.border,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: expanded
|
||||
? BorderRadius.only(
|
||||
topLeft: Radius.circular(
|
||||
12 * scaleConfig.borderRadiusScale),
|
||||
topRight: Radius.circular(
|
||||
12 * scaleConfig.borderRadiusScale))
|
||||
: BorderRadius.circular(
|
||||
12 * scaleConfig.borderRadiusScale))),
|
||||
child: ListTile(
|
||||
onTap: onTap,
|
||||
title: Text(title,
|
||||
textAlign: TextAlign.center,
|
||||
style: textTheme.titleSmall!.copyWith(
|
||||
color: titleColor ?? scale.primaryScale.borderText)),
|
||||
trailing: AnimatedBuilder(
|
||||
animation: animation,
|
||||
builder: (context, child) => Transform.rotate(
|
||||
angle: (animation.value - 0.5) * pi,
|
||||
child: child,
|
||||
),
|
||||
child: Icon(Icons.chevron_left,
|
||||
color: borderColor ?? scale.primaryScale.borderText),
|
||||
),
|
||||
),
|
||||
)),
|
||||
sliver: SliverExpandable(
|
||||
sliver: DecoratedSliver(
|
||||
decoration: ShapeDecoration(
|
||||
color: borderColor ?? scale.primaryScale.border,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: expanded
|
||||
? BorderRadius.only(
|
||||
bottomLeft: Radius.circular(
|
||||
8 * scaleConfig.borderRadiusScale),
|
||||
bottomRight: Radius.circular(
|
||||
8 * scaleConfig.borderRadiusScale))
|
||||
: BorderRadius.circular(
|
||||
8 * scaleConfig.borderRadiusScale))),
|
||||
sliver: SliverPadding(
|
||||
padding: const EdgeInsets.all(4),
|
||||
sliver: DecoratedSliver(
|
||||
decoration: ShapeDecoration(
|
||||
color:
|
||||
innerColor ?? scale.primaryScale.subtleBackground,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
8 * scaleConfig.borderRadiusScale))),
|
||||
sliver: SliverPadding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
sliver: sliver,
|
||||
)))),
|
||||
animation: animation,
|
||||
));
|
||||
}
|
||||
|
||||
Widget styledTitleContainer({
|
||||
required BuildContext context,
|
||||
required String title,
|
||||
|
|
@ -178,7 +335,7 @@ Widget styledTitleContainer({
|
|||
color: borderColor ?? scale.primaryScale.border,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius:
|
||||
BorderRadius.circular(16 * scaleConfig.borderRadiusScale),
|
||||
BorderRadius.circular(12 * scaleConfig.borderRadiusScale),
|
||||
)),
|
||||
child: Column(children: [
|
||||
Text(
|
||||
|
|
@ -192,7 +349,7 @@ Widget styledTitleContainer({
|
|||
backgroundColor ?? scale.primaryScale.subtleBackground,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
16 * scaleConfig.borderRadiusScale),
|
||||
12 * scaleConfig.borderRadiusScale),
|
||||
)),
|
||||
child: child)
|
||||
.paddingAll(4)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue