Wieso wird mein Column nach einer Row nicht in Flutter angezeigt?

Hallo, ich habe ein Programm das so aussehen soll:

Ich habe diesen Code:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            children: <Widget>[
              Container(
                width: 100,
                color: Colors.red,
              ),

              Column(
                children: <Widget>[
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.yellow,
                  ),
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ),
              Container(
                width: 100,
                color: Colors.yellowAccent,
                  ),
                ],
              ),
            ],
          )
          ),
        ),
      );
  }
}

Der letzte Container (yellowAccent) wird nicht angezeigt auf dem Emulator. Kann mir bitte jemand helfen?

Mfg Elias Brüggen

Answer 1

[tide1109]

Nach der Dokumentation vom Container ist es das richtige Verhalten.

If the widget has no child, no `height`, no `width`, no [constraints], and the parent provides unbounded constraints, then [Container] tries to size as small as possible.

Dokumentation im Web

Width ist gesetzt, aber height, constraints und child ist nicht gesetzt. Da der Container ein child von Column ist, hat der Container in der Höhe unbounded constraints. Dieser Abschnitt trifft also zu. Das Resultat ist, dass der Container eine Höhe von 0 hat und dementsprechend nicht gesehen werden kann, obwohl er im Widget Tree existiert.

Wenn es nach deinem Screenshot aussehen soll, müsste die Farbe auch Blau und kein Gelb sein. Dazu muss der gelbe bzw. blaue Container ein child von der Row werden. Damit die Positionierung passt, muss sich die mittlere Spalte ausdehnen (Expanded Widget) und die mittlere Spalte zentriert ausgerichtet werden.

Das wäre die Umsetzung mit meinen Vorschlägen:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            children: <Widget>[
              Container(
                width: 100,
                color: Colors.red,
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      width: 100,
                      height: 100,
                      color: Colors.yellow,
                    ),
                    Container(
                      width: 100,
                      height: 100,
                      color: Colors.green,
                    ),

                  ],
                ),
              ),
              Container(
                width: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

[Babelfish]

Du hast für das letzte Element keine Höhe angegeben.

Woher ich das weiß: Berufserfahrung – Entwickle Anwendungen für iOS, iPadOS und macOS beruflich.