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

Метод 1: виджет пользовательской кнопки
Простой способ добавить символ загрузки к кнопке Flutter — создать виджет пользовательской кнопки, который инкапсулирует кнопку и символ загрузки. Вот пример:

class LoadingButton extends StatefulWidget {
  final String text;
  final bool isLoading;
  final VoidCallback onPressed;
  LoadingButton({required this.text, required this.isLoading, required this.onPressed});
  @override
  _LoadingButtonState createState() => _LoadingButtonState();
}
class _LoadingButtonState extends State<LoadingButton> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: widget.isLoading ? null : widget.onPressed,
      child: widget.isLoading
          ? CircularProgressIndicator()
          : Text(widget.text),
    );
  }
}

В этом примере виджет LoadingButtonпринимает три параметра: textдля метки кнопки и isLoading, чтобы указать, должен ли символ загрузки быть показано, и onPressedдля обратного вызова кнопки. Свойству кнопки onPressedприсваивается значение null, когда isLoadingимеет значение true, что предотвращает взаимодействие пользователя во время загрузки.

Метод 2: пакет Flutter Spinkit
Другой подход — использовать внешние пакеты, которые предоставляют заранее разработанную анимацию загрузки. Одним из популярных пакетов является flutter_spinkit, который предлагает множество индикаторов загрузки. Вот пример:

Сначала добавьте flutter_spinkitв файл pubspec.yaml:

dependencies:
  flutter_spinkit: ^5.1.0

Затем импортируйте пакет и используйте его в кнопке Flutter:

import 'package:flutter_spinkit/flutter_spinkit.dart';
// ...
ElevatedButton(
  onPressed: isLoading ? null : onPressed,
  child: isLoading
      ? SpinKitFadingCircle(
          color: Colors.white,
          size: 24.0,
        )
      : Text('Submit'),
)

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

Метод 3: InkWell и Stack
Другой подход предполагает использование виджетов InkWellи Stackдля наложения кнопки и символа загрузки. Вот пример:

Stack(
  alignment: Alignment.center,
  children: [
    ElevatedButton(
      onPressed: isLoading ? null : onPressed,
      child: Text('Submit'),
    ),
    if (isLoading)
      CircularProgressIndicator(),
  ],
)

В этом примере мы используем виджет Stackс двумя дочерними элементами: ElevatedButtonи CircularProgressIndicator. CircularProgressIndicatorотображается условно на основе флага isLoading.

Добавление символа загрузки к кнопке Flutter повышает удобство работы пользователя, обеспечивая визуальную обратную связь во время трудоемких операций. В этой статье мы рассмотрели несколько методов достижения этой цели, в том числе создание пользовательского виджета кнопки с использованием пакета flutter_spinkitи наложение виджетов с InkWellи 25. Выберите метод, который лучше всего соответствует требованиям и дизайну вашего приложения. Приятного кодирования!