Você pode utilizar um helper para ajudar a escalar um tamanho fixo de acordo com a resolução da tela em que você estiver rodando a sua aplicação.
Em Flutter a gente consegue identificar o tamanho da tela atual através do MediaQuery como:
MediaQuery.of(context).size.width // imprime o tamanho da largura da tela
MediaQuery.of(context).size.height // imprime o tamanho da altura da tela
Com base nesse tamanho podemos fazer algum cálculo similar a:
Tamanho padrão = 40
Se a largura da tela for maior que 600, é um tablet! -> 40 * 2 = 60
Se a largura da tela for maior que 320, é uma tela pequena! -> 40 * 0.8 = 32
600 pois os tablets começam a partir desta resolução, e 320 pois as telas menores (iphone 4s e 5s) possuem esse tamanho de largura.
Acontece que dependendo do modo que estivermos usando o app (PORTRAIT/LANDSCAPE) a largura e altura são invertidas.

Então para evitar esse problema, podemos pegar sempre o menor dos lados para a validação, com o:
MediaQuery.of(context).size.shortestSide
Com base nisso podemos criar esse helper:
class SizeConfig {
final MediaQueryData mediaQueryData;
SizeConfig({this.mediaQueryData});
static SizeConfig of(BuildContext context) =>
SizeConfig(mediaQueryData: MediaQuery.of(context));
double dynamicScaleSize({double size, double scaleFactorTablet, double scaleFactorMini}) {
if(isTablet()) {
final scaleFactor = scaleFactorTablet ?? 2;
return size * scaleFactor;
}
if(isMini()) {
final scaleFactor = scaleFactorMini ?? 0.8;
return size * scaleFactor;
}
return size;
}
/// Defines device type based on logical device pixels. Bigger than 600 means it is a tablet
bool isTablet() {
final shortestSide = mediaQueryData.size.shortestSide;
return shortestSide > 600;
}
/// Defines device type based on logical device pixels. Less or equal than 320 means it is a mini device
bool isMini() {
final shortestSide = mediaQueryData.size.shortestSide;
return shortestSide <= 320;
}
}
O SizeConfig
acima mantém por padrão um fator de multiplicação de 2 para tablets e 0.8 para mini, valores baseados em minha experiência própria de utilização. Também é possível passar um valor customizado, dependendo da utilização.
Se houver a necessidade de incluir outros tamanhos de tela essa mesma classe pode ser alterada, mas até o momento não encontrei essa necessidade.
É possível inicializá-lo com o construtor, ou utilizar diretamente com o of()
:
final sizeConfig = SizeConfig(mediaQueryData: MediaQuery.of(context));
SizeConfig.of(context);
Na prática:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Stack(
children: <Widget>[SizeWidget()],
),
);
}
}
class SizeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final sizeConfig = SizeConfig(mediaQueryData: MediaQuery.of(context));
return SafeArea(
child: Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
color: Colors.blue,
width: sizeConfig.dynamicScaleSize(size: 50),
height: sizeConfig.dynamicScaleSize(size: 50),
),
SizedBox(
height: sizeConfig.dynamicScaleSize(size: 40, scaleFactorTablet: 3.5),
width: sizeConfig.dynamicScaleSize(size: 40, scaleFactorTablet: 2),
child: Container(
color: Colors.red,
),
),
Text(
'Tamanho do Texto',
style: TextStyle(fontSize: SizeConfig.of(context).dynamicScaleSize(size: 20, scaleFactorTablet: 2)),
)
],
),
),
));
}
}
Resultado em um celular 'normal':

No tablet sem o fator de escala e com fator de escala:

o/