Lernen Layout System: Row, Column, Stack

Definition

Layout widgets are Flutter widgets that arrange their child widgets in a specific manner, controlling the position and size of each child within the parent.

When you want to lay out widgets horizontally, use the Row widget. The mainAxisAlignment property controls how the children are spaced along the main axis, which is horizontal for Row. You can align children to the start, end, center, or space them evenly.

main.dart


              1234567891011121314151617
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('Hello'),
            Text('World'),
          ],
        ),
      ),
    ),
  ));
}

To arrange widgets vertically, use the Column widget. The crossAxisAlignment property determines how children are aligned across the horizontal axis. For instance, you can align them to the start, end, or center of the column.

main.dart


              123456789101112131415161718192021
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('First'),
            SizedBox(height: 20),
            Text('Second'),
            SizedBox(height: 20),
            Text('Third'),
          ],
        ),
      ),
    ),
  ));
}

If you need to overlap widgets, the Stack widget is the right choice. Stack allows you to place widgets on top of each other and position them using the Positioned widget.

main.dart


              12345678910111213141516171819202122232425
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Stack(
          children: [
            Container(width: 100, height: 100, color: Colors.blue),
            Positioned(
              left: 20,
              top: 20,
              child: Container(width: 60, height: 60, color: Colors.red),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: Text('Stacked'),
            ),
          ],
        ),
      ),
    ),
  ));
}

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 2

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Swipe um das Menü anzuzeigen

Definition

Layout widgets are Flutter widgets that arrange their child widgets in a specific manner, controlling the position and size of each child within the parent.

main.dart


              1234567891011121314151617
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('Hello'),
            Text('World'),
          ],
        ),
      ),
    ),
  ));
}

main.dart


              123456789101112131415161718192021
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('First'),
            SizedBox(height: 20),
            Text('Second'),
            SizedBox(height: 20),
            Text('Third'),
          ],
        ),
      ),
    ),
  ));
}

If you need to overlap widgets, the Stack widget is the right choice. Stack allows you to place widgets on top of each other and position them using the Positioned widget.

main.dart


              12345678910111213141516171819202122232425
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Stack(
          children: [
            Container(width: 100, height: 100, color: Colors.blue),
            Positioned(
              left: 20,
              top: 20,
              child: Container(width: 60, height: 60, color: Colors.red),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: Text('Stacked'),
            ),
          ],
        ),
      ),
    ),
  ));
}

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 2