amirrezaghabeli
57 lines
1.7 KiB
Dart
57 lines
1.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:tm_app/core/utils/breakpoints.dart';
|
|
|
|
/// A responsive builder widget that automatically switches between different
|
|
/// layouts based on the current display size.
|
|
///
|
|
/// This widget can be used by all screens to handle responsive layouts.
|
|
class ResponsiveBuilder extends StatelessWidget {
|
|
/// The widget to display on extra small screens (mobile)
|
|
final Widget? mobile;
|
|
|
|
/// The widget to display on small screens (tablet)
|
|
final Widget? tablet;
|
|
|
|
/// The widget to display on large screens (desktop)
|
|
final Widget? desktop;
|
|
|
|
/// A builder function that receives the current display size
|
|
/// Use this when you want to handle the layout logic yourself
|
|
final Widget Function(BuildContext context, DisplaySize? displaySize)?
|
|
builder;
|
|
|
|
const ResponsiveBuilder({
|
|
super.key,
|
|
this.mobile,
|
|
this.tablet,
|
|
this.desktop,
|
|
this.builder,
|
|
}) : assert(
|
|
builder != null || mobile != null,
|
|
'Either builder or at least mobile layout must be provided',
|
|
);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final size = MediaQuery.sizeOf(context);
|
|
final displaySize = size.displaySize;
|
|
|
|
// If builder is provided, use it
|
|
if (builder != null) {
|
|
return builder!(context, displaySize);
|
|
}
|
|
|
|
// Otherwise, use the appropriate widget based on display size
|
|
return switch (displaySize) {
|
|
DisplaySize.extraSmall => mobile ?? _defaultWidget(),
|
|
DisplaySize.small => tablet ?? mobile ?? _defaultWidget(),
|
|
DisplaySize.medium => desktop ?? mobile ?? _defaultWidget(),
|
|
DisplaySize.large => desktop ?? mobile ?? _defaultWidget(),
|
|
};
|
|
}
|
|
|
|
Widget _defaultWidget() {
|
|
return const SizedBox.shrink();
|
|
}
|
|
}
|