Создание переключаемого виджета в Flutter: простой способ отключить любой виджет

FlutterPulse

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Введение

При разработке на Flutter есть много сценариев, в которых необходимо динамически включать или выключать элементы интерфейса. Хотя кнопки Flutter (такие как ElevatedButton) имеют встроенную функцию отключения, когда не предоставлен callback onPressed, пользовательские виджеты часто лишены этой функции.

Разработчики обычно используют методы, такие как:

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

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

Представление виджета Toggleable

Виджет Toggleable объединяет Opacity и IgnorePointer для предоставления гибкого способа включения или отключения любого виджета динамически.

Реализация кода

import 'package:flutter/material.dart';

class Toggleable extends StatelessWidget {
  final bool isEnabled;
  final Widget child;
  final double disabledOpacity;
  const Toggleable({
    Key? key,
    required this.isEnabled,
    required this.child,
    this.disabledOpacity = 0.4,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: isEnabled? 1.0 : disabledOpacity,
      child: IgnorePointer(
        ignoring:!isEnabled,
        child: child,
      ),
    );
  }
}

Принцип работы

Opacity: регулирует видимость виджета при отключении.
IgnorePointer: предотвращает взаимодействие с виджетом, когда isEnabled равен false.
disabledOpacity: позволяет настраивать внешний вид отключенного виджета.

Примеры использования

Отключение пользовательских компонентов

Хотя встроенные кнопки обрабатывают отключение内部, пользовательские виджеты (такие как карточки, контейнеры или сложные компоненты интерфейса) не имеют этой функции. Toggleable полезен для таких случаев.

Пример 1: Отключение пользовательской кнопки

Toggleable(
  isEnabled: false, // Отключить кнопку
  child: GestureDetector(
    onTap: () => print("Кнопка нажата"),
    child: Container(
      padding: EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text("Пользовательская кнопка", style: TextStyle(color: Colors.white)),
    ),
  ),
)

Пример 2: Отключение карточки на основе роли пользователя

Toggleable(
  isEnabled: userHasPermission,
  child: Card(
    child: ListTile(
      title: Text("Ограниченный контент"),
      subtitle: Text("Доступен только для определенных пользователей"),
    ),
  ),
)

Пример 3: Отключение навигационных элементов

Toggleable(
  isEnabled:!isProcessing,
  child: IconButton(
    icon: Icon(Icons.arrow_forward),
    onPressed: () {
      if (!isProcessing) {
        Navigator.push(context, MaterialPageRoute(builder: (context) => NextScreen()));
      }
    },
  ),
)

Преимущества использования Toggleable

Многоразовый: Легко применять к различным виджетам без избыточного кода.
Улучшает UX: Обеспечивает последовательный внешний вид при отключении.
Упрощает управление состоянием: Централизованная логика для обработки отключенных состояний.
Гибкий: Работает с любыми пользовательскими компонентами, не имеющими встроенной поддержки отключения.

Лучшие практики и соображения

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

Заключение

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

Попробуйте его в своем следующем приложении Flutter и оптимизируйте обработку состояния виджетов!