flutter UI: реализация аккордеонов в мобильном приложении

Многие разработчики знакомы с таким понятием, как «UI аккордеон» из мира web-разработки, ведь чаще всего этот элемент используется и внедряется именно на сайтах. Во всех стадиях развития frontend разработки аккордеоны внедрялись через библиотеку jQuery, нативном JavaScript, чистом CSS, а также через многочисленные фреймворки.

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

Как раз в ходе разработки мобильного приложения «Медицинский личный кабинет» внедрение аккордеонов оказалось вполне уместным на странице информации о лекарственном средстве, ведь если открыть упаковку любого препарата, то в ней будет огромная текстовая аннотация, и показывать все это сразу в открытом виде — просто неграмотно. Поэтому в данной статье я поделюсь тем, как мы реализовали этот элемент интерфейса.

Для начала в папке UI компонентов создаем файл с оберткой, которую будем в последующем использовать на различных страницах, в нашем случае это accordion_panel.dart, и первым делом импортируем в него material.dart

Далее создадим виджет StatefulWidget,  назовем его Accordion и пропишем конструктор:

class Accordion extends StatefulWidget {
    final String title;
    final String content;
  
    const Accordion({Key? key, required this.title, required this.content})
        : super(key: key);
    @override
    _AccordionState createState() => _AccordionState();
  }

А дальше опишем его состояние:

class _AccordionState extends State {
    bool _showContent = false;
    @override
    Widget build(BuildContext context) {
      return Column(
        children: [
          ListTile(
            onTap: () {
              setState(() {
                _showContent = !_showContent;
              });
            },
            title: Text(widget.title),
            trailing: Icon(
              _showContent ? Icons.arrow_drop_up : Icons.arrow_drop_down,)
            ),
        if (_showContent) Container(
        child: Text(widget.content),
          ) else Container(),
      ],);
    }
  }
  

Небольшое пояснение к содержимому состояния:

В случае с _AccordionState мы формируем наше отображение аккордеона по принципу создания колонки, содержащую в себе:

• ListTile – размещаем в нем заголовок аккордеона и иконку стрелочки, которая будет меняться в зависимости от клика, и на весь элемент вешаем событие onTap, который будет показывать нам содержимое;
• Container – показываем содержимое виджета Text, если кликнули по ListTile.

Теперь переходим на страницу, где нужно отобразить аккордеон, и импортируем нашу заготовку.

import '../../accordion_panel.dart';

Создаем виджет StatefulWidget с названием _AccordeonWidget и размещаем наши аккордеоны:

class _AccordeonWidgetState extends State<_AccordeonWidget> {
    @override
    Widget build(BuildContext context) {
      return Column(
    children: const [
        Accordion(
            title: 'Описание лекарственной формы',
            content:
                'Цитрамон, Таб. 240 мг+180 мг+30 мг: 6, 10, 12, 18, 20, 30, 50 шт., рег. №: Р N000499/01 от 04.08.10 - Бессрочно',
        ),
        Accordion(
            title: 'Режим дозирования',
            content:
                'Способ применения и режим дозирования конкретного препарата зависят от его формы выпуска и других факторов. Оптимальный режим дозирования определяет врач. Следует строго соблюдать соответствие используемой лекарственной формы конкретного препарата показаниям к применению и режиму дозирования.',
            ),
        ],      
    );
}}

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

Автор:

Юрий А.

UI специалист

Технологии:

flutter flutter UI разработка спарго