Description:

adaptive widgets flutter

Adaptive Widgets Flutter #
This demonstrates how to use the adaptive_widgets_flutter package to create adaptive and responsive UI components that work seamlessly on both Android and iOS platforms. The example includes the usage of the following widgets:

Refreshable ScrollView
Alert Dialog
Bottom Action Sheet
Date Picker

Usage #
Refreshable ScrollView #
The AdaptiveWidgets.buildRefreshableScrollView provides a scrollable view that supports pull-to-refresh functionality. This scroll view adapts its appearance and behavior based on the platform (iOS or Android).
AdaptiveWidgets.buildRefreshableScrollView(
context,
padding: const EdgeInsets.all(20),
onRefresh: () async {
await Future.delayed(const Duration(seconds: 2));
},
slivers: [
// Your Sliver widgets go here
],
);
copied to clipboard
Alert Dialog #
The AdaptiveWidgets.showDialog method allows you to display an alert dialog with customizable action buttons. The dialog's appearance adapts to the platform, ensuring a consistent user experience.
CupertinoButton.filled(
onPressed: () async {
await AdaptiveWidgets.showDialog(
context,
title: 'Sample Title',
content: 'Sample Content',
actionButtons: [
AdaptiveDialogButtonBuilder(
text: 'OK',
onPressed: (context) {
Navigator.of(context).pop();
},
),
],
);
},
child: const Text('Show Dialog'),
);
copied to clipboard
Bottom Action Sheet #
The AdaptiveWidgets.showBottomActionSheet method provides a bottom action sheet that adapts its style to the platform. You can define multiple action buttons with customizable labels and behaviors.
CupertinoButton.filled(
onPressed: () async {
final actionButtons = [
AdaptiveBottomSheetButtonBuilder(
text: 'Action 1',
onPressed: (context) => Navigator.of(context).pop('action 1'),
),
AdaptiveBottomSheetButtonBuilder(text: 'Action 2'),
AdaptiveBottomSheetButtonBuilder(text: 'Cancel', isCancelAction: true),
AdaptiveBottomSheetButtonBuilder(text: 'Action 3'),
];

final result = await AdaptiveWidgets.showBottomActionSheet(
context,
actionButtons: actionButtons,
);
debugPrint(result);
},
child: const Text('Show Bottom Action Sheet'),
);
copied to clipboard
Date Picker #
The AdaptiveWidgets.showDatePicker method displays a date picker that adapts to the platform's native style. The selected date can be handled asynchronously.
CupertinoButton.filled(
onPressed: () async {
await AdaptiveWidgets.showDatePicker(context);
},
child: const Text('Show Date Picker'),
);
copied to clipboard
License #
This project is licensed under the MIT License - see the LICENSE file for details.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter