Что такое Scaffold в Flutter
Виджет Scaffold — это предварительно встроенный виджет в Flutter, который обеспечивает базовую структуру макета для мобильных приложений. Он предоставляет основу для создания приложений, соответствующих рекомендациям Material Design guidelines, которые представляют собой набор принципов дизайна, разработанных Google для создания согласованного и визуально привлекательного пользовательского интерфейса на всех устройствах.
Виджет Scaffold построен поверх других базовых виджетов, таких как AppBar, Drawer, BottomNavigationBar и FloatingActionButton, которые можно легко добавить в Scaffold для обеспечения дополнительной функциональности вашего приложения.
Анатомия виджета Scaffold
Виджет Scaffold обычно содержит несколько ключевых элементов, составляющих макет мобильного приложения. Эти элементы включают:
Конечно, вот краткое описание каждого из основных свойств виджета Scaffold в Flutter:
- appBar: виджет, который появляется в верхней части экрана и обычно содержит заголовок приложения или текущей страницы, а также действия и другие виджеты, такие как значки или поля поиска. Виджет AppBar имеет несколько настраиваемых свойств, включая title, actions, leading, backgroundColor, elevation, brightness, centerTitle, and bottom.
- body: виджет, который появляется в основной области содержимого экрана и обычно содержит основную часть пользовательского интерфейса для текущей страницы. Это может быть любой виджет, включая ListView, GridView или Container.
- FloatingActionButton: виджет, который появляется в правом нижнем углу экрана и обычно выполняет основное действие для текущей страницы или приложения. Виджет FloatingActionButton имеет несколько настраиваемых свойств, включая дочерние, backgroundColor, ForegroundColor и onPressed.
- bottomNavigationBar: виджет, который появляется в нижней части экрана и обычно содержит несколько элементов навигации или вкладок, позволяющих пользователю переключаться между различными видами или страницами. Виджет BottomNavigationBar имеет несколько настраиваемых свойств, включая элементы, onTap, selectedItemColor, unselectedItemColor и backgroundColor.
- drawer: виджет, который появляется, когда пользователь проводит пальцем от левого края экрана или нажимает на значок гамбургера на панели приложений. Виджет drawer обычно содержит ссылки на другие части приложения или настройки. Виджет drawer имеет несколько настраиваемых свойств, включая child, elevation, and semanticLabel.
endDrawer: виджет, который появляется, когда пользователь проводит пальцем от правого края экрана или нажимает на кнопку на панели приложений. Виджет endDrawer drawer на ящик, но обычно используется для менее часто используемых элементов или действий.
bottomSheet: виджет, который отображается в виде нижнего листа, когда пользователь проводит пальцем вверх от нижней части экрана или нажимает на кнопку. Это может быть любой виджет, включая ListView, GridView или контейнер. - backgroundColor: свойство, которое определяет цвет фона виджета Scaffold.
Это основные свойства виджета Scaffold, но есть и другие, которые можно использовать для настройки внешнего вида и поведения виджета в зависимости от потребностей вашего приложения.
Пример создания виджета Scaffold
Вот пример того, как создать базовый виджет Scaffold в Flutter:
import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget < @override Widget build(BuildContext context) < return Scaffold( appBar: AppBar( title: Text('My App'), ), body: Center( child: Text( 'Welcome to my app!', style: TextStyle(fontSize: 24.0), ), ), floatingActionButton: FloatingActionButton( onPressed: () < // Perform some action >, child: Icon(Icons.add), ), ); > >В этом примере мы создали виджет Scaffold с панелью appBar, которая имеет заголовок «My App». Далее мы определили для body текстовый виджет с центрированным текстом «Welcome to my app!» и размером шрифта 24.0. Мы также добавили FloatingActionButton с обратным вызовом onpress, который выполнит некоторое действие при нажатии кнопки.
Заключение
Таким образом, Material App является ключевым компонентом любого приложения Flutter, использующего Material Design. Он предоставляет широкий спектр встроенных функций и свойств, которые помогают разработчикам легко внедрять концепции материального дизайна и делать свои приложения более визуально привлекательными и согласованными на всех устройствах. С помощью Material Appwidget разработчики могут с легкостью создавать надежные, элегантные и высокофункциональные мобильные приложения.
Scaffold flutter что это
Виджет MaterialApp предназначен для создания графического интерфейса в стиле material design. Кроме собственно интерфейса в стиле material design это виджет предоставляет много другой функциональности, например, позволяет определить навигацию, различные части приложения и т.д. Поэтому вначале рассмотрим некоторые базовые моменты использования MaterialApp.
Конструктор MaterialApp имеет приличное количество параметров, среди которых следует выделить параметр home . Этот параметр задает базовый виджет, который будет отображаться в MaterialApp при загрузке. Например:
import ‘package:flutter/material.dart’; void main()
Scaffold
Несмотря на то, что для параметра home можно использовать любой виджет, в реальности, как правило, в данном качестве используется виджет Scaffold . Это еще один виджет, который применяется для создания интерфейса в стиле Material Design.
Конструктор класса Scaffold также имеет довольно много параметров, из которых прежде всего следует выделить параметр body — он задает основное содержимое Scaffold в виде другого виджета. Например:
import ‘package:flutter/material.dart’; void main()
AppBar
Из других параметров конструктора Scaffold следует отметить параметр appBar , который задает верхнюю панель с заголовком и возможными иконками. В качестве значения этот параметр принимает объект AppBar .
AppBar представляет еще один класс, который применяется для придания приложению стиля Material Design.
Виджет AppBar также предоставляет богатую функциональность. И пока остановимся только на заголовке, который устанавливается с помощью параметра title конструктора AppBar. Этот параметр в качестве значения принимает виджет Text :
import ‘package:flutter/material.dart’; void main()
Как видно со скриншота, в данном случае нам не надо устанавливать сверху никаких отступов, Scaffold автоматически позиционирует основной контент ниже панели AppBar. Кроме того, виджеты предоставляют некоторые цвета по умолчанию.
При этом поскольку заголовок в AppBar представляет не просто строку, а виджет Text, то соответственно мы можем применить некоторую стилизацию, например, цвет текста и т.д.
Flutter для Android-разработчиков. Как создавать UI для Activity, используя Flutter
Эта статья написана для Android-разработчиков, которые хотят применить свои существующие знания для создания мобильных приложений с помощью Flutter. В этой статье мы рассмотрим эквивалент Activity во Flutter.
Предварительные требования
Предполагается, что вы уже настроили Flutter на своём ПК и можете запустить приложение «Hello World». Если нет, то сделайте это.
Dart основан на концепции ООП, поэтому Android-разработчику не составит труда начать использовать его.
Цель
В конце статьи мы сможем создавать пользовательский интерфейс для Activity, используя Flutter-виджеты, который будет выглядеть так:
Вообще, если вы заглянете внутрь Android-проекта, сгенерированного с помощью Flutter и откроете файл AndroidManifest.xml , то вы обнаружите, что там находится всего одна Activity, например, FlutterActivity . Но в этой статье мы сосредоточимся на проектировании пользовательского интерфейса для Activity во Flutter. Как? При помощи scaffold (англ. строительные леса).
Scaffold
Scaffold — это набор виджетов, которые визуально представляют собой пользовательский интерфейс для Activity. Как правило, Activity используется для отображения одного экрана, который состоит из многих View-компонентов, таких как тулбар, меню, боковое меню, снэк-бар, FAB и т.д. А FrameLayout используется как контейнер для фрагментов в Activity. В scaffold всё это представлено в виде виджетов.
Запомните, любой компонент во Flutter — виджет.
Изображение выше наглядно демонстрирует составляющие scaffold, который предоставляет API для отображения боковых меню, нижней панели, тулбара, области контента.
Поскольку scaffold — это material-виджеты, то они должны наследоваться от каких-то других material-компонентов, но мы обсудим это более подробно в других статьях. Сейчас мы сосредоточимся на создании scaffold-виджета.
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( ), ));Когда вы запустите этот код, вы увидите белый пустой экран, потому что вы ещё ничего не добавили в scaffold. Поэтому давайте определим цвет фона при помощи свойства backgroundColor и установим жёлтый цвет:
void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, ), ));Теперь вы увидите полностью жёлтый экран вашего приложения. Вы можете поиграться с другими свойствами scaffold, полный список которых можете найти в официальной документации.
Теперь мы знаем, как создать scaffold. Давайте исследуем его основные свойства одно за другим.
1. AppBar (Toolbar)
AppBar по сути тот же Toolbar , который мы используем в нашей Activity. На картинке показано, где отображаются свойства AppBar.
- leading: виджет, который отображается перед заголовком. Это может быть иконка гамбургер-меню или кнопка «Назад».
- title: заголовок тулбара, обёрнутый в виджет Text .
- actions: это эквивалент menu.xml , в котором мы создаём набор для отображения пунктов меню. Свойство actions принимает список виджетов для отображения в меню. Обычно этими виджеты представлены в виде IconButtons, которые эквивалентны .
- bottom: обычно используется для TabBar , располагающегося под AppBar.
- flexibleSpace: этот виджет используется для создания эффекта CollapsingToolbarLayout (схлопывающегося тулбара).
Таким образом, вы можете создать простой Appbar с иконкой, заголовком и меню:
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( leading: new Icon(Icons.menu), title: new Text("My Title"), actions: [ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () <>, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () <>, ) ], ), ), ));
Это полученный результат. Выглядит точно так же, как обычный тулбар, который мы используем обычно. Вы можете поэкспериментировать с добавлением или удалением виджетов, добавлением стиля или цвета конкретному виджету.
В качестве практического упражнения можете изучить остальные свойства AppBar и поработать с ними.
2. Body (контейнер для любого View-компонента)
Это главная составляющая scaffold. Она работает так же, как Fragment Container в Android. Для отображения в области контейнера требуется виджет. Это область, где мы отображаем пользователю основной контент. В нашем примере для простоты мы добавим красный цвет в body. В реальной жизни кроме цвета фона используется множество других виджетов, например, ListView, Row, Column, Stack и т.д.
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( leading: new Icon(Icons.menu), title: new Text("My Title"), actions: [ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () <>, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () <>, ) ], ), body: new Container( color: Colors.red, ), ), ));
Body отображается позади AppBar, FAB и бокового меню. Несмотря на то, что мы применили желтый фон к scaffold, на экране отображается красный цвет body, перекрывающий фон scaffold.
3. Drawer (DrawerLayout)
Этот виджет представляет собой DrawerLayout в Android, который выезжает из левой части Activity для отображения навигационных ссылок приложения.
Drawer обычно используется со свойством Scaffold.drawer. Как и в Android, мы используем NavigationView внутри DrawerLayout . В таблице ниже показаны эквивалентные View-компоненты в Android и Flutter.
Дочерним компонентом виджета Drawer обычно является ListView, чей первый элемент — DrawerHeader, который отображает информацию о текущем пользователе. Остальные элементы списка, как правило, создаются с помощью ListTiles. Следующий код показывает, каким образом создаётся Drawer:
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( title: new Text("My Title"), actions: [ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () <>, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () <>, ) ], ), drawer: new Drawer( child: new ListView( children: [ new DrawerHeader( child: new Text("Drawer Header"), decoration: new BoxDecoration( color: Colors.blue, ), ), new Text("Item 1"), new Text("Item 2"), new Text("Item 3"), new Text("Item 4"), new Text("Item 5"), new Text("Item 6"), ], ), ), ), ));Вот такой результат вы должны получить. Стоит отметить, что при добавлении в scaffold виджета Drawer в AppBar автоматически добавляется иконка гамбургер-меню, поэтому все другие иконки стоит удалить.
Для получения дополнительной информации об этом виджете вы можете ознакомиться с практическим примером из документации или посвящённой этой теме отдельной статье.
4. BottomNavigationBar (BottomNavigationView)
Material-виджет, отображаемый в нижней части приложения, BottomNavigationBar состоит из нескольких элементов в виде текста и иконок.
BottomNavigationBar обычно применяется при помощи свойства Scaffold.bottomNavigationBar.
В Android вы определяете пункты меню в BottomNavigationView с помощью свойства app:menu=»@menu/my_navigation_items» , где my_navigation_items — это список всех пунктов меню в теге . Во Flutter используется свойство items , которое принимаете в качестве аргумента список BottomNavigationBarItem , каждый из которых состоит из иконки, заголовка и цвета фона в меню.
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: . body. drawer: . bottomNavigationBar: new BottomNavigationBar(items: [ new BottomNavigationBarItem( icon: new Icon(Icons.home), title: new Text("Home"), ), new BottomNavigationBarItem( icon: new Icon(Icons.search), title: new Text("Search"), ) ]), ), ));
Теперь у нас есть BottomNavigationBar с двумя пунктами меню.
Для обработки клика и изменения контента в scaffold нужен виджет поддерживающий сохранение состояния и некоторая ручная работа. Эта тема выходит за рамки этой статьи, но вы можете почитать об этом в официальной документации.
Кроме того, давайте добавим FAB в scaffold. Ниже представлен полный код для создания нашего пользовательского интерфейса Activity с помощью scaffold.
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( title: new Text("My Title"), actions: [ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () <>, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () <>, ) ], ), body: new Container( color: Colors.red, ), drawer: new Drawer( child: new ListView( children: [ new DrawerHeader( child: new Text("Drawer Header"), decoration: new BoxDecoration( color: Colors.blue, ), ), new Text("Item 1"), new Text("Item 2"), new Text("Item 3"), new Text("Item 4"), new Text("Item 5"), new Text("Item 6"), ], ), ), bottomNavigationBar: new BottomNavigationBar(items: [ new BottomNavigationBarItem( icon: new Icon(Icons.home), title: new Text("Home"), ), new BottomNavigationBarItem( icon: new Icon(Icons.search), title: new Text("Search"), ) ]), floatingActionButton: new FloatingActionButton( onPressed: ()<>, child: new Icon(Icons.add), ), ), ));
Сейчас в FAB метод onPressed не определён. Поэтому кнопка не будет реагировать на касания. При необходимости вы можете добавить обработку этого события.
Наконец, мы получили результат, о котором говорили в начале этой статьи.
Заключение
Flutter — мощный инструмент для быстрой разработки качественного, красивого пользовательского интерфейса. Он предоставляет множество виджетов для создания гибкого интерфейса с привлекательной анимацией. Scaffold — один из них, и это всего лишь верхушка айсберга. В следующих статьях рассмотрим другие темы.
- Разработка мобильных приложений
- Разработка под Android
- Dart
- Дизайн мобильных приложений
- Flutter
Урок 2. Базовые виджеты
В этом уроке рассмотрим несколько базовых виджетов. В Flutter практически все, что вы видите на экране, является виджетом. Сегодня посмотрим на некоторые из них в этом уроке, так как они используются чаще всего и из них можно сотворить кучу всего разного.
Подготовка
Помните файл main.dart из прошлого урока? Давайте удалим сейчас из него все ненужное, сейчас оно нам будет мешать.
Для начала, во всех строчках, в которых есть // , удалите все, что после // , это комментарии.
Далее найдите Scaffold( и удалите все до закрывающей скобки этого виджета, то есть почти до конца.
Должно получится как-то так:
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( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); > > class MyHomePage extends StatefulWidget const MyHomePage(super.key, required this.title>); final String title; @override StateMyHomePage> createState() => _MyHomePageState(); > class _MyHomePageState extends StateMyHomePage> int _counter = 0; void _incrementCounter() setState(() _counter++; >); > @override Widget build(BuildContext context) return Scaffold( ); > >Scaffold
Первый виджет, с которым мы познакомимся — Scaffold.
Scaffold буквально переводится как каркас. И так и есть. Это основа практически любого экрана в вашем Flutter приложении.
Он принимает кучу аргументов. Нас в этом уроке интересует только два: body и appBar
Давайте дадим название этому экрану, задав аргумент appBar :
return Scaffold( appBar: AppBar(title: Text("Super Title")) );Ура, вот уже и мы задали название первому экрану.
Text
Виджет Text мы использовали только что. Кроме самого текста для отображения, мы можем задать стиль этого самого текста:
Text("Super Title", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 14, color: Colors.black))Container
Container — один из основных виджетов. Мы много будем делать с его помощью. Давайте его разместим в теле нашего приложения.
Для этого в Scaffold передаем в аргументе body Container:
body: Container()Пока что ничего не поменялось, не так ли? Можно покрасить его в другой цвет, и вы увидите изменения:
Container( color: Colors.orange )Отлично, теперь мы видимо просто оранжевый цвет на экране. Но нам важно, что Container может в себе содержать другие виджеты. Попробуйте передать в аргумент child уже знакомый нам виджет Text.
Container( color: Colors.orange child: Text("Title") )Правда, текст нарисовался в углу. Но вы можете легко это исправить завернув текст в виджет Center точно таким же способом.