Menu
CoddyTech

Дерево виджетов

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

Виджеты располагаются внутри других виджетов. Виджет, содержащий другой виджет, передаёт его в child:, например в Center:

Center(
  child: Text('Hello'),
)

Center сам ничего не рисует. Он берёт дочерний виджет и помещает его в центр доступного ему пространства. Без него текст находится в верхнем левом углу.

Виджеты внутри виджетов, вложенных в другие виджеты, образуют дерево виджетов. В вашем приложении дерево состоит из MaterialApp, затем Scaffold, а затем из всего, что вы поместите в его body:. Дочерний виджет каждого виджета записывается внутри его скобок, поэтому скобки показывают дерево. Запятые в конце каждой строки делают код аккуратнее.

challenge icon

Задание

Легко

Текст застрял в верхнем левом углу. Оберни его в Center, чтобы он оказался посередине экрана:

  • замени body: Text('Right in the middle'), на Center, у которого child: — это этот Text

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

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: Text('Right in the middle'),
      ),
    );
  }
}
quiz iconПроверьте себя

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

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

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