Flutter, разработанный Google, быстро завоевал популярность как мощный фреймворк для создания кроссплатформенных приложений. Одной из ключевых особенностей, отличающих Flutter от других, является его обширная коллекция виджетов. В Flutter все представляет собой виджет, который упрощает разработку и позволяет разработчикам с легкостью создавать красивые, отзывчивые пользовательские интерфейсы.

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

В этой статье мы рассмотрим 25 удобных виджетов Flutter, о которых должен знать каждый разработчик. Мы разделим их на три основных раздела: Базовые виджеты, виджеты макета и интерактивные виджеты, предоставив подробную информацию и примеры кода для каждого.

Основные виджеты

При разработке Flutter базовые виджеты служат основными строительными блоками для построения пользовательских интерфейсов. Эти виджеты включают в себя простые, но необходимые элементы, такие как текст, изображения, иконки и контейнеры, предоставляя разработчикам базовые компоненты, необходимые для создания визуально привлекательных и интерактивных приложений. Базовые виджеты – от отображения текстового контента до размещения элементов пользовательского интерфейса в строках и столбцах – закладывают основу для создания удобного взаимодействия с пользователем на различных устройствах и платформах. Понимание и эффективное использование этих виджетов имеет первостепенное значение для разработчиков, начинающих свое путешествие по Flutter, поскольку они составляют основу любого успешного проекта по разработке приложений.

1. Текст

Текстовый виджет используется для отображения строки текста в приложении Flutter. Это позволяет настраивать стиль текста, включая шрифт, цвет, размер и выравнивание.

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)

2.Изображение

Flutter предоставляет виджет изображений для отображения изображений из различных источников, включая ресурсы, сетевые URL-адреса и память.

Image.asset('assets/images/flutter_logo.png')

3.Икона

Виджет icon используется для отображения значков материалов в приложении Flutter. Размер, цвет и другие свойства значков можно настроить.

Icon(
  Icons.star,
  color: Colors.yellow,
  size: 30,
)

4.Контейнер

Виджет-контейнер – это универсальный виджет, используемый для верстки и оформления. Он может содержать один дочерний виджет и позволяет настраивать такие свойства, как отступы, поля, цвет и оформление.

Container(
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.symmetric(vertical: 10),
  color: Colors.blue,
  child: Text('Container Widget'),
)

5.Строка и столбец

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

Row(
  children: [
    Icon(Icons.email),
    SizedBox(width: 10),
    Text('example@email.com'),
  ],
)

6.Scaffold

Виджет scaffold служит структурой макета для большинства приложений Flutter. Он предоставляет основу для реализации базовой структуры визуального макета material design, такой как панели приложений, выдвижные ящики и нижние панели навигации.

Scaffold(
  appBar: AppBar(title: Text('My App')),
  body: Center(child: Text('Hello, Flutter!')),
)

Виджеты макета

Виджеты макета во Flutter играют решающую роль в организации и структурировании элементов пользовательского интерфейса приложения. Эти виджеты позволяют разработчикам создавать визуально привлекательные макеты, которые адаптируются к различным размерам экрана и ориентации, обеспечивая согласованное и отзывчивое взаимодействие с пользователем. Независимо от того, упорядочиваете ли вы виджеты линейным образом с помощью строк и столбцов, создаете прокручиваемые списки с помощью ListView и GridView или накладываете виджеты с помощью Stack и Positioned, виджеты компоновки обеспечивают гибкость и универсальность, необходимые для разработки сложных и динамичных пользовательских интерфейсов. Осваивая использование виджетов макета, разработчики могут создавать идеальные по пикселям дизайны и создавать привлекательные приложения, которые легко адаптируются к разнообразным потребностям пользователей на различных устройствах и платформах.

1. ListView

Виджет listview используется для создания прокручиваемого списка виджетов. Он эффективно обрабатывает большие списки, лениво загружая элементы по мере их прокрутки в поле зрения.

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

2. GridView

Виджет gridview от Flutter отображает прокручиваемую сетку виджетов в двумерном расположении. Он поддерживает как горизонтальную, так и вертикальную прокрутку с настраиваемыми макетами сетки.

GridView.count(
  crossAxisCount: 2,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.yellow),
  ],
)

3. Stack

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

Stack(
  children: [
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Positioned(
      top: 100,
      left: 100,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

4. Установленный

Установленный виджет используется внутри стека для позиционирования его дочернего виджета относительно краев стека или других дочерних элементов.

Stack(
  children: [
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
)

5. Wrap

Виджет переноса Flutter используется для размещения дочерних элементов в горизонтальном или вертикальном направлении, при необходимости перенося их на следующую строку. Это полезно для создания динамических макетов с различными размерами содержимого.

Wrap(
  children: [
    Chip(label: Text('Tag 1')),
    Chip(label: Text('Tag 2')),
    Chip(label: Text('Tag 3')),
  ],
)

Интерактивные виджеты

Интерактивные виджеты необходимы для создания привлекательного пользовательского опыта в приложениях Flutter. Эти виджеты позволяют разработчикам фиксировать вводимые пользователем данные, распознавать жесты и эффективно реагировать на действия пользователя. Давайте рассмотрим некоторые из наиболее полезных интерактивных виджетов в Flutter:

1. GestureDetector

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

GestureDetector(
  onTap: () {
    // Handle tap gesture
  },
  child: Container(
    color: Colors.blue,
    width: 200,
    height: 200,
    child: Center(child: Text('Tap me')),
  ),
)

2. InkWell

Виджет InkWell от Flutter обеспечивает эффект пульсации дизайна материала при нажатии. Он обычно используется для реализации интерактивных элементов в пользовательских интерфейсах Flutter.

InkWell(
  onTap: () {
    // Handle tap gesture
  },
  child: Container(
    padding: EdgeInsets.all(10),
    child: Text('Click me'),
  ),
)

3. FlatButton

Виджет “Плоская кнопка” создает кнопку с плоским внешним видом, обычно используемую для неосновных действий в приложении.

FlatButton(
  onPressed: () {
    // Handle button press
  },
  child: Text('Flat Button'),
)

4. FloatingActionButton

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

FloatingActionButton(
  onPressed: () {
    // Handle button press
  },
  child: Icon(Icons.add),
)

5. IconButton

Виджет Icon Button создает кнопку со значком, позволяющую пользователям выполнять действия одним нажатием.

IconButton(
  onPressed: () {
    // Handle button press
  },
  icon: Icon(Icons.settings),
)

Виджеты материального дизайна

Flutter предоставляет набор виджетов, которые реализуют рекомендации по дизайну материалов, обеспечивая согласованный и визуально привлекательный пользовательский интерфейс на разных платформах. Давайте рассмотрим некоторые из ключевых виджетов material design:

1. AppBar

Виджет панели приложений представляет собой панель приложений material design, обычно используемую в качестве элемента навигации верхнего уровня в приложениях Flutter.

AppBar(
  title: Text('My App'),
  actions: [
    IconButton(
      onPressed: () {
        // Handle action
      },
      icon: Icon(Icons.search),
    ),
  ],
)

2. BottomNavigationBar

Виджет Flutter BottomNavigationBar отображает горизонтальный ряд вкладок в нижней части экрана, позволяя пользователям переключаться между различными представлениями или страницами в приложении.

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
)

3. Ящик

Виджет “Ящик” создает панель навигации по дизайну материалов, которая выдвигается сбоку экрана, обеспечивая доступ к параметрам и настройкам всего приложения.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      DrawerHeader(
        child: Text('Drawer Header'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        title: Text('Item 1'),
        onTap: () {
          // Handle item tap
        },
      ),
    ],
  ),
)

4. Card

Виджет Flutter’s Card представляет собой карточку дизайна, используемую для отображения связанного контента, сгруппированного вместе, такого как изображения, текст и кнопки.

Card(
  child: ListTile(
    leading: Icon(Icons.album),
    title: Text('Card Title'),
    subtitle: Text('Card Subtitle'),
    onTap: () {
      // Handle tap
    },
  ),
)

5. Snackbar

Виджет Snack bar отображает краткое сообщение в нижней части экрана, обычно используемое для отображения уведомлений или обратной связи с пользователем.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Snackbar message'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () {
        // Handle action
      },
    ),
  ),
)

Виджеты Cupertino

Виджеты Flutter из Cupertino имитируют язык дизайна iOS, обеспечивая привычный внешний вид для пользователей устройств Apple. Давайте рассмотрим некоторые ключевые виджеты из Купертино:

1. CupertinoNavigationBar

Виджет панели навигации Cupertino представляет собой панель навигации, оформленную в соответствии с рекомендациями iso, обычно используемую для навигации верхнего уровня в приложениях Flutter.

CupertinoNavigationBar(
  middle: Text('Page Title'),
)

2. CupertinoTabBar

Виджет Flutter CupertinoTabBar отображает ряд вкладок в нижней части экрана, аналогично панелям вкладок iOS, позволяя пользователям переключаться между различными разделами или представлениями в приложении.

CupertinoTabBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
)

3. CupertinoPicker

Виджет выбора из Купертино создает элемент управления вращающимся колесом, обычно используемый для выбора дат, времени или других параметров в интерфейсах в стиле iOS.

CupertinoPicker(
  itemExtent: 30,
  onSelectedItemChanged: (int index) {
    // Handle selection change
  },
  children: [
    Text('Option 1'),
    Text('Option 2'),
    Text('Option 3'),
  ],
)

4. CupertinoActionSheet

Виджет Flutter CupertinoActionSheet отображает модальную таблицу действий со списком опций, обычно используемую для представления пользователю набора действий или вариантов выбора.

showCupertinoModalPopup(
  context: context,
  builder: (BuildContext context) {
    return CupertinoActionSheet(
      title: Text('Action Sheet Title'),
      actions: [
        CupertinoActionSheetAction(
          onPressed: () {
            // Handle action
          },
          child: Text('Action 1'),
        ),
      ],
      cancelButton: CupertinoActionSheetAction(
        onPressed: () {
          // Handle cancel
        },
        child: Text('Cancel'),
      ),
    );
  },
)

5. CupertinoContextMenu

Виджет контекстного меню Cupertino создает контекстное меню, которое появляется, когда пользователь долго нажимает на виджет, предоставляя дополнительные опции или действия.

CupertinoContextMenu(
  actions: [
    CupertinoContextMenuAction(
      child: Text('Option 1'),
      onPressed: () {
        // Handle action
      },
    ),
  ],
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

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

Пользовательские виджеты

In Flutter, custom widgets play a crucial role in building unique and tailored user interfaces. These widgets encapsulate specific functionalities or design patterns, promoting code reusability and maintainability. Let’s delve into some of the most useful custom widgets and explore their capabilities:

1. CustomScrollView

Виджет CustomScrollView предоставляет гибкий способ создания прокручиваемых макетов с пользовательским поведением прокрутки. Он позволяет разработчикам создавать сложные эффекты прокрутки, такие как заголовки параллакса и макеты на основе фрагментов.

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Custom Scroll View'),
      pinned: true,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(title: Text('Item $index'));
        },
        childCount: 20,
      ),
    ),
  ],
)

2. SliverAppBar

Виджет SliverAppBar от Flutter используется для создания панели приложений material design, которая интегрируется с CustomScrollView. Он поддерживает различные функции, такие как закрепленные заголовки, плавающие заголовки и гибкое пространство.

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Custom Scroll View'),
      pinned: true,
    ),
    // Other slivers...
  ],
)

3. AnimatedBuilder

Виджет Animated Builder упрощает процесс анимации свойств виджета. Он позволяет разработчикам указывать анимацию и функцию builder, автоматически перестраивая дерево виджета всякий раз, когда изменяется значение анимации.

AnimatedBuilder(
  animation: _animationController,
  builder: (BuildContext context, Widget child) {
    return Transform.rotate(
      angle: _animationController.value * 2 * pi,
      child: child,
    );
  },
  child: Icon(Icons.rotate_right),
)

4. CustomPaint

Виджет Flutter CustomPaint позволяет настраивать рисование на экране с помощью CustomPainter. Он обычно используется для создания пользовательских фигур, диаграмм и графических эффектов в приложениях Flutter.

CustomPaint(
  painter: MyCustomPainter(),
  child: Container(
    width: 200,
    height: 200,
  ),
)

5. Tooltip

Виджет всплывающей подсказки отображает всплывающее сообщение, когда пользователь наводит курсор мыши на виджет или долго нажимает на него. Это полезно для предоставления дополнительного контекста или информации об элементах пользовательского интерфейса.

Tooltip(
  message: 'This is a tooltip',
  child: IconButton(
    onPressed: () {
      // Handle button press
    },
    icon: Icon(Icons.info),
  ),
)

Заключение

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

В этой статье мы рассмотрели 25 удобных виджетов Flutter в различных категориях, включая базовые виджеты, виджеты макета, интерактивные виджеты, виджеты Material Design и виджеты Cupertino. Каждый виджет служит определенной цели и может быть настроен в соответствии с уникальными требованиями различных приложений.

Освоив эти виджеты и поняв их возможности, разработчики смогут раскрыть весь потенциал Flutter и создавать высококачественные приложения, обеспечивающие исключительный пользовательский опыт. Разрабатываете ли вы для Android, iOS или Интернета, виджеты Flutter предоставляют строительные блоки, необходимые для воплощения ваших идей в жизнь.

Поскольку Flutter продолжает развиваться, мы можем ожидать появления еще более мощных виджетов и функций, которые еще больше улучшат процесс разработки. Итак, продолжайте изучать, экспериментировать и внедрять инновации с помощью Flutter и открывайте бесконечные возможности для создания потрясающих приложений.

Обладая богатой экосистемой, динамичным сообществом и непревзойденной производительностью, Flutter является свидетельством будущего кроссплатформенной разработки приложений. Воспользуйтесь возможностями виджетов Flutter и отправляйтесь в путешествие по созданию следующего поколения мобильных и веб-приложений.