Skip to content

Commit

Permalink
Add support for accessibility tools & refactor button
Browse files Browse the repository at this point in the history
  • Loading branch information
Pante committed Jun 14, 2024
1 parent abfb50f commit feb60c5
Show file tree
Hide file tree
Showing 8 changed files with 251 additions and 357 deletions.
183 changes: 21 additions & 162 deletions forui/example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@ class Application extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center,
children: [
const ExampleWidget(),
FButton(
text: 'Hi',
onPress: () {},
),
],
),
),
Expand All @@ -41,176 +37,39 @@ class ExampleWidget extends StatefulWidget {
}

class _ExampleWidgetState extends State<ExampleWidget> {
late WidgetStatesController controller;
late TextEditingController textController;

@override
void initState() {
super.initState();
controller = WidgetStatesController();
textController = TextEditingController()..addListener(() {});
}

Widget _dialog(BuildContext context) {
final style = context.theme.cardStyle;
final contentStyle = style.content;
final typography = context.theme.typography;
final effectivePadding =
MediaQuery.viewInsetsOf(context) + const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0);

final child = Align(
child: DefaultTextStyle(
style: context.theme.typography.toTextStyle(
fontSize: typography.base,
color: context.theme.colorScheme.foreground,
),
child: ConstrainedBox(
constraints: const BoxConstraints(minWidth: 280.0),
child: DecoratedBox(
decoration: style.decoration,
child: Padding(
padding: style.content.padding,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Are you absolutely sure?', style: contentStyle.title.scale(typography)),
SizedBox(
height: 10,
),
Text(
'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
style: contentStyle.subtitle.scale(typography), textAlign: TextAlign.center,),
SizedBox(
height: 18,
),
LayoutBuilder(
builder: (context, constraints) {
// Get the width of the screen
final screenWidth = MediaQuery.sizeOf(context).width;

// Calculate the combined width of the buttons
final buttonWidth = constraints.maxWidth;

print(screenWidth);
print(buttonWidth);

// If the combined width of the buttons exceeds the screen width, place them in a Column
if (true) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 7.0),
child: FButton(text: 'Continue', onPress: () {}),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 7.0),
child: FButton(design: FButtonVariant.outlined, text: 'Cancel', onPress: () {}),
),
],
);
} else {
// Otherwise, place them in a Row
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 7.0),
child: FButton(design: FButtonVariant.outlined, text: 'Cancel', onPress: () {}),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 7.0),
child: FButton(text: 'Continue', onPress: () {}),
),
),
],
);
}
},
),
],
),
),
)),
),
);

return AnimatedPadding(
padding: effectivePadding,
duration: const Duration(milliseconds: 100),
curve: Curves.decelerate,
child: MediaQuery.removeViewInsets(
removeLeft: true,
removeTop: true,
removeRight: true,
removeBottom: true,
context: context,
child: child,
),
);
}

@override
Widget build(BuildContext context) {
WidgetsBinding.instance.addPostFrameCallback((_) {
showAdaptiveDialog(
context: context,
builder: (context) {
final style = context.theme.cardStyle;
return _dialog(context);

// return AlertDialog()
// return Dialog(child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Text('Are you absolutely sure?', style: contentStyle.title.scale(typography)),
// Text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.', style: contentStyle.subtitle.scale(typography)),
// Row(
// children: [
// FButton(design: FButtonVariant.secondary, text: 'Cancel', onPress: () {}),
// FButton(text: 'Continue', onPress: () {}),
// ],
// )
// ],
// ),);
},
);
});
return Padding(
Widget build(BuildContext context) => Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
// FCard(title: 'Email'),
FTextField(
// enabled: false,
labelText: 'Email',
hintText: '[email protected]',
helpText: 'This is your public display name.',
// errorText: 'Error',
// statesController: controller,
controller: textController,
FButton(
design: FButtonVariant.destructive,
text: 'Delete?',
onPress: () => showAdaptiveDialog(
context: context,
builder: (context) {
final style = context.theme.cardStyle;
return FDialog(
title: 'Are you absolutely sure?',
subtitle: 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
actions: [
FButton(text: 'Continue', onPress: () {}),
FButton(design: FButtonVariant.outlined, text: 'Cancel', onPress: () {
Navigator.of(context).pop();
}),
],
);
// return _dialog(context);
},
),
),
// const TextField(
// // enabled: false,
// decoration: InputDecoration(
// labelText: 'Material TextField',
// hintText: 'Email',
// errorText: 'Error text',
// ),
// ),
],
),
);
}

@override
void dispose() {
super.dispose();
controller.dispose();
textController.dispose();
}
}
2 changes: 1 addition & 1 deletion forui/lib/src/theme/theme_data.dart
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ class FThemeData with Diagnosticable {
style: style,
),
cardStyle = FCardStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
dialogStyle = FDialogStyle.inherit(colorScheme: colorScheme, typography: typography),
dialogStyle = FDialogStyle.inherit(style: style, colorScheme: colorScheme, typography: typography),
headerStyle = FHeaderStyle.inherit(colorScheme: colorScheme, typography: typography),
textFieldStyle = FTextFieldStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
boxStyle = FBoxStyle.inherit(colorScheme: colorScheme),
Expand Down
62 changes: 57 additions & 5 deletions forui/lib/src/widgets/button/button.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,8 @@ import 'package:forui/forui.dart';
import 'package:forui/src/foundation/tappable.dart';

part 'button_content.dart';

part 'button_style.dart';

part 'button_styles.dart';

part 'button_content_style.dart';

/// A button.
class FButton extends StatelessWidget {
/// The design. Defaults to [FBadgeVariant.primary].
Expand Down Expand Up @@ -120,3 +115,60 @@ class FButton extends StatelessWidget {
..add(DiagnosticsProperty('builder', builder));
}
}

/// The button design. Either a pre-defined [FButtonVariant], or a custom [FButtonStyle].
sealed class FButtonDesign {}

/// A pre-defined button variant.
enum FButtonVariant implements FButtonDesign {
/// A primary-styled button.
primary,

/// A secondary-styled button.
secondary,

/// An outlined button.
outlined,

/// A destructive button.
destructive,
}

/// Represents the theme data that is inherited by [FButtonStyle] and used by child [FButton].
class FButtonStyle extends FButtonDesign with Diagnosticable{
/// The content.
final FButtonContentStyle content;

/// The box decoration for an enabled button.
final BoxDecoration enabledBoxDecoration;

/// The box decoration for a disabled button.
final BoxDecoration disabledBoxDecoration;

/// Creates a [FButtonStyle].
FButtonStyle({
required this.content,
required this.enabledBoxDecoration,
required this.disabledBoxDecoration,
});

/// Creates a copy of this [FButtonStyle] with the given properties replaced.
FButtonStyle copyWith({
FButtonContentStyle? content,
BoxDecoration? enabledBoxDecoration,
BoxDecoration? disabledBoxDecoration,
}) =>
FButtonStyle(
content: content ?? this.content,
enabledBoxDecoration: enabledBoxDecoration ?? this.enabledBoxDecoration,
disabledBoxDecoration: disabledBoxDecoration ?? this.disabledBoxDecoration,
);

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties..add(DiagnosticsProperty('content', content))
..add(DiagnosticsProperty('enabledBoxDecoration', enabledBoxDecoration))
..add(DiagnosticsProperty('disabledBoxDecoration', disabledBoxDecoration));
}
}
57 changes: 57 additions & 0 deletions forui/lib/src/widgets/button/button_content.dart
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,60 @@ part of 'button.dart';
..add(DiagnosticsProperty('icon', icon));
}
}

/// [FButtonContent]'s style.
class FButtonContentStyle with Diagnosticable {
/// The [TextStyle] when this button is enabled.
final TextStyle enabledText;

/// The [TextStyle] when this button is disabled.
final TextStyle disabledText;

/// The icon's color when this button is enabled.
final Color enabledIcon;

/// The icon's color when this button is disabled.
final Color disabledIcon;

/// The padding.
final EdgeInsets padding;

/// Creates a [FButtonContentStyle].
FButtonContentStyle({
required this.enabledText,
required this.disabledText,
required this.enabledIcon,
required this.disabledIcon,
required this.padding,
});

/// Creates a [FButtonContentStyle] that inherits its properties from the given [foreground] and [disabledForeground].
FButtonContentStyle.inherit({ required FTypography typography,required Color foreground, required Color disabledForeground})
: padding = const EdgeInsets.symmetric(
horizontal: 20,
vertical: 15,
),
enabledText = TextStyle(
fontSize: typography.base,
fontWeight: FontWeight.w600,
color: foreground,
),
disabledText = TextStyle(
fontSize: typography.base,
fontWeight: FontWeight.w600,
color: disabledForeground,
),
enabledIcon = foreground,
disabledIcon = disabledForeground;

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(DiagnosticsProperty('enabledText', enabledText))
..add(DiagnosticsProperty('disabledText', disabledText))
..add(DiagnosticsProperty('enabledIcon', enabledIcon))
..add(DiagnosticsProperty('disabledIcon', disabledIcon))
..add(DiagnosticsProperty('padding', padding));
}
}
Loading

0 comments on commit feb60c5

Please sign in to comment.