Git-Mirrors/veilidchat
1
0
Fork 0
mirror of https://gitlab.com/veilid/veilidchat.git synced 2025-09-14 17:51:50 -04:00
Code Issues Projects Releases Packages Wiki Activity

layout fixes

Browse source
This commit is contained in:
Christien Rioux 2024-07-08 21:29:52 -04:00
parent 71f4d37efa
commit 216aef8173
56 changed files with 654 additions and 342 deletions
Download patch file Download diff file Expand all files Collapse all files

6
lib/theme/models/chat_theme.dart
View file

@ -31,6 +31,7 @@ ChatTheme makeChatTheme(
),
inputBackgroundColor: Colors.blue,
inputBorderRadius: BorderRadius.zero,
inputTextStyle: textTheme.bodyLarge!,
inputTextDecoration: InputDecoration(
filled: !scaleConfig.preferBorders,
fillColor: scale.primaryScale.subtleBackground,
@ -77,13 +78,10 @@ ChatTheme makeChatTheme(
color: Colors.white,
fontSize: 64,
),
receivedMessageBodyTextStyle: TextStyle(
receivedMessageBodyTextStyle: textTheme.bodyLarge!.copyWith(
color: scaleConfig.preferBorders
? scale.secondaryScale.calloutBackground
: scale.secondaryScale.calloutText,
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1.5,
),
receivedEmojiMessageTextStyle: const TextStyle(
color: Colors.white,

9
lib/theme/models/slider_tile.dart
View file

@ -106,7 +106,7 @@ class SliderTile extends StatelessWidget {
? tileColor.border
: tileColor.borderText)
: scale.scale(a.actionScale).primaryText,
icon: a.icon,
icon: subtitle.isNotEmpty ? a.icon : null,
label: a.label,
padding: const EdgeInsets.all(2)),
)
@ -129,7 +129,7 @@ class SliderTile extends StatelessWidget {
? tileColor.border
: tileColor.borderText)
: scale.scale(a.actionScale).primaryText,
icon: a.icon,
icon: subtitle.isNotEmpty ? a.icon : null,
label: a.label,
padding: const EdgeInsets.all(2)),
)
@ -140,9 +140,12 @@ class SliderTile extends StatelessWidget {
: const EdgeInsets.fromLTRB(0, 2, 0, 2),
child: ListTile(
onTap: onTap,
dense: true,
visualDensity: const VisualDensity(vertical: -4),
title: Text(
title,
softWrap: true,
overflow: TextOverflow.fade,
softWrap: false,
),
subtitle: subtitle.isNotEmpty ? Text(subtitle) : null,
iconColor: textColor,

123
lib/theme/views/enter_password.dart Normal file
View file

@ -0,0 +1,123 @@
import 'package:awesome_extensions/awesome_extensions.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_translate/flutter_translate.dart';
import '../theme.dart';
class EnterPasswordDialog extends StatefulWidget {
const EnterPasswordDialog({
this.matchPass,
this.description,
super.key,
});
final String? matchPass;
final String? description;
@override
State<EnterPasswordDialog> createState() => _EnterPasswordDialogState();
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(StringProperty('reenter', matchPass))
..add(StringProperty('description', description));
}
}
class _EnterPasswordDialogState extends State<EnterPasswordDialog> {
final passwordController = TextEditingController();
final focusNode = FocusNode();
final formKey = GlobalKey<FormState>();
bool _passwordVisible = false;
@override
void initState() {
super.initState();
}
@override
void dispose() {
passwordController.dispose();
focusNode.dispose();
super.dispose();
}
@override
// ignore: prefer_expression_function_bodies
Widget build(BuildContext context) {
final theme = Theme.of(context);
final scale = theme.extension<ScaleScheme>()!;
return StyledDialog(
title: widget.matchPass == null
? translate('enter_password_dialog.enter_password')
: translate('enter_password_dialog.reenter_password'),
child: Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: passwordController,
focusNode: focusNode,
autofocus: true,
enableSuggestions: false,
obscureText: !_passwordVisible,
obscuringCharacter: '*',
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.singleLineFormatter
],
onSubmitted: (password) {
Navigator.pop(context, password);
},
onChanged: (_) {
setState(() {});
},
decoration: InputDecoration(
prefixIcon: widget.matchPass == null
? null
: Icon(Icons.check_circle,
color: passwordController.text == widget.matchPass
? scale.primaryScale.primary
: scale.grayScale.subtleBackground),
suffixIcon: IconButton(
icon: Icon(
_passwordVisible
? Icons.visibility
: Icons.visibility_off,
color: scale.primaryScale.appText,
),
onPressed: () {
setState(() {
_passwordVisible = !_passwordVisible;
});
},
),
)).paddingAll(16),
if (widget.description != null)
SizedBox(
width: 400,
child: Text(
widget.description!,
textAlign: TextAlign.center,
).paddingAll(16))
],
),
));
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(DiagnosticsProperty<TextEditingController>(
'passwordController', passwordController))
..add(DiagnosticsProperty<FocusNode>('focusNode', focusNode))
..add(DiagnosticsProperty<GlobalKey<FormState>>('formKey', formKey));
}
}

138
lib/theme/views/enter_pin.dart Normal file
View file

@ -0,0 +1,138 @@
import 'package:awesome_extensions/awesome_extensions.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_translate/flutter_translate.dart';
import 'package:pinput/pinput.dart';
import '../theme.dart';
class EnterPinDialog extends StatefulWidget {
const EnterPinDialog({
required this.reenter,
required this.description,
super.key,
});
final bool reenter;
final String? description;
@override
State<EnterPinDialog> createState() => _EnterPinDialogState();
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(StringProperty('description', description))
..add(DiagnosticsProperty<bool>('reenter', reenter));
}
}
class _EnterPinDialogState extends State<EnterPinDialog> {
final pinController = TextEditingController();
final focusNode = FocusNode();
final formKey = GlobalKey<FormState>();
@override
void initState() {
super.initState();
}
@override
void dispose() {
pinController.dispose();
focusNode.dispose();
super.dispose();
}
@override
// ignore: prefer_expression_function_bodies
Widget build(BuildContext context) {
final theme = Theme.of(context);
final scale = theme.extension<ScaleScheme>()!;
final scaleConfig = theme.extension<ScaleConfig>()!;
final focusedBorderColor = scale.primaryScale.hoverBorder;
final fillColor = scale.primaryScale.elementBackground;
final borderColor = scale.primaryScale.border;
final defaultPinTheme = PinTheme(
width: 56,
height: 60,
textStyle: TextStyle(fontSize: 22, color: scale.primaryScale.appText),
decoration: BoxDecoration(
color: fillColor,
borderRadius: BorderRadius.circular(8 * scaleConfig.borderRadiusScale),
border: Border.all(color: borderColor),
),
);
/// Optionally you can use form to validate the Pinput
return StyledDialog(
title: !widget.reenter
? translate('enter_pin_dialog.enter_pin')
: translate('enter_pin_dialog.reenter_pin'),
child: Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Directionality(
// Specify direction if desired
textDirection: TextDirection.ltr,
child: Pinput(
controller: pinController,
focusNode: focusNode,
autofocus: true,
defaultPinTheme: defaultPinTheme,
enableSuggestions: false,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
hapticFeedbackType: HapticFeedbackType.lightImpact,
onCompleted: (pin) {
Navigator.pop(context, pin);
},
cursor: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
margin: const EdgeInsets.only(bottom: 9),
width: 22,
height: 1,
color: focusedBorderColor,
),
],
),
focusedPinTheme: defaultPinTheme.copyWith(
height: 68,
width: 64,
decoration: defaultPinTheme.decoration!.copyWith(
border: Border.all(color: borderColor),
),
),
).paddingAll(16),
),
if (widget.description != null)
SizedBox(
width: 400,
child: Text(
widget.description!,
textAlign: TextAlign.center,
).paddingAll(16))
],
),
));
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(DiagnosticsProperty<TextEditingController>(
'pinController', pinController))
..add(DiagnosticsProperty<FocusNode>('focusNode', focusNode))
..add(DiagnosticsProperty<GlobalKey<FormState>>('formKey', formKey));
}
}

54
lib/theme/views/option_box.dart Normal file
View file

@ -0,0 +1,54 @@
import 'package:awesome_extensions/awesome_extensions.dart';
import 'package:flutter/material.dart';
import '../theme.dart';
class OptionBox extends StatelessWidget {
const OptionBox(
{required String instructions,
required IconData buttonIcon,
required String buttonText,
required void Function() onClick,
super.key})
: _instructions = instructions,
_buttonIcon = buttonIcon,
_buttonText = buttonText,
_onClick = onClick;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final scale = theme.extension<ScaleScheme>()!;
final scaleConfig = theme.extension<ScaleConfig>()!;
return Container(
constraints: const BoxConstraints(maxWidth: 400),
decoration: BoxDecoration(
color: scale.primaryScale.subtleBackground,
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale),
border: Border.all(color: scale.primaryScale.border)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
style: theme.textTheme.labelMedium!
.copyWith(color: scale.primaryScale.appText),
softWrap: true,
textAlign: TextAlign.center,
_instructions),
ElevatedButton(
onPressed: _onClick,
child: Row(mainAxisSize: MainAxisSize.min, children: [
Icon(_buttonIcon, size: 24).paddingLTRB(0, 8, 8, 8),
Text(textAlign: TextAlign.center, _buttonText)
])).paddingLTRB(0, 12, 0, 0).toCenter()
]).paddingAll(12))
.paddingLTRB(24, 0, 24, 12);
}
final String _instructions;
final IconData _buttonIcon;
final String _buttonText;
final void Function() _onClick;
}

133
lib/theme/views/pop_control.dart Normal file
View file

@ -0,0 +1,133 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class PopControl extends StatelessWidget {
const PopControl({
required this.child,
required this.dismissible,
super.key,
});
void _doDismiss(NavigatorState navigator) {
if (!dismissible) {
return;
}
navigator.pop();
}
@override
// ignore: prefer_expression_function_bodies
Widget build(BuildContext context) {
final navigator = Navigator.of(context);
final route = ModalRoute.of(context);
if (route != null && route is PopControlDialogRoute) {
WidgetsBinding.instance.addPostFrameCallback((_) {
route.barrierDismissible = dismissible;
});
}
return PopScope(
canPop: false,
onPopInvoked: (didPop) {
if (didPop) {
return;
}
_doDismiss(navigator);
},
child: child);
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(DiagnosticsProperty<bool>('dismissible', dismissible));
}
final bool dismissible;
final Widget child;
}
class PopControlDialogRoute<T> extends DialogRoute<T> {
PopControlDialogRoute(
{required super.context,
required super.builder,
super.themes,
super.barrierColor = Colors.black54,
super.barrierDismissible,
super.barrierLabel,
super.useSafeArea,
super.settings,
super.anchorPoint,
super.traversalEdgeBehavior})
: _barrierDismissible = barrierDismissible;
@override
bool get barrierDismissible => _barrierDismissible;
set barrierDismissible(bool d) {
_barrierDismissible = d;
changedInternalState();
}
bool _barrierDismissible;
}
bool _debugIsActive(BuildContext context) {
if (context is Element && !context.debugIsActive) {
throw FlutterError.fromParts(<DiagnosticsNode>[
ErrorSummary('This BuildContext is no longer valid.'),
ErrorDescription(
'The showPopControlDialog function context parameter is a '
'BuildContext that is no longer valid.'),
ErrorHint(
'This can commonly occur when the showPopControlDialog function is '
'called after awaiting a Future. '
'In this situation the BuildContext might refer to a widget that has '
'already been disposed during the await. '
'Consider using a parent context instead.',
),
]);
}
return true;
}
Future<T?> showPopControlDialog<T>({
required BuildContext context,
required WidgetBuilder builder,
bool barrierDismissible = true,
Color? barrierColor,
String? barrierLabel,
bool useSafeArea = true,
bool useRootNavigator = true,
RouteSettings? routeSettings,
Offset? anchorPoint,
TraversalEdgeBehavior? traversalEdgeBehavior,
}) {
assert(_debugIsActive(context), 'debug is active check');
assert(debugCheckHasMaterialLocalizations(context),
'check has material localizations');
final themes = InheritedTheme.capture(
from: context,
to: Navigator.of(
context,
rootNavigator: useRootNavigator,
).context,
);
return Navigator.of(context, rootNavigator: useRootNavigator)
.push<T>(PopControlDialogRoute<T>(
context: context,
builder: builder,
barrierColor: barrierColor ?? Colors.black54,
barrierDismissible: barrierDismissible,
barrierLabel: barrierLabel,
useSafeArea: useSafeArea,
settings: routeSettings,
themes: themes,
anchorPoint: anchorPoint,
traversalEdgeBehavior:
traversalEdgeBehavior ?? TraversalEdgeBehavior.closedLoop,
));
}

0
lib/theme/views/recovery_key_widget.dart Normal file
View file

34
lib/theme/views/responsive.dart Normal file
View file

@ -0,0 +1,34 @@
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
bool get isAndroid => !kIsWeb && Platform.isAndroid;
bool get isiOS => !kIsWeb && Platform.isIOS;
bool get isWeb => kIsWeb;
bool get isDesktop =>
!isWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS);
const kMobileWidthCutoff = 500.0;
bool isMobileWidth(BuildContext context) =>
MediaQuery.of(context).size.width < kMobileWidthCutoff;
bool responsiveVisibility({
required BuildContext context,
bool phone = true,
bool tablet = true,
bool tabletLandscape = true,
bool desktop = true,
}) {
final width = MediaQuery.of(context).size.width;
if (width < kMobileWidthCutoff) {
return phone;
} else if (width < 767) {
return tablet;
} else if (width < 991) {
return tabletLandscape;
} else {
return desktop;
}
}

16
lib/theme/views/styled_scaffold.dart
View file

@ -12,13 +12,15 @@ class StyledScaffold extends StatelessWidget {
final scale = theme.extension<ScaleScheme>()!;
final scaleConfig = theme.extension<ScaleConfig>()!;
return clipBorder(
clipEnabled: true,
borderEnabled: scaleConfig.useVisualIndicators,
borderRadius: 16 * scaleConfig.borderRadiusScale,
borderColor: scale.primaryScale.border,
child: Scaffold(appBar: appBar, body: body, key: key))
.paddingAll(32);
return isDesktop
? clipBorder(
clipEnabled: true,
borderEnabled: scaleConfig.useVisualIndicators,
borderRadius: 16 * scaleConfig.borderRadiusScale,
borderColor: scale.primaryScale.border,
child: Scaffold(appBar: appBar, body: body, key: key))
.paddingAll(32)
: Scaffold(appBar: appBar, body: body, key: key);
}
////////////////////////////////////////////////////////////////////////////

6
lib/theme/views/views.dart
View file

@ -1,5 +1,11 @@
export 'brightness_preferences.dart';
export 'color_preferences.dart';
export 'enter_password.dart';
export 'enter_pin.dart';
export 'option_box.dart';
export 'pop_control.dart';
export 'recovery_key_widget.dart';
export 'responsive.dart';
export 'scanner_error_widget.dart';
export 'styled_dialog.dart';
export 'styled_scaffold.dart';

4
lib/theme/views/widget_helpers.dart
View file

@ -183,9 +183,9 @@ Widget styledTitleContainer({
child: Column(children: [
Text(
title,
style: textTheme.titleMedium!
style: textTheme.titleSmall!
.copyWith(color: titleColor ?? scale.primaryScale.borderText),
).paddingLTRB(8, 8, 8, 4),
).paddingLTRB(8, 6, 8, 2),
DecoratedBox(
decoration: ShapeDecoration(
color: