Skip to content

Commit 1eeaed3

Browse files
shravyackmshravyackm
committed
toggle switches in progress
1 parent 536fc5e commit 1eeaed3

2 files changed

Lines changed: 140 additions & 118 deletions

File tree

‎example/lib/main.dart‎

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@ class _MyHomePageState extends State<MyHomePage> {
7474
@override
7575

7676
Widget build(BuildContext context) {
77+
var screenWidth = MediaQuery.of(context).size.width;
78+
var screenHeight = MediaQuery.of(context).size.height;
7779

7880
return Scaffold(
7981

@@ -300,30 +302,49 @@ class _MyHomePageState extends State<MyHomePage> {
300302
// onThumbColor: Colors.indigo,
301303
// thumbSize: 30.0,
302304
// ),
303-
LabeledToggle(
304305

305-
//
306-
307-
forceWidth: true,
308-
value: switchValue,
309-
onChanged: (v) {
310-
setState(() {
311-
switchValue = v;
312-
});
313-
},
314-
// offBkColor: Colors.white,
315-
// onBkColor: Colors.white,
316-
// onBorderColor: Colors.green,
317-
// offBorderColor: Colors.red,
318-
// offText: "No",
319-
// onText: "YES",
320-
offThumbColor: Colors.blue,
321-
onThumbColor: Colors.white,
322-
thumbSize: 32.0,
323-
onBkColor: Colors.green.withOpacity(0.80),
324306

307+
Stack(
308+
children: <Widget>[
309+
Container(
310+
height: 30,
311+
width:60,
312+
// color:Colors.blue
313+
),
314+
315+
Positioned(
316+
top:2,
317+
child: Container(
318+
width: 36,
319+
height: 15,
320+
decoration: BoxDecoration(
321+
color: Colors.red,
322+
borderRadius: BorderRadius.all(Radius.circular(20))
323+
324+
),
325+
326+
),
327+
),
328+
Positioned(
329+
// right:20,
330+
331+
child: Container(
332+
height: 20,
333+
width: 20,
334+
decoration: BoxDecoration(
335+
shape: BoxShape.circle,
336+
color: Colors.white,
337+
boxShadow: [
338+
new BoxShadow(
339+
color: Colors.black.withOpacity(0.16),
340+
blurRadius: 6.0,
341+
spreadRadius: 0.0),
342+
]
343+
),
344+
)),
325345

326346

347+
],
327348
),
328349

329350

‎lib/components/toggle/gf_toggle.dart‎

Lines changed: 99 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -501,114 +501,115 @@ class _LabeledToggleState extends State<LabeledToggle>
501501
}
502502
}
503503
},
504-
child: Opacity(
504+
child:
505+
506+
Opacity(
505507
opacity: widget.onChanged == null ? 0.3 : 1.0,
506508
child: AnimatedContainer(
507509
duration: widget.duration,
508510
height: 20,
509-
width: widget.forceWidth ? widget.thumbSize * 1.4 : null,
511+
width: 40,
512+
// width: widget.forceWidth ? widget.thumbSize * 1.4 : null,
510513
child: Stack(
511514
children: <Widget>[
512-
Padding(
513-
padding: const EdgeInsets.only(top:1.5, bottom: 1.5),
514-
child: AnimatedAlign(
515-
curve: widget.curve,
516-
517-
alignment: _value ? Alignment.centerRight : Alignment.centerLeft,
518-
duration: widget.duration,
519-
child: RotationTransition(
520-
turns: AlwaysStoppedAnimation(animation.value / 360),
521-
child: AnimatedContainer(
522-
523-
duration: widget.duration,
524-
width: widget.thumbSize,
525-
height: widget.thumbSize,
526-
child: widget?.child,
527-
decoration: BoxDecoration(
528-
shape: widget.rounded ? BoxShape.circle : BoxShape.rectangle,
529-
color: _value ? widget.onThumbColor : widget.offThumbColor,
530-
),
515+
AnimatedAlign(
516+
curve: widget.curve,
517+
alignment: _value ? Alignment.centerRight : Alignment.centerLeft,
518+
duration: widget.duration,
519+
child: RotationTransition(
520+
turns: AlwaysStoppedAnimation(animation.value / 360),
521+
child: AnimatedContainer(
522+
523+
duration: widget.duration,
524+
width: widget.thumbSize,
525+
height: 150,
526+
child: widget?.child,
527+
decoration: BoxDecoration(
528+
shape: widget.rounded ? BoxShape.circle : BoxShape.rectangle,
529+
color: _value ? widget.onThumbColor : widget.offThumbColor,
531530
),
532531
),
533532
),
534533
),
535-
Padding(
536-
padding: EdgeInsets.only(
537-
right: _value ? widget.thumbSize : 1,
538-
left: _value ? 2.0 : widget.thumbSize),
539-
child: Row(
540-
children: <Widget>[
541-
Expanded(child: Text('l')),
542-
Expanded(
543-
child: Padding(
544-
padding: const EdgeInsets.all(0),
545-
child: Container(
546-
width: 80,
547-
height: 90,
548-
child: FittedBox(
549-
child: Center(
550-
child: AnimatedSwitcher(
551-
duration: widget.duration,
552-
switchInCurve: widget.curve,
553-
switchOutCurve: widget.curve,
554-
transitionBuilder:
555-
(Widget child, Animation<double> animation) {
556-
switch (widget.transitionType) {
557-
case TextTransitionTypes.ROTATE:
558-
{
559-
return RotationTransition(
560-
child: child,
561-
turns: animation,
562-
);
563-
}
564-
break;
565-
case TextTransitionTypes.FADE:
566-
{
567-
return FadeTransition(
568-
child: child,
569-
opacity: animation,
570-
);
571-
}
572-
break;
573-
574-
case TextTransitionTypes.SIZE:
575-
{
576-
return SizeTransition(
577-
child: child,
578-
sizeFactor: animation,
579-
axisAlignment: widget.value ? -5.0 : 5.0,
580-
axis: Axis.horizontal,
581-
);
582-
}
583-
break;
584-
585-
case TextTransitionTypes.SCALE:
586-
{
587-
return ScaleTransition(
588-
child: child,
589-
scale: animation,
590-
);
591-
}
592-
break;
593-
}
594-
},
595-
child: Text(
596-
_value ? widget.onText : widget.offText,
597-
key: ValueKey<bool>(_value),
598-
style: TextStyle(
599-
color: _value
600-
? widget.onTextColor
601-
: widget.offTextColor),
602-
),
603-
),
604-
),
605-
),
606-
),
607-
),
608-
),
609-
],
610-
),
611-
)
534+
Positioned(
535+
536+
child: Padding(
537+
padding: EdgeInsets.only(
538+
right: _value ? widget.thumbSize : 1,
539+
left: _value ? 2.0 : widget.thumbSize),
540+
child: Row(
541+
children: <Widget>[
542+
// Expanded(child: Text('l')),
543+
Expanded(
544+
child: Padding(
545+
padding: const EdgeInsets.all(0),
546+
child: Container(
547+
width: 80,
548+
height: 100,
549+
child: FittedBox(
550+
child: Center(
551+
child: AnimatedSwitcher(
552+
duration: widget.duration,
553+
switchInCurve: widget.curve,
554+
switchOutCurve: widget.curve,
555+
transitionBuilder:
556+
(Widget child, Animation<double> animation) {
557+
switch (widget.transitionType) {
558+
case TextTransitionTypes.ROTATE:
559+
{
560+
return RotationTransition(
561+
child: child,
562+
turns: animation,
563+
);
564+
}
565+
break;
566+
case TextTransitionTypes.FADE:
567+
{
568+
return FadeTransition(
569+
child: child,
570+
opacity: animation,
571+
);
572+
}
573+
break;
574+
575+
case TextTransitionTypes.SIZE:
576+
{
577+
return SizeTransition(
578+
child: child,
579+
sizeFactor: animation,
580+
axisAlignment: widget.value ? -5.0 : 5.0,
581+
axis: Axis.horizontal,
582+
);
583+
}
584+
break;
585+
586+
case TextTransitionTypes.SCALE:
587+
{
588+
return ScaleTransition(
589+
child: child,
590+
scale: animation,
591+
);
592+
}
593+
break;
594+
}
595+
},
596+
child: Text(
597+
_value ? widget.onText : widget.offText,
598+
key: ValueKey<bool>(_value),
599+
style: TextStyle(
600+
color: _value
601+
? widget.onTextColor
602+
: widget.offTextColor),
603+
),
604+
),
605+
),
606+
),
607+
),
608+
),
609+
),
610+
],
611+
),
612+
))
612613
],
613614
),
614615
decoration: BoxDecoration(

0 commit comments

Comments
 (0)