more_widgets

Add more widgets to use in your apps...

Migration note: this README reflects the 4.0.0 release where several callback parameters were tightened to typed callbacks (e.g. VoidCallback?, ValueChanged<String>?) and GradientBackground now chooses colors based on theme brightness (no useDarkMode parameter).

List of widgets :

GradientBackground :

Shows a gradient background container. Here is the parameters list:

final Widget child;
final List<Color> colors;       // Default : const [Color(0xffff9800), Color(0xfff44336)]
final List<Color> darkColors;   // Default : const [Color(0xff13191f), Color(0xff262f3c)]
final List<double> stops;       // Default : const [0.2, 0.8]
final AlignmentGeometry begin;  // Default : Alignment.topLeft
final AlignmentGeometry end;    // Default : Alignment.bottomRight

Note: GradientBackground now automatically uses colors or darkColors depending on the current theme brightness.

RoundedContainer :

Shows a rounded container. The default color is white. Here is the parameters list:

final Widget? child;
final Color color;            // Default : Colors.white
final double circularRadius;  // Default : 20
final double margin;          // Default : 20
final double padding;         // Default : 20

BottomActionSheet :

Shows a bottom action sheet. Use named parameters when calling it:

BottomActionSheet.show(
  context: context,
  actions: actions, // required List<BottomActionSheetAction>
  title: 'Title', // optional
  message: 'Message', // optional
  cancelButton: cancelAction, // optional
  useRootNavigator: false, // optional
);

BottomActionSheetAction :

The actions of the bottom action sheet. Here is the parameters list:

const BottomActionSheetAction({
  required String title, // The title of the action
  required VoidCallback onPressed, // The action to do when the action is pressed
  bool isDefaultAction = false, // If the action is the default action
  bool isDestructiveAction = false, // If the action is the destructive action
});

List of dialogs :

Those dialogs adapt automatically to the OS and display accordingly.

Dialogs.infoDialog

This shows an informative dialog with only one button. Here is the parameters list:

required BuildContext context,
required String title,
required String message,
String buttonText = 'Ok',
bool popByDefault = true,
VoidCallback? onPressed,
iOS Android (with material design 3)
iOS Android

Dialogs.dialogWithOptions

Here is the dialog with options, it's useful if you want to pop up a dialog where you can choose between two options. One of them can be set as destructive action. Here is the parameters list:

required BuildContext context,
required String title,
required String message,
String textLeftButton = 'OK',
String textRightButton = 'Cancel',
VoidCallback? onPressedLeftButton,
VoidCallback? onPressedRightButton,
DestructiveAction destructiveAction = DestructiveAction.right,
DefaultAction defaultAction = DefaultAction.none,
Color androidDestructiveColor = Colors.red,
bool popByDefault = true,
iOS Android (with material design 3)
iOS Android

Dialogs.textInputDialog

This method will display a dialog with one or two buttons that have actions. Here is the parameters list:

required BuildContext context,
required String title,
required String message,
String textLeftButton = 'OK',
String textRightButton = 'Cancel',
VoidCallback? onPressedLeftButton,
VoidCallback? onPressedRightButton,
DestructiveAction destructiveAction = DestructiveAction.right,
DefaultAction defaultAction = DefaultAction.none,
Color androidDestructiveColor = Colors.red,
bool popByDefault = true,
bool hasSecondaryButton = true,
String? placeholder,
TextEditingController? controller,
TextInputType? keyboardType,
ValueChanged<String>? onChanged,
VoidCallback? onEditingComplete,
iOS Android (with material design 3)
iOS Android

Dialogs.loadingDialog

required BuildContext context,
String? title,
iOS Android (with material design 3)
iOS Android

Dialogs.checkBoxDialog (NEW)

Dialog with a checkbox (e.g. “Remember my choice”, “Don’t ask me again”) and one or two buttons. Returns the final checkbox value when the dialog is closed via a button (or null if dismissed by barrier/back).

required BuildContext context,
required String title,
required String message,
required String checkboxLabel,
bool initialValue = false,
bool hasSecondaryButton = true,
String textLeftButton = 'Cancel',
String textRightButton = 'OK',
ValueChanged<bool>? onPressedLeftButton,
ValueChanged<bool>? onPressedRightButton,
ValueChanged<bool>? onChanged,
DestructiveAction destructiveAction = DestructiveAction.none,
DefaultAction defaultAction = DefaultAction.none,
Color androidDestructiveColor = Colors.red,
bool popByDefault = true,
bool barrierDismissible = true,
double maxWidth = 700,

Example:

final dontAskAgain = await Dialogs.checkBoxDialog(
  context: context,
  title: 'Danger zone',
  message: 'This action cannot be undone.',
  checkboxLabel: "Don't ask me again",
  textLeftButton: 'Cancel',
  textRightButton: 'Delete',
  destructiveAction: DestructiveAction.right,
  onPressedRightButton: (checked) {
    // checked == true means user selected "Don't ask me again"
  },
);

Left to do

  • Adapt dialogs design to Windows
  • Adapt dialogs design to Linux
  • Improve code documentation

Libraries

more_widgets