52 lines
1.7 KiB
Dart
52 lines
1.7 KiB
Dart
|
// lib/widgets/responsive_layout.dart
|
||
|
|
import 'package:flutter/foundation.dart';
|
||
|
|
import 'package:flutter/material.dart';
|
||
|
|
|
||
|
|
/// Simple responsive layout chooser.
|
||
|
|
///
|
||
|
|
/// Behavior:
|
||
|
|
/// - On desktop platforms (Windows / macOS / Linux) -> always use `desktop`.
|
||
|
|
/// - On web -> treat as desktop (tablet/desktop UI). If you want web to act
|
||
|
|
/// like mobile at very narrow widths, you can change that logic here.
|
||
|
|
/// - On mobile platforms (Android / iOS) -> use `mobile` when width < mobileBreakpoint,
|
||
|
|
/// otherwise use `desktop`.
|
||
|
|
///
|
||
|
|
/// Tablet uses the desktop UI by design (per your request).
|
||
|
|
class ResponsiveLayout extends StatelessWidget {
|
||
|
|
final Widget mobile;
|
||
|
|
final Widget desktop;
|
||
|
|
final double mobileBreakpoint;
|
||
|
|
|
||
|
|
const ResponsiveLayout({
|
||
|
|
Key? key,
|
||
|
|
required this.mobile,
|
||
|
|
required this.desktop,
|
||
|
|
this.mobileBreakpoint = 700, // tune this value if you prefer different breakpoint
|
||
|
|
}) : assert(mobileBreakpoint > 0),
|
||
|
|
super(key: key);
|
||
|
|
|
||
|
|
bool _isMobilePlatform() {
|
||
|
|
// kIsWeb is true for web builds.
|
||
|
|
if (kIsWeb) return false; // treat web as desktop/tablet by default
|
||
|
|
// defaultTargetPlatform works on Flutter (all non-web platforms).
|
||
|
|
return defaultTargetPlatform == TargetPlatform.android || defaultTargetPlatform == TargetPlatform.iOS;
|
||
|
|
}
|
||
|
|
|
||
|
|
bool _chooseMobile(BuildContext context) {
|
||
|
|
final width = MediaQuery.of(context).size.width;
|
||
|
|
|
||
|
|
// If running on Android/iOS, allow width to determine mobile vs desktop.
|
||
|
|
if (_isMobilePlatform()) {
|
||
|
|
return width < mobileBreakpoint;
|
||
|
|
}
|
||
|
|
|
||
|
|
// On desktop platforms (Windows/macOS/Linux) and on web, always use desktop UI.
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return _chooseMobile(context) ? mobile : desktop;
|
||
|
|
}
|
||
|
|
}
|