Виджеты во Flutter создаются с использованием современного фреймворка, начало которого идет от React. Основная идея заключается в том, что вы создаете свой пользовательский интерфейс из виджетов. Виджеты описывают, как должен выглядеть их вид, учитывая их текущую конфигурацию и состояние. Когда состояние виджета изменяется, виджет перестраивает свое описание, которым фреймворк и отличается от предыдущего описания, чтобы определить минимальные изменения, необходимые в базовом рендеринге для перехода из одного состояния в другое.
Hello World
Минимальное приложение Flutter просто вызывает функцию runApp () с виджетом:
import ‘package:flutter/material.dart’;
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}Функция runApp () берет данный виджет и делает его корнем виджета. В этом примере виджеты состоят из двух виджетов, виджета Center и его дочернего элемента, виджета Text. В то время, когда фреймворк заставляет виджет закрывать экран, текст «Hello, world» оказывается в центре экрана. Направление текста должно быть указано в этом случае; при использовании виджета MaterialApp о направлении не нужно будет задумываться.
При написании приложения вы обычно создаете новые виджеты, которые являются подклассами StatelessWidget или StatefulWidget, в зависимости от того, управляет ли ваш виджет каким-либо состоянием. Основная задача виджета – реализовать функцию build (), которая описывает виджет в терминах других виджетов более низкого уровня. Фреймворк строит эти виджеты по очереди до тех пор, пока процесс не достигнет нижнего уровня в виджетах, представляющих базовый объект RenderObject, который вычисляет и описывает геометрию виджета.
Основные виджеты
Flutter поставляется с набором мощных базовых виджетов, из которых обычно используются следующие:
Text
Виджет Text позволяет вам создавать текстовые стили в вашем приложении.
Row, Column
Эти виджеты позволяют создавать гибкие макеты как в горизонтальном (Row), так и в вертикальном (Column) направлениях. Дизайн этих объектов основан на макете веб-дизайна flexbox.
Stack
Вместо линейной ориентации (по горизонтали или вертикали), виджет Stack позволяет размещать виджеты друг над другом в порядке рисования. Затем можно использовать виджет Positioned для дочерних элементов Stack, чтобы расположить их относительно верхнего, правого, нижнего или левого края стека. Стеки основаны на модели макета абсолютного позиционирования в Интернете.
Container
Виджет Container позволяет создавать прямоугольный визуальный элемент. Контейнер может быть украшен с помощью BoxDecoration, например фон, рамка или тень. Container также может иметь поля, отступы и ограничения, применяемые к его размеру. Кроме того, Conctainer может быть преобразован в трехмерном пространстве с использованием матрицы.
Ниже приведены несколько простых виджетов, которые объединяют эти и другие виджеты:
import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget {
MyAppBar({this.title});
// Fields in a Widget subclass are always marked "final".
final Widget title;
@override
Widget build(BuildContext context) {
return Container(
height: 56.0, // in logical pixels
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(color: Colors.blue[500]),
// Row is a horizontal, linear layout.
child: Row(
// <Widget> is the type of items in the list.
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null disables the button
),
// Expanded expands its child to fill the available space.
Expanded(
child: title,
),
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
);
}
}
class MyScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Material is a conceptual piece of paper on which the UI appears.
return Material(
// Column is a vertical, linear layout.
child: Column(
children: <Widget>[
MyAppBar(
title: Text(
'Example title',
style: Theme.of(context).primaryTextTheme.headline6,
),
),
Expanded(
child: Center(
child: Text('Hello, world!'),
),
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
title: 'My app', // used by the OS task switcher
home: MyScaffold(),
));
}Убедитесь, что в разделе «flutter» файла pubspec.yaml есть запись uses-material-design: true. Позволит использовать предопределенный набор значков Material.
name: my_app flutter: uses-material-design: true
Многие виджеты Material Design должны быть внутри MaterialApp для правильного отображения, чтобы наследовать данные темы. Поэтому запустите приложение с MaterialApp.
Виджет MyAppBar создает Container с высотой 56 независимых от устройства пикселей с внутренним заполнением 8 пикселей, как слева, так и справа. Внутри контейнера MyAppBar использует макет Row для организации своих дочерних элементов. Средний дочерний элемент, виджет Title, помечается как Expanded, что означает, что он расширяется, чтобы заполнить все оставшееся доступное пространство, которое не было использовано другими дочерними элементами. Вы можете иметь несколько дочерних элементов Expanded и определить соотношение, в котором они используют доступное пространство, используя аргумент flex для Expanded.
Виджет MyScaffold упорядочивает свои дочерние элементы в вертикальном столбце. В верхней части столбца он размещает экземпляр MyAppBar, передавая панели приложения виджет Text для использования в качестве заголовка. Передача виджетов в качестве аргументов другим виджетам – это мощная техника, позволяющая создавать универсальные виджеты, которые можно использовать различными способами. Наконец, MyScaffold использует Expanded, чтобы заполнить оставшееся пространство своим телом, которое состоит из центрированного сообщения.
