Виджет Scaffold

Виджет Scaffold задаёт каркас экрана в приложении на Material. Верхнюю панель кладут в appBar, основной блок - в body, выезжающее меню - в drawer, круглую кнопку - в floatingActionButton, нижнюю навигацию - в bottomNavigationBar. Состояние экрана ищут через of.

Синтаксис

Scaffold(
	appBar: AppBar(title: Text('abcde')),
	body: Text('12345'),
)

Параметры

Параметр	Описание
`appBar`	Верхняя панель. Обычно `AppBar`.
`body`	Главное содержимое под панелями.
`drawer`	Боковая панель слева. Принимает `Drawer`.
`floatingActionButton`	Круглая кнопка действия в углу экрана.
`bottomNavigationBar`	Нижние вкладки. Принимает `BottomNavigationBar`.

Методы

Метод	Описание
`of`	Возвращает `ScaffoldState` ближайшего `Scaffold`.

Пример

Давайте соберём экран с AppBar и телом:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: Text('abcde')),
				body: Center(child: Text('12345')),
			),
		),
	);
}

На экране сверху панель с заголовком 'abcde', по центру тела - строка '12345'.

Пример

Давайте добавим круглую кнопку в правый нижний угол:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(child: Text('abcde')),
				floatingActionButton: FloatingActionButton(
					onPressed: () {},
					child: Icon(Icons.add),
				),
			),
		),
	);
}

На экране текст по центру и круглая кнопка с плюсом над нижним краем.

Смотрите также

виджет MaterialApp,
который задаёт тему Material для Scaffold
виджет AppBar,
который ставят в параметр appBar
класс ScaffoldState,
который открывает drawer и bottom sheet
виджет Drawer,
который выезжает из левого края Scaffold