swipe_button_widget

Description:

swipe button widget

swape_button_widget #
Switcher button. Flutter switch button with minimal design and material animation and highly customizable.It can be use as switch button or toggle buttons.
Table of Contents
[TOC]
###Preview

###Example
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:swipe_button_widget/swipe_button_widget.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
);
}
}

class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
const SizedBox(height: 8),
SwipeButtonWidget(
acceptPoitTransition: 0.7,
margin: const EdgeInsets.all(0),
padding: const EdgeInsets.all(0),
boxShadow: const [
BoxShadow(
blurRadius: 4,
color: Color.fromRGBO(197, 197, 197, 0.25),
spreadRadius: 1.5,
),
],
borderRadius: BorderRadius.circular(8),
colorBeforeSwipe: Colors.white,
colorAfterSwiped: Colors.white,
height: 60,
childBeforeSwipe: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.red[900],
),
width: 100,
height: double.infinity,
child: const Center(
child: Text(
'>>>',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 28,
color: Colors.white),
),
),
),
childAfterSwiped: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.red[900],
),
width: 100,
height: double.infinity,
child: const Center(
child: Text(
'>>>',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 28,
color: Colors.white),
),
),
),
leftChildren: const [
Align(
alignment: Alignment(0.9, 0),
child: Text(
'Swip for confirmation',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
color: Colors.red),
),
)
],
rightChildren: const [
Align(
alignment: Alignment(-0.6, 0),
child: Text(
'Swip for arrived',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
color: Colors.red),
),
)
],
onHorizontalDragUpdate: (e) {},
onHorizontalDragRight: (e) {
return areYouSureDialog(context);
},
onHorizontalDragleft: (e) async {
return false;
}),
const SizedBox(height: 8),
SwipeButtonWidget(
padding: const EdgeInsets.all(15),
borderRadius: BorderRadius.circular(8),
childBeforeSwipe: Text(
'>>> Slide To Logout',
style: TextStyle(
fontSize: 18,
color: Color.fromRGBO(5, 132, 55, 1),
),
),
childAfterSwiped: Text(
'<<< Slide To Login',
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
),
leftChildren: const [
Align(
alignment: Alignment.centerRight,
child: Text(
'Active',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
],
rightChildren: const [
Align(
alignment: Alignment.centerLeft,
child: Text(
'Offline',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
],
onHorizontalDragUpdate: (e) {},
onHorizontalDragRight: (e) {
return areYouSureDialog(context);
},
onHorizontalDragleft: (e) {
return areYouSureDialog(context);
},
),
],
),
);
}
}

Future<bool> areYouSureDialog(BuildContext context) async {
bool isActive = false;
await showDialog(
context: context,
barrierDismissible: false,
builder: (context) => Dialog(
child: Container(
color: Colors.white,
height: 140,
width: 150,
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Are you sure?'),
SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {
isActive = true;
Navigator.of(context).pop();
},
child: Text('Yes'),
),
SizedBox(width: 10),
TextButton(
onPressed: () {
isActive = false;
Navigator.of(context).pop();
},
child: Text('No'),
),
],
),
],
),
),
),
);
return isActive;
}
copied to clipboard
###Tables



params
Type
default value




key
Key?
null


childBeforeSwipe
Widget
const Icon(Icons.arrow_forward_ios)


childAfterSwiped
Widget
const Icon(Icons.arrow_back_ios)


height
double?
null


width
double?
null


margin
EdgeInsetsGeometry
const EdgeInsets.all(0)


padding
EdgeInsetsGeometry
const EdgeInsets.all(0)


colorBeforeSwipe
Color
Colors.green


colorAfterSwiped
Color
Colors.red


boxShadow
List
const [BoxShadow( color:Colors.black54, blurRadius: 6,offset: Offset(0, 4),),]


borderRadius
BorderRadiusGeometry?
null


duration
Duration
const Duration(milliseconds: 50)


constraints
BoxConstraints?
null


rightChildren
List
const []


leftChildren
List
const []


onHorizontalDragUpdate
void Function(DragUpdateDetails)
required


onHorizontalDragRight
Future
required


onHorizontalDragleft
Future
required


acceptPoitTransition
double
0.5