Menu
CoddyTech

Строки внутри столбцов

Часть раздела Ваше первое приложение путешествия по Flutter на Coddy. Урок 24 из 32.

Row может быть одним из дочерних элементов Column. Так на экране появляются строки с несколькими элементами:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Pancakes'),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('20 min'),
        SizedBox(width: 12),
        Text('Easy'),
      ],
    ),
  ],
)

mainAxisSize: MainAxisSize.min делает строку или столбец размером только с их дочерние элементы, вместо того чтобы занимать всё предоставленное пространство. Здесь это позволяет разместить оба элемента по центру экрана.

challenge icon

Задание

Легко

Преврати это в небольшой заголовок профиля:

  • оставь Ada Lovelace на первой строке
  • размести London и 1815 рядом друг с другом под ним, в Row

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

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: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Ada Lovelace', style: TextStyle(fontSize: 28)),
              Text('London'),
              Text('1815'),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconПроверьте себя

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

Все уроки раздела Ваше первое приложение

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