Введение в виджеты

Центральным элементом приложения на Flutter являются виджеты. Фактически это те визуальные компоненты, из которых состоит графический интерфейс.

Рассмотрим простейший пример. Прежде всего создадим новый проект Flutter.

По умолчанию код приложения размещается в файле lib/main.dart. Откроем этот файл и изменим его содержимое:

import 'package:flutter/material.dart';

void main() {
  runApp(
    Text(
        'Привет Flutter!',
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center,
    ),
  );
}

Выполнение приложения Flutter начинается с функции main. Для создания графического интерфейса в этой функции вызывается другая встроенная функция - runApp(Widget app). Она прикрепляет определенный виджет к экрану. То есть по сути это, что мы видим при запуске приложения на экране устройства. Прикрепляемый виджет передается в функцию runApp() в качестве параметра.

Все виджеты наследуется от класса Widget. В данном случае в функцию runApp передается виджет Text, который предназначен для вывода текста на экран. Через конструктор этого класса устанавливаются три его свойства. Прежде всего отображаемый текст, для которого передается строка 'Привет Flutter!'. И также устанавливаются свойство textDirection, которое задает направление текста и принимает значение TextDirection.ltr (направление текста слева направо), и свойство textAlign, которое задает выравнивание текста по горизонтали и принимает значение TextAlign.center (то есть текст выравнивается по центру).

После изменения кода Android Studio может подчеркивать папку с файлами тестов как некорректную, поскольку мы изменили код программы, не изменив файл тестов:

Но на данный момент можно не обращать внимание на этот момент. Более того файл widget_test.dart можно пока вовсе удалить.

Итак, мы определили самое минимальное приложение Flutter. В итоге при запуске приложения мы увидим вверху по центру устройства искомый текст:

Одни виджеты могут включать другие, образуя тем самым иерархическую систему в виде дерева. Например, разместим текст по центру экрана по вертикали. Для этого воспользуемся виджетом Align:

import 'package:flutter/material.dart';

void main() {
  runApp(
    Align(
      alignment: Alignment.center,
      child:Text(
          'Привет Flutter!',
          textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Теперь корневым виджетом, который передается в функцию runApp, является виджет Align. С помощью свойства alignment задается выравнивание вложенных элементов. В данном случае значение Alignment.center указывает, что выравнивание будет идти по центру как по горизонтали, так и по вертикали.

Другое свойство - child представляет вложенный виджет - в данном случае ранее использовавшийся виджет Text.

Когда мы запустим приложение, по сути мы увидим виджет Align, внутри которого расположен виджет Text: