111 lines
3.5 KiB
Dart
111 lines
3.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
/// Utilitaires pour rendre l'app responsive
|
|
class ResponsiveUtils {
|
|
static late MediaQueryData _mediaQueryData;
|
|
static late double screenWidth;
|
|
static late double screenHeight;
|
|
static late double blockSizeHorizontal;
|
|
static late double blockSizeVertical;
|
|
static late double safeAreaHorizontal;
|
|
static late double safeAreaVertical;
|
|
static late double safeBlockHorizontal;
|
|
static late double safeBlockVertical;
|
|
static late double textScaleFactor;
|
|
|
|
static void init(BuildContext context) {
|
|
_mediaQueryData = MediaQuery.of(context);
|
|
screenWidth = _mediaQueryData.size.width;
|
|
screenHeight = _mediaQueryData.size.height;
|
|
|
|
blockSizeHorizontal = screenWidth / 100;
|
|
blockSizeVertical = screenHeight / 100;
|
|
|
|
final safeAreaPadding = _mediaQueryData.padding;
|
|
safeAreaHorizontal = screenWidth - safeAreaPadding.left - safeAreaPadding.right;
|
|
safeAreaVertical = screenHeight - safeAreaPadding.top - safeAreaPadding.bottom;
|
|
|
|
safeBlockHorizontal = safeAreaHorizontal / 100;
|
|
safeBlockVertical = safeAreaVertical / 100;
|
|
|
|
textScaleFactor = _mediaQueryData.textScaleFactor;
|
|
}
|
|
|
|
// Responsive width
|
|
static double wp(double percentage) => blockSizeHorizontal * percentage;
|
|
|
|
// Responsive height
|
|
static double hp(double percentage) => blockSizeVertical * percentage;
|
|
|
|
// Responsive font size (basé sur la largeur)
|
|
static double fs(double percentage) => safeBlockHorizontal * percentage;
|
|
|
|
// Responsive spacing
|
|
static double sp(double percentage) => safeBlockHorizontal * percentage;
|
|
|
|
// Responsive padding/margin
|
|
static EdgeInsets paddingAll(double percentage) =>
|
|
EdgeInsets.all(sp(percentage));
|
|
|
|
static EdgeInsets paddingSymmetric({double? horizontal, double? vertical}) =>
|
|
EdgeInsets.symmetric(
|
|
horizontal: horizontal != null ? sp(horizontal) : 0,
|
|
vertical: vertical != null ? hp(vertical) : 0,
|
|
);
|
|
|
|
static EdgeInsets paddingOnly({
|
|
double? left,
|
|
double? top,
|
|
double? right,
|
|
double? bottom,
|
|
}) =>
|
|
EdgeInsets.only(
|
|
left: left != null ? sp(left) : 0,
|
|
top: top != null ? hp(top) : 0,
|
|
right: right != null ? sp(right) : 0,
|
|
bottom: bottom != null ? hp(bottom) : 0,
|
|
);
|
|
|
|
// Adaptive values based on screen size
|
|
static double adaptive({
|
|
required double small, // < 600px (phones)
|
|
required double medium, // 600-900px (tablets)
|
|
required double large, // > 900px (desktop)
|
|
}) {
|
|
if (screenWidth < 600) return small;
|
|
if (screenWidth < 900) return medium;
|
|
return large;
|
|
}
|
|
|
|
// Check device type
|
|
static bool get isMobile => screenWidth < 600;
|
|
static bool get isTablet => screenWidth >= 600 && screenWidth < 900;
|
|
static bool get isDesktop => screenWidth >= 900;
|
|
|
|
// Responsive border radius
|
|
static BorderRadius borderRadius(double percentage) =>
|
|
BorderRadius.circular(sp(percentage));
|
|
|
|
// Responsive icon size
|
|
static double iconSize(double percentage) =>
|
|
adaptive(
|
|
small: sp(percentage),
|
|
medium: sp(percentage * 0.9),
|
|
large: sp(percentage * 0.8),
|
|
);
|
|
}
|
|
|
|
// Extension pour faciliter l'utilisation
|
|
extension ResponsiveExtension on num {
|
|
// Width percentage
|
|
double get wp => ResponsiveUtils.wp(toDouble());
|
|
|
|
// Height percentage
|
|
double get hp => ResponsiveUtils.hp(toDouble());
|
|
|
|
// Font size
|
|
double get fs => ResponsiveUtils.fs(toDouble());
|
|
|
|
// Spacing
|
|
double get sp => ResponsiveUtils.sp(toDouble());
|
|
} |