Flutter: адаптивные шрифты и размеры
С размерами блоков воFlutter относительно всё в порядке — очень помогает виджет Expanded. Некоторое же неудобство разработки как оказалось — это отсутствие в «из коробки» возможности указывать размер шрифтов в «адаптиве» под разные разрешения экрана.
Что делать? Решений множество. Ниже некоторые варианты:
Вариант 1:
Создать отдельный класс-обертку, через которую пропускать потом все размеры шрифтов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class ScaleSize { static double textScaleFactor(BuildContext context, {double maxTextScaleFactor = 2}) { final width = MediaQuery.of(context).size.width; double val = (width / 1400) * maxTextScaleFactor; return max(1, min(val, maxTextScaleFactor)); } } Text( intro.subtitle, style: Theme.of(context).textTheme.subtitle1, textAlign: TextAlign.center, textScaleFactor: ScaleSize.textScaleFactor(context), ), |
Вариант 2:
Использовать различную отрисовку виджетов в зависимости от размера экранов. Как-то типа:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
Widget build(BuildContext context) { final isSmall = MediaQuery.of(context).size.width < 500; return Provider.value( value: isSmall ? AdaptativeTheme( smallFontSize: 10, bigSpace: 20, smallSpace: 10, ) : AdaptativeTheme( smallFontSize: 20, bigSpace: 40, smallSpace: 12, ), child: Child(), ); } |
Вариант 3:
Использовать один из множества пакетов. Например Sizer. Тогда вся адаптация сведется к обёртыванию корневого виджета через виджет Sizer, и далее указание во всех нижележащих виджетах относительных размеров. Например так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
return Sizer( builder: (context, orientation, deviceType) { return Scaffold( ... ... child: Container( width: 48.sp, height: 48.sp, ... ... child: Text(ListEZS[index]["nameazs"],style: TextStyle(fontSize: 14.0.sp, color: Colors.black)), |