L'equivalente di wrap_content e match_parent in flutter?

In Android match_parente wrap_contentvengono utilizzati per ridimensionare automaticamente i widget rispetto al loro genitore al contenuto che il widget contiene.

In Flutter sembra che per impostazione predefinita tutti i widget siano impostati su wrap_content, come lo cambierei in modo tale da poterlo riempire widthe heightquello del suo genitore?

Puoi farlo con un piccolo trucco: supponi di avere i requisiti di: (Larghezza, Altezza)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

Al fine di ottenere un comportamento per match_parent e wrap_content abbiamo bisogno di usare mainAxisSize proprietà a riga / colonna widget, il mainAxisSize proprietà assume MainAxisSize enum avere due valori che è MainAxisSize.min che si comporta come wrap_content e MainAxisSize.max che si comporta come match_parent .

Link dell'articolo originale

La risposta breve è che il genitore non ha una taglia finché il bambino non ha una taglia.

Il modo in cui il layout funziona in Flutter è che ogni widget fornisce vincoli a ciascuno dei suoi figli, come "puoi essere così largo, devi essere così alto, devi essere almeno così largo", o qualsiasi altra cosa (in particolare, loro ottenere una larghezza minima, una larghezza massima, un'altezza minima e un'altezza massima). Ogni bambino accetta quei vincoli, fa qualcosa e sceglie una dimensione (larghezza e altezza) che corrisponde a quei vincoli. Quindi, una volta che ogni bambino ha fatto le sue cose, il widget può scegliere la propria dimensione.

Alcuni widget cercano di essere grandi quanto il genitore lo consente. Alcuni widget cercano di essere piccoli quanto il genitore lo consente. Alcuni widget cercano di abbinare una certa dimensione "naturale" (ad esempio testo, immagini).

Alcuni widget dicono ai loro figli che possono essere di qualsiasi dimensione desiderino. Alcuni danno ai loro figli gli stessi vincoli che hanno ricevuto dai loro genitori.

In realtà sono disponibili alcune opzioni:

Puoi utilizzare SizedBox.expand per fare in modo che il tuo widget corrisponda alle dimensioni principali, o SizedBox (width: double.infinity) per abbinare solo la larghezza o SizedBox (heigth: double.infinity) per abbinare solo l'altezza.

Se vuoi un comportamento wrap_content dipende dal widget genitore che stai utilizzando, ad esempio se metti un pulsante su una colonna si comporterà come wrap_content e per usarlo come match_parent puoi avvolgere il pulsante con un widget Expanded o un sizebox.

Con un ListView il pulsante ottiene un comportamento match_parent e per ottenere un comportamento wrap_content puoi avvolgerlo con un widget Flex come Row.

L'uso di un widget espanso fa espandere un elemento figlio di una riga, una colonna o un flessibile per riempire lo spazio disponibile nell'asse principale (ad esempio, orizzontalmente per una riga o verticalmente per una colonna). https://docs.flutter.io/flutter/widgets/Expanded-class.html

L'utilizzo di un widget flessibile offre a un figlio di una riga, una colonna o un flessibile la flessibilità di espandersi per riempire lo spazio disponibile nell'asse principale (ad esempio, orizzontalmente per una riga o verticalmente per una colonna), ma, a differenza di espanso, flessibile non lo fa richiedere al bambino di riempire lo spazio disponibile. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Una semplice soluzione alternativa:

Se un contenitore ha un solo elemento secondario di primo livello, è possibile specificare la proprietà di allineamento per l'elemento secondario e assegnargli qualsiasi valore disponibile. riempirà tutto lo spazio nel contenitore.

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

Un altro modo:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

Ho usato questa soluzione, devi definire l'altezza e la larghezza del tuo schermo usando MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

Usa il widget Wrap.

Per Columnun comportamento simile prova:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

Per Rowun comportamento simile prova:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

Per ulteriori informazioni: Wrap (Flutter Widget)

Usa questa riga di codici all'interno della colonna. Per wrap_content: mainAxisSize: MainAxisSize.min Per match_parent:mainAxisSize: MainAxisSize.max

In realtà esiste un modo molto semplice e accurato per farlo.

Usa FractionallySizedBoxwidget.

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

Questo widget è anche molto utile quando vuoi ridimensionare tuo figlio a una frazione delle dimensioni del suo genitore.

Esempio:

Se vuoi che il bambino occupi il 50% della larghezza del genitore, fornisci widthFactorcome0.5

Per fare in modo che un bambino riempia il suo genitore, avvolgilo semplicemente in un FittedBox

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )