58 lines
1.7 KiB
Dart
58 lines
1.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:responsive_framework/responsive_framework.dart';
|
|
|
|
class AppBreakpoints {
|
|
AppBreakpoints._();
|
|
|
|
static const double mobile = 0;
|
|
static const double tablet = 600;
|
|
static const double desktop = 1024;
|
|
static const double wide = 1440;
|
|
|
|
/// Form grid: 2 cols from this width up.
|
|
static const double formSmall = 600;
|
|
|
|
/// Form grid: 3 cols from this width up.
|
|
static const double formMedium = 900;
|
|
|
|
/// Form grid: 4 cols from this width up.
|
|
static const double formLarge = 1200;
|
|
}
|
|
|
|
extension ResponsiveContext on BuildContext {
|
|
bool get isMobile => ResponsiveBreakpoints.of(this).isMobile;
|
|
bool get isTablet => ResponsiveBreakpoints.of(this).isTablet;
|
|
bool get isDesktop => ResponsiveBreakpoints.of(this).largerThan(TABLET);
|
|
bool get isWide => ResponsiveBreakpoints.of(this).largerThan(DESKTOP);
|
|
|
|
double get contentMaxWidth {
|
|
if (isWide) return 1400;
|
|
if (isDesktop) return 1200;
|
|
return double.infinity;
|
|
}
|
|
|
|
/// Form grid columns: 4 / 3 / 2 / 1 by viewport width.
|
|
int get formGridColumns {
|
|
final width = MediaQuery.sizeOf(this).width;
|
|
return formGridColumnsForWidth(width);
|
|
}
|
|
}
|
|
|
|
/// Responsive form field columns:
|
|
/// large ≥1200 → 4, medium ≥900 → 3, small ≥600 → 2, else → 1.
|
|
int formGridColumnsForWidth(
|
|
double width, {
|
|
int xsColumns = 1,
|
|
int smallColumns = 2,
|
|
int mediumColumns = 3,
|
|
int largeColumns = 4,
|
|
double smallBreakpoint = AppBreakpoints.formSmall,
|
|
double mediumBreakpoint = AppBreakpoints.formMedium,
|
|
double largeBreakpoint = AppBreakpoints.formLarge,
|
|
}) {
|
|
if (width >= largeBreakpoint) return largeColumns;
|
|
if (width >= mediumBreakpoint) return mediumColumns;
|
|
if (width >= smallBreakpoint) return smallColumns;
|
|
return xsColumns;
|
|
}
|