Menu
CoddyTech

Spacer раздвигает элементы

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 4 из 30.

В верхней панели часто слева размещают логотип, а справа — ссылки. Spacer делает именно это: это пустой виджет, который занимает всё оставшееся место в строке и сдвигает всё, что находится после него, к другому краю.

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

Spacer размещается именно там, где должен быть промежуток. Виджеты перед ним остаются слева, виджеты после него перемещаются вправо, а расстояние между соседними виджетами с одной стороны остаётся таким, каким вы его задали.

mainAxisAlignment: MainAxisAlignment.spaceBetween вместо этого равномерно распределяет все дочерние элементы. Используйте Spacer, когда нужно увеличить только один промежуток.

challenge icon

Задание

Легко

Оставь Coddy слева, а Help и Log in перемести к правому краю, сохранив расстояние между ними 16 пикселей.

Попробуйте сами

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'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Адаптивная компоновка

Потренируйтесь самостоятельно: Онлайн-компилятор Flutter