🧩Scaffold

1. Что такое Scaffold

Scaffold в Flutter — это основа пользовательского интерфейса, создающая базовый макет для экрана приложения. Он предоставляет структуру, в которой легко добавлять такие компоненты, как AppBar, FloatingActionButton, Drawer, и другие. Это основной виджет, используемый для создания традиционных макетов приложений с верхней панелью, основным содержимым и различными интерактивными элементами.

2. Пример использования Scaffold

import 'package:flutter/material.dart';

class ScaffoldExample extends StatelessWidget {
  const ScaffoldExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Пример Scaffold'),
      ),
      body: const Center(
        child: Text('Основное содержимое'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}

3. Объяснение кода

  1. MaterialApp — виджет, который оборачивает Scaffold и задает тему для приложения.

  2. Scaffold — создает базовый макет экрана:

    • appBar — верхняя панель, содержащая заголовок.

    • body — основная область для размещения содержимого.

    • floatingActionButton — плавающая кнопка действия в правом нижнем углу.

Все настройки Scaffold

1. PreferredSizeWidget? appBar

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

appBar: AppBar(
  title: Text('Заголовок'),
) // Верхняя панель с заголовком

2. Widget? body

Описание: Основное содержимое экрана, где располагаются виджеты, которые видит пользователь. Пример:

body: Center(
  child: Text('Основное содержимое'),
) // Центрированный текст

3. Widget? floatingActionButton

Описание: Кнопка для быстрого действия, плавающая над контентом. Пример:

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
) // Плавающая кнопка с иконкой добавления

4. FloatingActionButtonLocation? floatingActionButtonLocation

Описание: Положение floatingActionButton на экране. Пример:

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked // Центрированное размещение

5. FloatingActionButtonAnimator? floatingActionButtonAnimator

Описание: Анимация появления и исчезновения для floatingActionButton. Пример:

floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling // Анимация масштабирования

6. List<Widget>? persistentFooterButtons

Описание: Кнопки, которые остаются закрепленными внизу экрана. Пример:

persistentFooterButtons: [
  ElevatedButton(
    onPressed: () {},
    child: Text('Кнопка 1'),
  ),
] // Закрепленные кнопки внизу

7. AlignmentDirectional persistentFooterAlignment

Описание: Положение кнопок persistentFooterButtons. Пример:

persistentFooterAlignment: AlignmentDirectional.centerEnd // Выравнивание кнопок по правому краю

8. Widget? drawer

Описание: Виджет бокового меню, открываемого слева. Пример:

drawer: Drawer(
  child: ListView(
    children: [ListTile(title: Text('Меню'))],
  ),
) // Левое боковое меню

9. void Function(bool)? onDrawerChanged

Описание: Колбэк, который вызывается при открытии и закрытии drawer. Пример:

onDrawerChanged: (isOpen) {
  print('Drawer открыт: $isOpen');
} // Выводит в консоль, открыт ли Drawer

10. Widget? endDrawer

Описание: Виджет бокового меню, открываемого справа. Пример:

endDrawer: Drawer(
  child: ListView(
    children: [ListTile(title: Text('Правое меню'))],
  ),
) // Правое боковое меню

11. void Function(bool)? onEndDrawerChanged

Описание: Колбэк, вызываемый при открытии или закрытии endDrawer. Пример:

onEndDrawerChanged: (isOpen) {
  print('End Drawer открыт: $isOpen');
} // Выводит в консоль, открыт ли End Drawer

12. Widget? bottomNavigationBar

Описание: Нижняя панель навигации с несколькими пунктами. Пример:

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Главная'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Настройки'),
  ],
) // Панель навигации внизу

13. Widget? bottomSheet

Описание: Нижний лист, отображаемый поверх содержимого экрана. Пример:

bottomSheet: BottomSheet(
  onClosing: () {},
  builder: (context) => Container(
    height: 100,
    color: Colors.blue,
    child: Center(child: Text('Нижний лист')),
  ),
) // Нижний лист с текстом

14. Color? backgroundColor

Описание: Цвет фона для Scaffold. Пример:

backgroundColor: Colors.grey[200] // Светло-серый фон

15. bool? resizeToAvoidBottomInset

Описание: Позволяет автоматически смещать содержимое экрана при появлении клавиатуры. Пример:

resizeToAvoidBottomInset: true // Контент смещается при появлении клавиатуры

16. bool primary

Описание: Если true, Scaffold захватывает MediaQuery для определения высоты экрана. Пример:

primary: true // Scaffold будет использовать всю высоту экрана

17. DragStartBehavior drawerDragStartBehavior

Описание: Определяет, как начинается перетаскивание для открытия drawer. Пример:

drawerDragStartBehavior: DragStartBehavior.start // Открытие с началом перетаскивания

18. bool extendBody

Описание: Позволяет контенту Scaffold находиться за нижней панелью навигации. Пример:

extendBody: true // Контент занимает всю высоту экрана

19. bool extendBodyBehindAppBar

Описание: Позволяет контенту располагаться за верхней панелью. Пример:

extendBodyBehindAppBar: true // Контент простирается за верхней панелью

20. Color? drawerScrimColor

Описание: Цвет полупрозрачного слоя при открытом drawer. Пример:

drawerScrimColor: Colors.black54 // Черный полупрозрачный цвет

21. double? drawerEdgeDragWidth

Описание: Ширина области экрана, откуда можно начать открытие drawer. Пример:

drawerEdgeDragWidth: 50.0 // Ширина перетаскивания — 50 пикселей

22. bool drawerEnableOpenDragGesture

Описание: Разрешает или запрещает жест для открытия drawer. Пример:

drawerEnableOpenDragGesture: false // Отключает жест для открытия Drawer

23. bool endDrawerEnableOpenDragGesture

Описание: Разрешает или запрещает жест для открытия endDrawer. Пример:

endDrawerEnableOpenDragGesture: true // Включает жест для открытия End Drawer

24. String? restorationId

Описание: ID для восстановления состояния экрана. Пример:

restorationId: 'mainScaffold' // ID для восстановления состояния

Итог

Scaffold — это мощный инструмент, который создает каркас экрана с множеством функций, таких как AppBar, Drawer, FloatingActionButton и другие. Он позволяет легко настраивать интерфейс приложения и добавлять базовые элементы для создания стандартного макета приложения.

PreviousОтображение на экранеNextContainer()

Last updated