Эта статья будет посвящена тому, как реализовать простую кнопку типа Slider в вашем приложении Flutter.

Пример этого приведен ниже:

А теперь приступим.

Прежде всего вам, ребята, нужно импортировать библиотеку Slider Button. Просто добавьте зависимость в свой файл pubsec.yaml.

dependencies:   
   slider_button: ^0.0.32

Теперь просто импортируйте его, используя:

import 'package:slider_button/slider_button.dart';

Вы также можете обратиться к следующему пакету дротиков:



slider_button | Пакет Flutter
Этот пакет обеспечивает простую реализацию кнопки-ползунка для отмены текущей транзакции или экрана. Сильно… pub.dev



Надеюсь, все настройки готовы. Теперь начинается кодирование.

Попробуйте добавить виджет, указанный ниже, в свое дерево виджетов.

Center(child: SliderButton(
      action: () {
        ///Do something here
        Navigator.of(context).pop();
      },
       label: Text(
          "Slide to cancel Event",
          style: TextStyle(
              color: Color(0xff4a4a4a), fontWeight: FontWeight.w500, fontSize: 17),
        ),
      icon: Text(
        "x",
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w400,
          fontSize: 44,
        ),
      ),
));

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

Тип 2:

SliderButton(
      action: () {
        ///Do something here
},
label: Text(
          "Slide to cancel Match",
          style: TextStyle(
              color: Color(0xff4a4a4a), fontWeight: FontWeight.w500, fontSize: 17),
        ),
      icon: Center(
      child:Icon(   Icons.power_settings_new,
                    color: Colors.white,
                    size: 40.0,
                     semanticLabel: 'Text to announce in accessibility modes',
                               )),
buttonColor: Colors.blue,
      backgroundColor: Colors.green,
      highlightedColor: Colors.red,
      baseColor: Colors.amber,
);

Просто настроив несколько цветов, вы можете сделать любой тип кнопки-слайдера.