codegrue
new feature: Add switch card with 3 options
is it possible to add switch card with 3 options?
I didn't find any plugin in Flutter with this beautiful UI
switch with 3 states javascript exemple
This library uses the stock Flutter Switch widget here. Making something like this would be it's own package or part of a widgets package. If such is made, I would entertain incorporating it.
Hi,
The documentation can be null value because is javascript but you can configure whether you want 3 positions or two positions and It is possible to configure the value to "on", "off" and "middle" and the default value (initial). The values for each position is dynamic, it to be configurated by user.
'nc' is the value for the middle position
'allowManualDefault': false = shows only two positions and true shows all three positions
See the syntax
'default': '',
'on': 'true',
'off': 'false',
'nc': '',
'size': 'sm',
'contents': {
'left': 'Left',
'middle': 'middle',
'right': 'Right',
},
'allowManualDefault': false,
In relation to me developing the Widget, unfortunately I don't have this skill with to work with animations. This is my weak side, I can't make beautiful UI, I stay more in the ideas and back-end development, my UI is very simple and crude. I will research to see what I can do and help you to add this new widget.
Hi, I tried to do something like that, the code is neither optimized nor documented. Are you interested in that way? I will be able to improve the code, but you will have to make adaptations and pattern for your package. I never made a plugin.
// @dart=2.9
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int toggleIndex = 1; //the result actual select position value
List<bool> _selections = List.generate(3, (_) => false);
double rPos = 4;
Color colorOn = Colors.red;
Color colorOff = Colors.green;
Color ColorCenter = Colors.grey;
Color background = Colors.grey;
Color backgroundDefault = Color(0xFFF0F0F0);
double toggleButtonWidth = 100;
double iconButtonLenght = 25;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: switch3Pos()
);
}
@override
void initState() {
super.initState();
_changeSelect(toggleIndex);
}
Widget switch3Pos() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 80,
padding: EdgeInsets.zero,
child: Center(
child: Stack(children: [
AnimatedContainer(
duration: Duration(milliseconds: 500),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.fastOutSlowIn,
height: 30,
width: toggleButtonWidth,
decoration: BoxDecoration(color: background, borderRadius: BorderRadius.circular(20)),
child: LayoutBuilder(builder: (context, constraints) {
return ToggleButtons(
borderColor: Colors.transparent,
selectedColor: Colors.transparent,
renderBorder: false,
constraints:
BoxConstraints.expand(width: constraints.maxWidth / 3),
//number 3 is number of toggle buttons
children: [
Icon(
Icons.close,
color: colorOff,
size: 20,
),
Icon(
Icons.stop_circle,
color: ColorCenter,
size: 0,
),
Icon(
Icons.check,
color: colorOn,
size: 20,
),
],
onPressed: (int index) {
_changeSelect(index);
},
borderRadius: BorderRadius.circular(20),
borderWidth: 3,
isSelected: _selections);
}
),
),
AnimatedPositioned(top: (30 - iconButtonLenght)/2, left: rPos, child: iconButton(), duration: Duration(milliseconds: 200)),
]),
),
),
],
),
);
}
Widget iconButton() {
return Material(
elevation: 2,
type: MaterialType.button,
color: Colors.transparent,
borderRadius: BorderRadius.circular(1000),
child: Container(
height: iconButtonLenght,
width: iconButtonLenght,
decoration: BoxDecoration(
border: Border.all(color: Color(0xF0F0F0), width: 2.0),
borderRadius: BorderRadius.circular(1000),
gradient: RadialGradient(
center: Alignment(0.55, 0.55),
focalRadius: 64,
colors: [
Color(0xffF0F0F0),
Color(0xffE0E0E0),
],
),
),
));
}
void _changeSelect(int index){
setState(() {
toggleIndex = index;
switch (toggleIndex) {
case 0:
rPos = 4;
background = Colors.red;
colorOn = Colors.transparent;
colorOff = Colors.transparent;
break; // The switch statement must be told to exit, or it will execute every case.
case 1:
rPos = toggleButtonWidth / 2 - iconButtonLenght/2;
background = backgroundDefault;
colorOn = Colors.green;
colorOff = Colors.red;
break;
case 2:
rPos = toggleButtonWidth - iconButtonLenght-4;
background = Colors.green;
colorOff = Colors.transparent;
colorOn = Colors.transparent;
break;
default:
}
});
}
}
Hi I create the project and improvimented.
I liked the UI.
Hi, Sorry, I never published a package, you don't have access? I published now. I have no interest in making a plugin. If you want to make and use the code, you can do it, no problem. If you want to put me as a helper in the new switch plugin, no problem too. Feel free to do what you want.
One of the advantages of this package is that the values are configurable, it is a dynamic list and you will not need to do the conversion of values. In my database, I have situations 0 for false and 1 for true. In the standard switch, there must be conversion and then "disconversion" again.
The other advantage is the central position, as normal switches only have true or false, and in a checklist or form you would not want to fill it out as true or false.
I have these problems in my App´s, I need to have the central position so that the user chooses one or that is an option not applicable he leaves in the middle(null value or 2).
For this reason I am very interested in helping you to improve your card_settings package, I use it a lot. I'm still very new to flutter to develop and publish a package, I see many packages failing, I don't want to be one more :)
Okay, don’t worry, it’s good, so other people will test it. :) Users of my App asked me for this options and I was unable to attend. I will be a regular user of this widget and my users. Thank you for your help.