modula_ui 1.0.4 
modula_ui: ^1.0.4 copied to clipboard
A comprehensive Flutter UI component library with 100+ professionally designed widgets and full Material 3 theming support.
import 'package:example/screens/home_screen.dart';
import 'package:modula_ui/exporter/exporter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ModulaApp(
home: HomeScreen(
onThemeModeChanged: (_) {}, // No-op since theme is locked
currentThemeMode: ThemeMode.light,
),
themeMode: ThemeMode.light, // Force light theme only
);
}
}
class MyHomePages extends StatefulWidget {
const MyHomePages({super.key});
@override
State<MyHomePages> createState() => _MyHomePagesState();
}
class _MyHomePagesState extends State<MyHomePages> {
String? selectedValue;
final List<String> options = ['Option 1', 'Option 2', 'Option 3'];
@override
Widget build(BuildContext context) {
return HomeScreen();
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isDarkMode = false;
String? selectedValue = '';
int currentStep = 0;
final List<String> options = ['Option 1', 'Option 2', 'Option 3'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// ModulaSurface(
// elevation: 8,
// color: Colors.white,
// borderRadius: BorderRadius.circular(20),
// child: const Padding(
// padding: EdgeInsets.all(24),
// child: Text("Elevated Surface Widget"),
// ),
// ),
// ModulaContainer(
// padding: const EdgeInsets.all(16),
// color: Colors.amber.shade100,
// elevation: 4,
// borderRadius: BorderRadius.circular(12),
// border: Border.all(color: Colors.amber, width: 1),
// child: const Text("Custom styled container"),
// ),
// ModulaCard(
// header: const Text(
// "Card Title",
// style: TextStyle(fontWeight: FontWeight.bold),
// ),
// body: const Text(
// "This is the card body. You can place any widget here.",
// ),
// footer: ElevatedButton(
// onPressed: () {},
// child: const Text("Action"),
// ),
// padding: const EdgeInsets.all(16),
// elevation: 6,
// borderRadius: BorderRadius.circular(16),
// ),
// ModulaGrid(
// spacing: 5,
// children: [
// ModulaGridItem(
// span: 6,
// child: Container(color: Colors.red, height: 100),
// ),
// ModulaGridItem(
// span: 6,
// child: Container(color: Colors.blue, height: 100),
// ),
// ModulaGridItem(
// span: 12,
// child: Container(color: Colors.green, height: 100),
// ),
// ],
// ),
// Gap.v(20),
// ModulaSliderButton(
// label: "Slide to Confirm",
// onConfirmed: () {
// print("Confirmed!");
// },
// backgroundColor: Colors.grey[800]!,
// sliderColor: Colors.red,
// icon: Icon(Icons.lock_open, color: Colors.white),
// showSuccess: true,
// ),
// ModulaPinCodeInput(
// length: 5,
// textStyle: TextStyle(fontSize: 20, color: Colors.deepPurple),
// decoration: InputDecoration(
// filled: true,
// fillColor: Colors.deepPurple.shade50,
// border: OutlineInputBorder(
// borderRadius: BorderRadius.circular(10),
// ),
// ),
// onCompleted: (code) {
// debugPrint("Styled Code: $code");
// },
// ),
// ModulaChipsInput(
// label: 'Technologies',
// hintText: 'Add tech',
// initialChips: ['React', 'Flutter'],
// chipStyle: ChipStyle(
// backgroundColor: Colors.blue.shade100,
// labelStyle: const TextStyle(color: Colors.black87),
// deleteIconColor: Colors.red,
// ),
// onChanged: (chips) {
// print('Updated: $chips');
// },
// ),
// ModulaChipsInput(
// label: 'Emails',
// hintText: 'Enter email',
// initialChips: [],
// validator: (value) {
// final emailRegex = RegExp(r'^[\w\.-]+@[\w\.-]+\.\w+$');
// return emailRegex.hasMatch(value) ? null : 'Invalid email';
// },
// onChanged: (chips) {
// print('Email list: $chips');
// },
// ),
// ModulaChipsInput(
// hintText: 'Enter a tag',
// initialChips: ['Flutter', 'Dart'],
// showTextField: false,
// onChanged: (chips) {
// print('Current chips: $chips');
// },
// ),
// ModulaDateTimePicker(
// pickerType: ModulaPickerType.range,
// label: 'Select Range',
// onRangeChanged: (range) => print(range),
// ),
// ModulaDateTimePicker(
// pickerType: ModulaPickerType.dateTime,
// label: 'Date & Time',
// onDateChanged: (date) => print(date),
// onTimeChanged: (time) => print(time),
// ),
// ModulaDateTimePicker(
// pickerType: ModulaPickerType.time,
// label: 'Pick a Time',
// onTimeChanged: (time) => print(time),
// is24Hour: true, // optional
// ),
// ModulaDateTimePicker(
// pickerType: ModulaPickerType.date,
// label: 'Pick a Date',
// onDateChanged: (date) => print(date),
// ),
// ModulaStepper(
// steps: [
// ModulaStep(
// title: Text('Step 1'),
// content: Text('This is step 1'),
// ),
// ModulaStep(
// title: Text('Step 2'),
// content: Text('This is step 2'),
// ),
// ModulaStep(
// title: Text('Step 3'),
// content: Text('This is step 3'),
// ),
// ],
// currentStep: currentStep,
// direction: Axis.horizontal,
// showProgress: true,
// onStepTapped: (index) {
// setState(() => currentStep = index);
// },
// ),
// ModulaRangeSlider(
// label: 'Select Range',
// values: _rangeValues,
// min: 0,
// max: 100,
// step: 5,
// onChanged: (val) {
// setState(() => _rangeValues = val);
// },
// ),
// ModulaSwitch(
// value: isDarkMode,
// onChanged: (val) => setState(() => isDarkMode = val),
// iconOff: Icons.wifi_off,
// iconOn: Icons.wifi,
// enableHaptic: true,
// activeColor: Colors.red,
// inactiveColor: Colors.green,
// reverseLabelPosition: false,
// iconColor: Colors.red,
// ),
// ModulaRadioGroup<String>(
// options: ['sun', 'cloud', 'moon'],
// selected: 'sun',
// onChanged: (val) => print(val),
// style: ModulaRadioStyle.icon,
// iconBuilder: (val) {
// switch (val) {
// case 'sun':
// return Icons.wb_sunny;
// case 'cloud':
// return Icons.cloud;
// case 'moon':
// return Icons.nights_stay;
// default:
// return Icons.circle;
// }
// },
// ),
// GroupedCheckboxFilter<String>(
// options: ["All", "Popular", "New", "Free"],
// selected: ["All", "Popular"],
// onChanged: (list) => print(list),
// ),
// ModulaCheckbox(
// value: false,
// onChanged: (val) {},
// shape: ModulaCheckboxShape.toggle,
// ),
// ModulaCheckbox(
// value: true,
// onChanged: (val) {},
// label: "Subscribe",
// shape: ModulaCheckboxShape.circle,
// activeColor: Colors.green,
// ),
// ModulaCheckbox(
// value: true,
// onChanged: (val) {},
// label: "Accept Terms",
// ), // ModulaDropdown<String>(
// labelText: "Skills",
// items: ["Flutter", "Dart", "Firebase", "Bloc"],
// isMultiSelect: true,
// isSearchable: true,
// itemLabelBuilder: (item) => item,
// selectedItems: ["Flutter"],
// onMultiChanged: (list) => print("Multi: $list"),
// ),
// ModulaTextArea(
// hintText: "Feedback",
// minLines: 4,
// maxLines: 10,
// maxLength: 500,
// showCharacterCount: true,
// onChanged: (val) => print(val),
// validator:
// (val) =>
// (val == null || val.trim().isEmpty)
// ? "Please enter some text"
// : null,
// ),
// ModulaSearchField(
// onSearch: (value) => print("Dropdown Filter Search: $value"),
// filters: ['Date', 'Name', 'Relevance'],
// selectedFilter: 'Name',
// filterType: FilterType.dropdown,
// ),
// ModulaTextField(
// label: 'Age',
// hintText: 'Enter your age',
// initialValue: '25',
// showClearButton: true,
// errorText:
// selectedValue == null || selectedValue!.isEmpty
// ? 'Please select an option'
// : null,
// onChanged: (value) {
// selectedValue = value;
// setState(() {});
// },
// ),
// ModulaHoverAnimation(
// // scale: 1.05,
// duration: Duration(milliseconds: 200),
// child: Container(
// padding: EdgeInsets.all(16),
// decoration: BoxDecoration(
// color: Colors.orange,
// borderRadius: BorderRadius.circular(12),
// ),
// child: Text("Hover Me!"),
// ),
// ),
// ModulaStaggeredList(
// duration: Duration(milliseconds: 400),
// children: List.generate(5, (index) {
// return ListTile(title: Text('Item ${index + 1}'));
// }),
// ),
// ModulaAnimatedWrapper(
// delay: Duration(milliseconds: 300),
// duration: Duration(milliseconds: 500),
// curve: Curves.easeOutBack,
// child: Container(
// height: 100,
// width: 100,
// color: Colors.blue,
// ),
// )
// ModulaAnimatedSwitcher(
// duration: Duration(milliseconds: 400),
// child:
// true
// ? Icon(Icons.favorite, key: ValueKey(1))
// : Icon(Icons.favorite_border, key: ValueKey(2)),
// ),
// ModulaAnimatedVisibility(
// visible: true,
// duration: Duration(milliseconds: 300),
// child: Text("Hello, I'm visible!"),
// ),
// GestureDetector(
// onTap: () {
// Navigator.push(
// context,
// MaterialPageRoute(builder: (_) => NextPage()),
// );
// },
// child: Hero(
// tag: 'hero-image',
// child: ClipRRect(
// borderRadius: BorderRadius.circular(12),
// child: Container(color: Colors.red, width: 100, height: 100),
// ),
// ),
// ),
// ElevatedButton(
// onPressed: () {
// Navigator.push(context, ScaleFadePageRoute(page: NextPage()));
// },
// child: Text('Go to Next Page'),
// ),
// ModulaIndeterminateBar(
// width: 200,
// height: 6,
// barColor: Colors.greenAccent,
// backgroundColor: Colors.grey.shade300,
// duration: Duration(seconds: 2),
// ),
// ModulaWaveLoader(
// dotCount: 4,
// dotSize: 10,
// duration: Duration(milliseconds: 1000),
// color: Colors.deepPurple,
// spacing: 6,
// ),
// ModulaShimmer(
// child: Container(
// height: 20,
// width: 200,
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(8),
// color: Colors.grey[300],
// ),
// ),
// ),
// Center(child: ModulaLoader(size: 60, color: Colors.teal)),
// ScaleOnTap(
// child: Container(
// padding: EdgeInsets.all(16),
// color: Colors.blue,
// child: Text('Tap Me', style: TextStyle(color: Colors.white)),
// ),
// ),
// ListView.builder(
// itemCount: 6,
// padding: const EdgeInsets.symmetric(vertical: 20),
// itemBuilder: (context, index) {
// return ScrollReveal(
// offsetY: 40,
// child: Card(
// margin: const EdgeInsets.symmetric(
// horizontal: 16,
// vertical: 12,
// ),
// child: ListTile(
// leading: const Icon(Icons.star),
// title: Text('Scroll Reveal Item $index'),
// ),
// ),
// );
// },
// ),
// CascadeEntrance(
// delay: Duration(milliseconds: 100),
// duration: Duration(milliseconds: 300),
// offsetY: 40,
// children: List.generate(
// 5,
// (i) => Padding(
// padding: const EdgeInsets.symmetric(vertical: 8),
// child: Container(
// height: 50,
// width: double.infinity,
// color: Colors.blue.shade100,
// alignment: Alignment.center,
// child: Text("Item ${i + 1}"),
// ),
// ),
// ),
// ),
// StaggeredScaleFade(
// delay: const Duration(milliseconds: 120),
// children: List.generate(4, (index) {
// return Container(
// margin: const EdgeInsets.symmetric(vertical: 10),
// padding: const EdgeInsets.all(16),
// decoration: BoxDecoration(
// color: Colors.purple.shade100,
// borderRadius: BorderRadius.circular(12),
// ),
// child: Text('Scale + Fade Item $index'),
// );
// }),
// ),
// StaggeredFadeSlide(
// offsetY: 30,
// offsetX: 0,
// delay: const Duration(milliseconds: 100),
// children: List.generate(5, (index) {
// return Card(
// margin: const EdgeInsets.symmetric(vertical: 8),
// child: ListTile(title: Text('Fade + Slide Item $index')),
// );
// }),
// ),
// ModulaAttentionSeeker(
// type: AttentionType.rotate,
// child: Container(
// padding: const EdgeInsets.symmetric(
// horizontal: 16,
// vertical: 8,
// ),
// color: Colors.purple,
// child: const Text(
// "Pulse",
// style: TextStyle(color: Colors.white),
// ),
// ),
// ),
// ElevatedButton(
// onPressed: () => setState(() => _isSlidingOut = !_isSlidingOut),
// child: const Text("Slide Out"),
// ),
// ModulaShrinkAway(
// shrink: _isSlidingOut,
// duration: const Duration(milliseconds: 500),
// alignment: Alignment.center,
// onEnd: () => debugPrint("Shrunk and removed!"),
// child: Container(
// padding: const EdgeInsets.all(20),
// color: Colors.teal,
// child: const Text(
// "Bye Bye!",
// style: TextStyle(color: Colors.white, fontSize: 18),
// ),
// ),
// ),
// ModulaRotateOut(
// rotateOut: _isSlidingOut,
// rotationAngle: 3.14, // 180 degrees
// duration: const Duration(milliseconds: 600),
// alignment: Alignment.center,
// onEnd: () => debugPrint("Rotation complete!"),
// child: Container(
// width: 150,
// height: 60,
// color: Colors.deepPurple,
// alignment: Alignment.center,
// child: const Text(
// "Rotate Me Out!",
// style: TextStyle(color: Colors.white),
// ),
// ),
// ),
// ModulaScaleOut(
// scaleOut: _isSlidingOut,
// duration: const Duration(milliseconds: 500),
// curve: Curves.easeInOut,
// onEnd: () => debugPrint("Widget disappeared"),
// child: Container(
// width: 150,
// height: 60,
// alignment: Alignment.center,
// color: Colors.green,
// child: const Text(
// "Scaling Out!",
// style: TextStyle(color: Colors.white),
// ),
// ),
// ),
// ModulaSlideOut(
// slideOut: _isSlidingOut,
// direction: SlideOutDirection.left,
// duration: const Duration(milliseconds: 500),
// onEnd: () => debugPrint("Widget has slid out and disappeared."),
// child: Container(
// padding: const EdgeInsets.all(16),
// color: Colors.blue,
// child: const Text(
// "Bye 👋",
// style: TextStyle(color: Colors.white),
// ),
// ),
// ),
// ModulaFadeOut(
// fadeOut: true,
// duration: Duration(milliseconds: 600),
// onEnd: () => print("Fade out complete"),
// child: Container(
// width: 200,
// height: 100,
// color: Colors.blue,
// child: Center(child: Text("Goodbye!")),
// ),
// ),
// ModulaExpandIn(
// expand: true,
// duration: Duration(milliseconds: 500),
// child: Container(
// color: Colors.amber,
// padding: EdgeInsets.all(16),
// child: Text("This is an expandable section!"),
// ),
// ),
// ModulaElasticIn(
// duration: Duration(milliseconds: 1200),
// initialScale: 0.1,
// curve: Curves.elasticOut,
// child: Icon(Icons.thumb_up, size: 50, color: Colors.green),
// ),
// ModulaBounceIn(
// duration: Duration(milliseconds: 1000),
// initialScale: 0.2,
// curve: Curves.elasticOut,
// child: Icon(Icons.favorite, size: 48, color: Colors.red),
// ),
// ModulaRotateIn(
// angle: 2,
// clockwise: false,
// duration: Duration(milliseconds: 800),
// curve: Curves.easeInOutBack,
// child: Icon(Icons.refresh, size: 48),
// ),
// ModulaFlipIn(
// axis: FlipAxis.x,
// duration: Duration(milliseconds: 1000),
// delay: Duration(milliseconds: 300),
// reverse: false,
// curve: Curves.easeOutCubic,
// child: Container(
// width: 120,
// height: 120,
// color: Colors.deepPurple,
// alignment: Alignment.center,
// child: Text("Flip X", style: TextStyle(color: Colors.white)),
// ),
// ),
// ModulaScaleIn(
// duration: Duration(milliseconds: 800),
// delay: Duration(milliseconds: 200),
// beginScale: 0.5,
// curve: Curves.easeInOutBack,
// child: Container(
// width: 100,
// height: 100,
// decoration: BoxDecoration(
// color: Colors.green,
// borderRadius: BorderRadius.circular(12),
// ),
// child: Center(child: Text("Zoom In")),
// ),
// ),
// ModulaSlideIn(
// direction: SlideDirection.left,
// offset: 80,
// duration: Duration(milliseconds: 700),
// delay: Duration(milliseconds: 300),
// child: Container(
// width: 200,
// height: 80,
// color: Colors.blue,
// child: Center(child: Text('Slide from Left')),
// ),
// ),
// ModulaFadeIn(
// duration: Duration(milliseconds: 800),
// delay: Duration(milliseconds: 200),
// curve: Curves.easeOut,
// child: Text(
// "Hello with Fade In!",
// style: TextStyle(fontSize: 24),
// ),
// ),
// ElevatedButton(
// onPressed: () {
// ModulaToastNotifier().showToast(
// ModulaToast(
// message: "This is a global toast!",
// icon: Icons.check_circle_outline,
// backgroundColor: Colors.green.shade600,
// textColor: Colors.white,
// duration: Duration(seconds: 3),
// ),
// context,
// );
// },
// child: Text('Show Toast'),
// ),
// ModulaValidationMessage(
// message: 'Invalid phone number format.',
// state: ValidationStateType.error,
// padding: EdgeInsets.symmetric(vertical: 8),
// iconSize: 20,
// alignment: CrossAxisAlignment.center,
// ),
// ModulaPopover(
// trigger: Icon(Icons.more_vert, size: 28),
// content: Column(
// mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Text("View Details", style: TextStyle(fontSize: 14)),
// SizedBox(height: 8),
// Text("Edit", style: TextStyle(fontSize: 14)),
// SizedBox(height: 8),
// Row(
// children: [
// Icon(Icons.logout, size: 16, color: Colors.red),
// SizedBox(width: 8),
// Text("Logout", style: TextStyle(color: Colors.red)),
// ],
// ),
// ],
// ),
// alignment: Alignment.bottomCenter,
// offset: 12,
// backgroundColor: Colors.white,
// padding: EdgeInsets.all(16),
// borderRadius: BorderRadius.circular(12),
// showArrow: true,
// animationDuration: Duration(milliseconds: 300),
// ),
// ElevatedButton(
// onPressed: () {
// ModulaBottomSheet.show(
// context: context,
// backgroundColor: Colors.grey.shade100,
// elevation: 10,
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.vertical(
// top: Radius.circular(20),
// ),
// ),
// builder: (context) {
// return Container(
// height: 120,
// padding: EdgeInsets.all(16),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// Text(
// "Persistent Sheet",
// style: TextStyle(fontSize: 16),
// ),
// IconButton(
// icon: Icon(Icons.close),
// onPressed: () => Navigator.pop(context),
// ),
// ],
// ),
// );
// },
// );
// },
// child: Text('show Dialog'),
// ),
// ElevatedButton(
// onPressed: () {
// ModulaDialog.show(
// context,
// title: 'Alert',
// description: 'this is the dummy alert message',
// type: ModulaDialogType.normal,
// );
// },
// child: Text('show Dialog'),
// ),
// ElevatedButton(
// onPressed: () {
// ModulaSnackbarController(context).show(
// backgroundColor: Colors.black,
// message: 'Hey this is new thing',
// type: SnackbarType.error,
// );
// },
// child: Text('show toast'),
// ),
// ModulaTimeline(
// direction: Axis.vertical,
// lineColor: Colors.grey.shade400,
// animationDuration: const Duration(milliseconds: 700),
// events: [
// TimelineEvent(
// title: 'Trip',
// description: 'mountains.',
// icon: const Icon(Icons.event_available, color: Colors.white),
// color: Colors.green,
// ),
// TimelineEvent(
// title: 'Packing',
// description: 'checklist',
// icon: const Icon(
// Icons.check_circle_outline,
// color: Colors.white,
// ),
// color: Colors.orange,
// ),
// TimelineEvent(
// title: 'Started',
// description: 'journey',
// icon: const Icon(Icons.directions_car, color: Colors.white),
// color: Colors.blue,
// ),
// TimelineEvent(
// title: 'Destination',
// description: 'evening.',
// icon: const Icon(Icons.flag, color: Colors.white),
// color: Colors.purple,
// ),
// ],
// ),
// ModulaAnimatedCarousel(
// items: [
// Container(
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(12),
// color: Colors.deepPurple,
// ),
// alignment: Alignment.center,
// child: const Text(
// 'Slide 1',
// style: TextStyle(color: Colors.white, fontSize: 24),
// ),
// ),
// Container(
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(12),
// color: Colors.orange,
// ),
// alignment: Alignment.center,
// child: const Text(
// 'Slide 2',
// style: TextStyle(color: Colors.white, fontSize: 24),
// ),
// ),
// Container(
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(12),
// color: Colors.teal,
// ),
// alignment: Alignment.center,
// child: const Text(
// 'Slide 3',
// style: TextStyle(color: Colors.white, fontSize: 24),
// ),
// ),
// Container(
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(12),
// color: Colors.deepPurple,
// ),
// alignment: Alignment.center,
// child: const Text(
// 'Slide 1',
// style: TextStyle(color: Colors.white, fontSize: 24),
// ),
// ),
// Container(
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(12),
// color: Colors.orange,
// ),
// alignment: Alignment.center,
// child: const Text(
// 'Slide 2',
// style: TextStyle(color: Colors.white, fontSize: 24),
// ),
// ),
// Container(
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(12),
// color: Colors.teal,
// ),
// alignment: Alignment.center,
// child: const Text(
// 'Slide 3',
// style: TextStyle(color: Colors.white, fontSize: 24),
// ),
// ),
// ],
// height: 250,
// autoPlay: true,
// loop: true,
// animationDuration: Duration(seconds: 2),
// activeDotColor: Colors.red,
// inactiveDotColor: Colors.black26,
// effect: CarouselIndicatorEffect.worm,
// ),
// ModulaRatingDisplay.imageBased(
// rating: 4,
// iconSize: 40,
// readOnly: false,
// onRatingChanged: (value) => print("Image Rating: $value"),
// ),
// ModulaRatingDisplay.multiIcon(
// rating: 2,
// ratingIcons: [
// Icons.sentiment_very_dissatisfied,
// Icons.sentiment_dissatisfied,
// Icons.sentiment_neutral,
// Icons.sentiment_satisfied,
// Icons.sentiment_very_satisfied,
// ],
// iconSize: 36,
// onRatingChanged: (value) => print("Emoji Rating: $value"),
// readOnly: false,
// ),
// ModulaRatingDisplay.icon(
// rating: 4,
// maxRating: 5,
// filledIcon: Icons.star,
// emptyIcon: Icons.star_border,
// filledColor: Colors.amber,
// emptyColor: Colors.grey,
// iconSize: 30,
// allowHalfRating: true,
// readOnly: false,
// onRatingChanged: (value) => print("Rating: $value"),
// ),
// ModulaAccordionTile(
// title: const Text('Vacation Package'),
// subtitle: const Text('Details about your booking'),
// content: Padding(
// padding: const EdgeInsets.all(8.0),
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: const [
// Text('🏖️ Destination: Maldives'),
// Text('🗓️ Dates: 10-17 June'),
// Text('💵 Cost: \$2,000'),
// Text('📦 Includes: Flight + Hotel + Meals'),
// ],
// ),
// ),
// leading: const Icon(Icons.card_travel),
// backgroundColor: Colors.grey.shade100,
// borderRadius: BorderRadius.circular(16),
// animationDuration: const Duration(milliseconds: 400),
// ),
// ModulaTooltipDialog(
// trigger: Icon(Icons.info_outline),
// content: Column(
// mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Text("This section helps you understand how it works."),
// const SizedBox(height: 8),
// ElevatedButton(
// onPressed: () {
// // your action
// },
// child: Text("Okay"),
// ),
// ],
// ),
// borderRadius: BorderRadius.circular(12),
// padding: EdgeInsets.all(16),
// backgroundColor: Colors.green,
// elevation: 8,
// showDuration: Duration(seconds: 5),
// ),
// ModulaSkeleton(
// width: 100,
// height: 50,
// borderRadius: BorderRadius.circular(10),
// type: SkeletonType.box,
// ),
// ModulaCircularProgress(value: 0.4),
// ModulaLinearProgress(value: 0.5, minHeight: 10),
// ModulaChip(
// label: 'Closable Chip',
// type: ModulaChipType.closable,
// onDeleted: () => print('Chip removed'),
// icon: Icons.close,
// backgroundColor: Colors.red.shade100,
// labelColor: Colors.red.shade900,
// elevation: 2,
// borderRadius: 16,
// ),
// ModulaDivider(
// type: ModulaDividerType.solid,
// thickness: 2,
// spacing: 10,
// label: 'asd',
// ),
// ModulaBanner(
// type: BannerType.success,
// message: "You have unsaved changes!",
// icon: Icons.warning,
// actionLabel: "Save",
// padding: EdgeInsets.all(10),
// onPressed: () {
// // Handle save action
// },
// ),
// ModulaTooltip(
// message: "Tap to refresh your feed",
// position: TooltipPosition.bottom,
// delay: Duration(milliseconds: 400),
// showDuration: Duration(milliseconds: 300),
// hideDuration: Duration(milliseconds: 200),
// arrowHeight: 10,
// arrowWidth: 16,
// backgroundColor: Colors.deepPurple,
// textStyle: TextStyle(
// color: Colors.white,
// fontSize: 14,
// fontWeight: FontWeight.w500,
// ),
// padding: 12,
// borderRadius: 12,
// child: Icon(Icons.refresh, size: 30, color: Colors.deepPurple),
// ),
// ModulaBadge(
// label: 'Hey 50% Off',
// height: 40,
// shape: BadgeShape.rounded,
// width: 150,
// ),
// ModulaAvatar(icon: Icons.person, backgroundColor: Colors.green),
// ModulaShareButton(
// onTap: () {},
// icon: Icons.share,
// backgroundColor: Colors.green,
// borderColor: Colors.black54,
// ),
// label: 'Hello World',
// onPressed: () {},
// isLoading: false,
// ),
// SizedBox(height: 20),
// ModulaSecondaryButton(
// label: 'Hello World',
// onPressed: () {},
// isLoading: false,
// ),
// SizedBox(height: 20),
// TertiaryButton(label: 'Hello World', onPressed: () {}),
// SizedBox(height: 20),
// ModulaIconButton(onPressed: () {}, icon: Icons.favorite_border),
// SizedBox(height: 20),
// ModulaTextButton(onPressed: () {}, label: 'Press me'),
// SizedBox(height: 20),
// ModulaDropdownButton<String>(
// value: selectedValue,
// items:
// options
// .map(
// (item) =>
// DropdownMenuItem(value: item, child: Text(item)),
// )
// .toList(),
// hintText: 'Select an option',
// onChanged: (value) {
// setState(() {
// selectedValue = value;
// });
// },
// backgroundColor: Colors.yellow,
// borderColor: Colors.red,
// style: const TextStyle(fontSize: 16, color: Colors.black),
// borderRadius: 12.0,
// borderWidth: 1.5,
// icon: const Icon(Icons.arrow_drop_down, color: Colors.deepPurple),
// padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
// width: 150,
// ),
// SizedBox(height: 20),
// ModulaHamburgerButton(
// onToggle: (bool val) {
// setState(() {
// isDarkMode = val;
// });
// },
// isOpen: isDarkMode,
// animation: HamburgerAnimation.rotation,
// ),
// SizedBox(height: 20),
// ModulaToggleButton(
// value: isDarkMode,
// onChanged: (val) {
// setState(() {
// isDarkMode = val;
// });
//
// // You can handle theme switching here if needed.
// },
// activeColor: Colors.black,
// inactiveColor: Colors.amber,
// thumbColor: Colors.white,
// activeIcon: Icons.nightlight_round,
// inactiveIcon: Icons.wb_sunny,
// width: 70,
// height: 36,
// isCircleShape: false, // Try true for circle toggle
// borderRadius: 20,
// showIconsOnThumb: true,
// ),
],
),
),
// floatingActionButton: ModulaExpandableButton(
// icon: Icons.add,
// size: 80,
// distance: 70,
// borderRadius: 20,
// backgroundColor: Colors.deepPurple,
// foregroundColor: Colors.white,
// showLabels: true,
// items: [
// ExpandableItem(
// icon: Icons.flight,
// label: 'Add Trip',
// onTap: () {
// print('Trip added');
// },
// backgroundColor: Colors.orange,
// foregroundColor: Colors.white,
// ),
// ExpandableItem(
// icon: Icons.calendar_today,
// label: 'Add Date',
// onTap: () {
// print('Date added');
// },
// backgroundColor: Colors.green,
// foregroundColor: Colors.white,
// ),
// ExpandableItem(
// icon: Icons.shopping_cart,
// label: 'Add Item',
// onTap: () {
// print('Item added');
// },
// backgroundColor: Colors.blue,
// foregroundColor: Colors.white,
// ),
// ],
// ),
// floatingActionButton: ModulaFAB(
// onPressed: () {},
// label: 'Add to cart',
// icon: Icon(Icons.add_shopping_cart, color: Colors.white),
// borderRadius: BorderRadius.circular(10),
// ),
);
}
}
class NextPage extends StatelessWidget {
const NextPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green,
appBar: AppBar(
title: const Text('Next Page'),
backgroundColor: Colors.green,
),
body: Center(
child: Hero(
tag: 'hero-image',
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(color: Colors.black54, width: 300, height: 300),
),
),
),
);
}
}Metadata
3
likes
135
points
96
downloads
Publisher
unverified uploader
Weekly Downloads
Metadata
A comprehensive Flutter UI component library with 100+ professionally designed widgets and full Material 3 theming support.
Repository (GitHub)
View/report issues
Contributing
Documentation
License
MIT (license)
