На всю ширину: double.infinity

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

Ширина кнопки равна ширине её надписи. На странице входа часто нужно, чтобы она растягивалась на всю ширину страницы, как поля над ней.

Оберните её в SizedBox, ширина которого равна double.infinity:

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('Continue'),
  ),
)

double.infinity — это число в Dart, которое больше любого другого. Ни один блок не может быть такой ширины, поэтому Flutter делает его настолько широким, насколько позволяет родительский элемент: здесь — страница внутри отступов. На более широком телефоне кнопка становится шире.

Используйте это только для одного направления за раз. Высота double.infinity внутри Column означает запрос бесконечной высоты, и Flutter останавливается с ошибкой.

Задание

Легко

Сделайте кнопку Sign in такой же ширины, как расположенное над ней поле электронной почты, сохранив её обычную высоту.

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

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(
        appBar: AppBar(title: const Text('Welcome back')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              const TextField(
                decoration: InputDecoration(labelText: 'Email'),
              ),
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Sign in'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}