Ответ 1

FractionallySizedBox также может быть полезен. Вы также можете прочитать ширину экрана непосредственно из MediaQuery.of(context).size и создать размерное поле на основе этого

MediaQuery.of(context).size.width * 0.65

если вы действительно хотите, чтобы размер как часть экрана независимо от того, что макет.

Ответ 2

Это может быть немного яснее:

double width = MediaQuery.of(context).size.width;

double yourWidth = width * 0.65;

Надеюсь, что это решило вашу проблему.

Ответ 3

Это дополнительный ответ, демонстрирующий реализацию нескольких упомянутых решений.

FractionallySizedBox

Если у вас есть один виджет, вы можете использовать виджет FractionallySizedBox чтобы указать процент от доступного пространства для заполнения. Здесь зеленый Container настроен на заполнение 70% доступной ширины и 30% от доступной высоты.

Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child: Container(
      color: Colors.green,
    ),
  );
}

расширенный

Expanded виджет позволяет виджету заполнять доступное пространство, горизонтально, если оно находится в строке, или вертикально, если оно находится в столбце. Вы можете использовать свойство flex с несколькими виджетами, чтобы придать им вес. Здесь зеленый Container занимает 70% от ширины, а желтый Container занимает 30% от ширины.

Если вы хотите сделать это вертикально, просто замените Row на Column.

Widget myWidget() {
  return Row(
    children: <Widget>[
      Expanded(
        flex: 7,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 3,
        child: Container(
          color: Colors.yellow,
        ),
      ),
    ],
  );
}

Дополнительный код

Вот main.dart код для вашей справки.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("FractionallySizedBox"),
        ),
        body: myWidget(),
      ),
    );
  }
}

// replace with example code above
Widget myWidget() {
  return ...
}

Ответ 4

Вы можете создать колонку/строку с гибкими или расширенными дочерними элементами, которые имеют значения гибкости, которые составляют до требуемого процента.

Вы также можете найти виджет AspectRatio.

Ответ 5

MediaQuery.of(context).size.width

Ответ 6

вы можете использовать MediaQuery с текущим контекстом вашего виджета и получить ширину или высоту, подобную этой double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height после этого вы можете умножить это с процентом, который вы хотите

Ответ 7

Если вы используете GridView, вы можете использовать что-то вроде решения Яна Хиксона.

crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4

Ответ 8

Сначала получите размер экрана.

Size size = MediaQuery.of(context).size;

После этого вы можете получить width и умножить ее на 0.5 чтобы получить 50% ширины экрана.

double width50 = size.width * 0.5;

Но проблема обычно возникает в height, по умолчанию, когда мы используем

double screenHeight = size.height;

Высота мы получаем глобальный рост, который включает в себя StatusBar + notch + AppBar высоту. Итак, для того, чтобы получить левую высоту устройства, мы должны вычесть padding высоту (StatusBar + notch) и AppBar высоту от общей высоты. Вот как мы это делаем.

double abovePadding = MediaQuery.of(context).padding.top;
double appBarHeight = appBar.preferredSize.height;
double leftHeight = screenHeight - abovePadding - appBarHeight;

Теперь мы можем использовать следующее, чтобы получить 50% высоты экрана.

double height50 = leftHeight * 0.5