Naprawa przepełnienia: zawijanie

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 8 z 30.

Niektóre wiersze zawierają elementy, które powinny układać się jak słowa w zdaniu: tagi, filtry, etykiety. Gdy jest ich za dużo, by zmieściły się w jednym wierszu, element Row wykracza poza jego prawą krawędź.

Wrap przyjmuje tę samą listę children: i gdy kolejny element nie mieści się w wierszu, rozpoczyna nowy wiersz pod nim:

Wrap(
  children: [
    for (final tag in tags) Text(tag),
  ],
)

To trzecie rozwiązanie problemu przepełnienia. Użyj Expanded, gdy jeden element powinien się zmniejszyć, widoku przewijania, gdy strona jest dłuższa niż ekran, oraz Wrap, gdy elementy powinny przejść do następnego wiersza.

Wrap zachowuje rozmiar, którego potrzebuje każdy element. Nigdy ich nie ściska — jedynie przenosi je niżej.

Wyzwanie

Łatwy

Tagi przelewają się po prawej stronie. Ułóż je w tylu wierszach, ilu potrzeba, tak jak słowa w akapicie.

Spróbuj swoich sił

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final tags = ['Dart', 'Flutter', 'Mobile', 'Design', 'Games', 'Web'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Interests')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            children: [
              for (final tag in tags)
                Container(
                  width: 110,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Colors.purple.shade100,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Center(child: Text(tag)),
                ),
            ],
          ),
        ),
      ),
    );
  }
}