Esiste un modo semplice (non LayoutBuilder) per ridimensionare un elemento rispetto alla dimensione dello schermo (larghezza / altezza)? Ad esempio: come posso impostare la larghezza di un CardView al 65% della larghezza dello schermo.

Non può essere fatto all'interno del buildmetodo (ovviamente), quindi dovrebbe essere rinviato fino a dopo la compilazione. C'è un posto preferito per mettere la logica in questo modo?

FractionallySizedBoxpuò anche essere utile. Puoi anche leggere la larghezza dello schermo direttamente da MediaQuery.of(context).sizee creare un riquadro di dimensioni basato su quello

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

se vuoi davvero ridimensionare come una frazione dello schermo indipendentemente dal layout.

Questa è una risposta supplementare che mostra l'implementazione di un paio delle soluzioni menzionate.

FractionallySizedBox

Se si dispone di un singolo widget, è possibile utilizzare un FractionallySizedBoxwidget per specificare una percentuale dello spazio disponibile da riempire. Qui il verde Containerè impostato per riempire il 70% della larghezza disponibile e il 30% dell'altezza disponibile.

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

allargato

Il Expandedwidget consente a un widget di riempire lo spazio disponibile, in orizzontale se si trova in una riga o in verticale se si trova in una colonna. È possibile utilizzare la flexproprietà con più widget per assegnare loro pesi. Qui il verde Containeroccupa il 70% della larghezza e il giallo Containeroccupa il 30% della larghezza.

Se vuoi farlo verticalmente, sostituiscilo Rowcon Column.

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

Codice supplementare

Ecco il main.dartcodice per il tuo riferimento.

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 ...
}

Questo potrebbe essere un po 'più chiaro:

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

double yourWidth = width * 0.65;

Spero che questo abbia risolto il tuo problema.

È possibile creare una colonna / riga con figli flessibili o espansi con valori flessibili che si sommano alle percentuali desiderate.

È inoltre possibile trovare utile il widget AspectRatio .

MediaQuery.of(context).size.width

Esistono molti modi per farlo

1. Utilizzo di MediaQuery: restituisce lo schermo intero del dispositivo tra cui barra delle applicazioni, barra degli strumenti

 Container(
        width: MediaQuery.of(context).size.width * 0.50,
        height: MediaQuery.of(context).size.height*0.50, 
        color: Colors.blueAccent[400],
 )

2. Utilizzo di Espanso: è possibile impostare larghezza / altezza nel rapporto

 Container(
        height: MediaQuery.of(context).size.height * 0.50,
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 70,
              child: Container(
                color: Colors.lightBlue[400],
              ),
            ),
            Expanded(
              flex: 30,
              child: Container(
                color: Colors.deepPurple[800],
              ),
            )
          ],
        ),
    )

3. Altri, come flessibile e aspectRatio e FractionallySizedBox

puoi usare MediaQuery con il contesto attuale del tuo widget e ottenere larghezza o altezza come questa double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height dopo, puoi moltiplicarlo per la percentuale che desideri

Per prima cosa prendi le dimensioni dello schermo.

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

Dopodiché puoi ottenerlo widthe moltiplicarlo con 0.5per ottenere il 50% della larghezza dello schermo.

double width50 = size.width * 0.5;

Ma il problema generalmente si presenta height, di default quando usiamo

double screenHeight = size.height;

L'altezza che otteniamo è l'altezza globale che include StatusBar+ notch+ AppBaraltezza. Quindi, per ottenere l'altezza sinistra del dispositivo, dobbiamo sottrarre l' paddingaltezza ( StatusBar+ notch) e l' AppBaraltezza dall'altezza totale. Ecco come lo facciamo.

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

Ora possiamo usare follow per ottenere il 50% del nostro schermo in altezza.

double height50 = leftHeight * 0.5

se stai usando GridView puoi usare qualcosa come la soluzione di Ian Hickson.

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

Usa il Widget LayoutBuilder che ti darà i vincoli che puoi usare per ottenere l'altezza che esclude la AppBar e il riempimento. Quindi utilizzare un SizedBox e fornire la larghezza e l'altezza utilizzando i vincoli di LayoutBuilder

return LayoutBuilder(builder: (context2, constraints) {
  return Column(
    children: <Widget>[
      SizedBox(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        ...