cgustav / lite_rolling_switch Goto Github PK
View Code? Open in Web Editor NEWFull customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromassango/crazy-switch
License: MIT License
Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromassango/crazy-switch
License: MIT License
The size of the switch is too big, can' t lower down its height and width.
If I do try to lessen them by wrapping them inside the container then things get squeezed.
Do you have an ETA on resizing of the widget?
It seems that the author of the package is no longer available to work on it.
If someone is still looking to use this package,
I have written an updated null-safe version of the switch.
It supports arbitrary width and height as well as full customization of the icons and text (Widget, not IconData or String)
I have removed all other onTap callbacks because they can instead be done with a GestureDetector from the outside if really needed.
I have also removed the swiping because it did not check which direction was swiped and cannot be used like material switch swiping.
The switch will also no longer call onChanged in initState which was unecessary and caused assertions to trigger.
import 'package:flutter/material.dart';
import 'dart:ui';
import 'dart:math';
class RollingSwitch extends StatefulWidget {
/// Rolling switch button.
/// * [value] determines whether this switch is on or off.
/// * [onChanged] is called when the user toggles the switch on or off.
const RollingSwitch({
super.key,
required this.value,
required this.onChanged,
this.width = 100,
this.height = 40,
this.textOff,
this.textOn,
this.colorOn = Colors.green,
this.colorOff = Colors.red,
this.iconOff,
this.iconOn,
this.animationDuration = const Duration(milliseconds: 300),
});
/// Value of the switch.
final bool value;
/// Called when the switch value changes.
final ValueChanged<bool> onChanged;
/// The width of the button.
final double width;
/// The height of the button.
final double height;
/// Text displayed on the switch when in the "off" state.
final Widget? textOff;
/// Text displayed on the switch when in the "on" state.
final Widget? textOn;
/// Icon of the switch when in the "off" state.
final Widget? iconOff;
/// Icon of the switch when in the "on" state.
final Widget? iconOn;
/// Color of the switch when in the "on" state.
final Color colorOff;
/// Color of the switch when in the "off" state.
final Color colorOn;
/// The duration in which the button transitions states.
final Duration animationDuration;
@override
State<RollingSwitch> createState() => _RollingSwitchState();
}
class _RollingSwitchState extends State<RollingSwitch>
with SingleTickerProviderStateMixin {
late AnimationController controller = AnimationController(
vsync: this,
duration: widget.animationDuration,
value: widget.value ? 1 : 0,
);
late Animation<double> animation =
CurvedAnimation(parent: controller, curve: Curves.easeInOut);
double get animationValue => controller.value;
@override
void didUpdateWidget(covariant RollingSwitch oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.value != widget.value) {
if (widget.value) {
controller.forward();
} else {
controller.reverse();
}
}
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => AnimatedBuilder(
animation: animation,
builder: (context, child) {
const Color contrastColor = Colors.white;
Color transitionColor =
Color.lerp(widget.colorOff, widget.colorOn, animationValue)!;
return IconTheme(
data: Theme.of(context).iconTheme.copyWith(
color: transitionColor,
),
child: DefaultTextStyle(
style: Theme.of(context).textTheme.bodyText2!.copyWith(
color: contrastColor,
fontWeight: FontWeight.bold,
),
child: GestureDetector(
onTap: () => widget.onChanged(!widget.value),
child: Container(
clipBehavior: Clip.antiAlias,
padding: const EdgeInsets.all(4),
width: widget.width,
height: widget.height,
decoration: ShapeDecoration(
color: transitionColor,
shape: const StadiumBorder(),
),
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
alignment: Alignment.center,
fit: StackFit.passthrough,
children: [
Positioned(
right: 0,
child: Transform.translate(
offset: Offset(10 * animationValue, 0),
child: Opacity(
opacity: 1 - animationValue,
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 4),
child: widget.textOff ?? const Text('Off'),
),
),
),
),
Positioned(
left: 0,
child: Transform.translate(
offset: Offset(10 * (1 - animationValue), 0),
child: Opacity(
opacity: animationValue,
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 4),
child: widget.textOn ?? const Text('On'),
),
),
),
),
Row(
children: [
Transform.translate(
offset: Offset(
(constraints.maxWidth - widget.height) *
animationValue,
0,
),
child: Transform.rotate(
angle: lerpDouble(0, 2 * pi, animationValue)!,
child: Container(
height: widget.height,
width: widget.height,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: contrastColor,
),
child: Stack(
alignment: Alignment.center,
fit: StackFit.passthrough,
children: [
Opacity(
opacity: 1 - animationValue,
child: widget.iconOff ??
const Icon(Icons.flag),
),
Opacity(
opacity: animationValue,
child: widget.iconOn ??
const Icon(Icons.check),
),
],
),
),
),
),
],
),
],
);
},
),
),
),
),
);
},
);
}
Currently, active icon size is 21 (line 180) and inactive icon size is 25 (line 182).
These should probably be the same size.
HI,
Can you please suggest how to update the value programatically.
hi, is there any null-safety update?
What kind of licence this project has?
Thank you!
Is it possible to update intl dependency to the newest version 0.18.0
Than you
LiteRollingSwitch _buttom() {
return LiteRollingSwitch(
value: poput,
textOn: 'Disponible',
textOff: 'Ocupado',
colorOn: Colors.greenAccent[700],
colorOff: Colors.redAccent[700],
iconOn: Icons.done,
iconOff: Icons.remove_circle_outline,
textSize: 15.0,
onChanged: (bool valor){
setState(() {
poput = valor;
});
},
);
}
y sin el setState no hace nada pero si esta cambiando el valor del value
Angle is always 0!
The error was introduced with the #18 pr. To fix it add this angle: pi * 2 * value
or revert to this angle: lerpDouble(0, 2 * pi, value)
How to update the value with Realtime Firebase
Originally posted by @Adbhutashra26 in #17 (comment)
when the widget loads, the state is false, and therefore unintended calls are being made on the app. Is there a way to isolate the on tap function only. I only want the calls to be made when a user taps the widget, not on load. Thank you.
The onDoubleTap, onSwipe, onTap and onChange parameters are required but I need to make them empty, I suggest making them optional
At first, thank you for the great package!
Could you add a parameter to turn off rolling animation? I want just to have a custom icon on a knob, and don't want this fancy rolling.
I just checked the widget and there are 4 things I noticed:
I know multiple topics for one ticket. Take the other 3 as feedback.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.