Wie kann ich Widgets basierend auf der Größe des übergeordneten Elements erstellen?

Question

Angenommen, Sie haben ein übergeordnetes Widget mit variabler Größe.

Zum Beispiel:

var container = new Container(
    height: 200.0, // Imagine this might change 
    width: 200.0, // Imagine this might change 
    // Imagine content in this container will 
    // depend on the parent container 
    child: new Container(), 
); 

Und vielleicht wollen Sie das Kind des übergeordneten Container haben, zu machen, etwas anderes auf, was die Größe, dass es gegeben hat.

Denken Sie an responsive Design Breakpoints, wenn die Breite über X ist, verwenden Sie dieses Layout, wenn die Breite unter X dieses Layout verwenden.

Was ist der beste Weg, dies in Flutter zu tun?

Answer 1

Sie möchten das Widget LayoutBuilder verwenden, das "zur Layout-Zeit" erstellt und die Einschränkungen des übergeordneten Widgets bereitstellt. "

Der LayoutBuilder übernimmt eine Build-Funktion, die den Standard BuildContext zusammen mit den BoxConstraints als Parameter verwendet, die verwendet werden können, um Widgets basierend auf der Größe dynamisch zu rendern.

Lässt sich ein einfaches Widget erstellen, das "LARGE" darstellt, wenn die Elternbreite größer als 200dp ist und "SMALL", wenn die Elternbreite kleiner oder gleich ist.

var container = new Container(
    // Toggling width from 100 to 300 will change what is rendered 
    // in the child container 
    width: 100.0, 
    // width: 300.0 
    child: new LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) { 
     if(constraints.maxWidth > 200.0) { 
     return new Text('BIG'); 
     } else { 
     return new Text('SMALL'); 
     } 
    } 
), 
);