Spacer schafft Abstand

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 4 von 30.

Eine obere Leiste hat oft links ein Logo und rechts Links. Ein Spacer sorgt dafür: Es ist ein leeres Widget, das den gesamten verbleibenden Platz in der Zeile einnimmt und alles, was danach kommt, ans andere Ende schiebt.

Row(
  children: [
    const Text('Logo'),
    const Spacer(),
    const Text('Cart'),
  ],
)

Der Spacer kommt genau dorthin, wo der Abstand sein soll. Widgets davor bleiben links, Widgets danach wandern nach rechts, und der Abstand zwischen benachbarten Widgets auf derselben Seite bleibt so, wie du ihn festgelegt hast.

mainAxisAlignment: MainAxisAlignment.spaceBetween verteilt stattdessen alle Kinder mit Abstand zueinander. Verwende einen Spacer, wenn nur ein Abstand wachsen soll.

Aufgabe

Einfach

Platziere Coddy links und schiebe Help und Log in an den rechten Rand, weiterhin mit einem Abstand von 16 Pixeln.

Probier es selbst

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.fromLTRB(16, 48, 16, 16),
          child: Column(
            children: [
              Row(
                children: [
                  const Text(
                    'Coddy',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const Text('Help'),
                  const SizedBox(width: 16),
                  const Text('Log in'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}