Existe uma maneira simples (não-LayoutBuilder) de dimensionar um elemento em relação ao tamanho da tela (largura / altura)? Por exemplo: como faço para definir a largura de um CardView como 65% da largura da tela.
Isso não pode ser feito dentro do build
método (obviamente), portanto, teria que ser adiado até a pós-compilação. Existe um lugar preferido para colocar uma lógica como essa?
Respostas:
FractionallySizedBox
também pode ser útil. Você também pode ler a largura da tela diretamenteMediaQuery.of(context).size
e criar uma caixa de tamanho com base nessase você realmente deseja dimensionar como uma fração da tela, independentemente do layout.
fonte
Esta é uma resposta suplementar, mostrando a implementação de algumas das soluções mencionadas.
FractionallySizedBox
Se você tiver um único widget, poderá usá-lo
FractionallySizedBox
para especificar uma porcentagem do espaço disponível para preencher. Aqui, o verdeContainer
é definido para preencher 70% da largura disponível e 30% da altura disponível.Expandido
O
Expanded
widget permite que ele preencha o espaço disponível, horizontalmente, se estiver em uma linha, ou verticalmente, se estiver em uma coluna. Você pode usar aflex
propriedade com vários widgets para fornecer pesos a eles. Aqui, o verdeContainer
ocupa 70% da largura e o amareloContainer
ocupa 30% da largura.Se você quiser fazer isso verticalmente, substitua-o
Row
porColumn
.Código suplementar
Aqui está o
main.dart
código para sua referência.fonte
Dialog
estilo :)Isso pode ser um pouco mais claro:
Espero que isso tenha resolvido o seu problema.
fonte
Você pode criar uma coluna / linha com filhos flexíveis ou expandidos que tenham valores flexíveis que somam as porcentagens desejadas.
Você também pode achar útil o widget AspectRatio .
fonte
fonte
Há muitas maneiras de fazer isso
1. Usando o MediaQuery: retorna a tela cheia do seu dispositivo, incluindo barra de aplicativos, barra de ferramentas
2. Usando o Expanded: você pode definir a largura / altura na proporção
3. Outros, como Flexible e AspectRatio e FractionallySizedBox
fonte
você pode usar o MediaQuery com o contexto atual do seu widget e obter largura ou altura assim,
double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height
depois disso, pode multiplicá-lo pela porcentagem desejadafonte
Primeiro obtenha o tamanho da tela.
Depois disso, você pode obtê
width
-lo e multiplicá-lo0.5
para obter 50% da largura da tela.Mas o problema geralmente aparece
height
, por padrão, quando usamosA altura que obtemos é a altura global, que inclui
StatusBar
+notch
+AppBar
altura. Portanto, para obter a altura esquerda do dispositivo, precisamos subtrair apadding
altura (StatusBar
+notch
) e aAppBar
altura da altura total. Aqui está como fazemos.Agora podemos usar o seguinte para obter 50% da nossa tela em altura.
fonte
se você estiver usando o GridView, poderá usar algo como a solução de Ian Hickson.
fonte
Use o Widget LayoutBuilder que fornecerá restrições que você pode usar para obter a altura que exclui o AppBar e o preenchimento. Em seguida, use uma SizedBox e forneça a largura e a altura usando as restrições do LayoutBuilder
fonte