Как задать размеры элементов на основе процента от ширины или высоты экрана в Flutter?

В Flutter можно задавать размеры элементов на основе процента от ширины или высоты экрана с помощью класса MediaQuery. MediaQuery.of(context).size предоставляет вам размер экрана, который можно использовать для вычисления размера ваших виджетов.

Вот как это сделать:

1. Ширина как процент от ширины экрана:

   Container(
     width: MediaQuery.of(context).size.width * 0.5, // 50% ширины экрана
     height: 100.0,
     color: Colors.blue,
     child: Center(child: Text('50% ширины')),
   );
   

2. Высота как процент от высоты экрана:

   Container(
     width: 100.0,
     height: MediaQuery.of(context).size.height * 0.3, // 30% высоты экрана
     color: Colors.green,
     child: Center(child: Text('30% высоты')),
   );
   

3. И ширина, и высота как процент:

   Container(
     width: MediaQuery.of(context).size.width * 0.8, // 80% ширины экрана
     height: MediaQuery.of(context).size.height * 0.4, // 40% высоты экрана
     color: Colors.orange,
     child: Center(child: Text('80% ширины и 40% высоты')),
   );
   

Умножая ширину или высоту экрана на процент (от 0 до 1), вы можете задавать размеры элементов соответственно. Эти значения можно динамически изменять в зависимости от требований макета вашего приложения.