From 1d26a5719b8d32ec34962a66b0ce09f64d127ad1 Mon Sep 17 00:00:00 2001 From: Jonas Franz Date: Tue, 28 Sep 2021 15:53:46 +0200 Subject: [PATCH] Add option to use custom decoration instead of colors, border and border --- example/lib/main.dart | 86 ++++++++++++++++++++++++++++++++--------- lib/flutter_switch.dart | 29 +++++++++++--- 2 files changed, 91 insertions(+), 24 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 61cb3d7..bd14f2f 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -29,6 +29,7 @@ class _MyHomePageState extends State { bool status6 = false; bool status7 = false; bool status8 = false; + bool status9 = false; bool isSwitchOn = false; Color _textColor = Colors.black; @@ -129,6 +130,55 @@ class _MyHomePageState extends State { ], ), SizedBox(height: 20.0), + Text("Custom Decoration"), + SizedBox(height: 10.0), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + FlutterSwitch( + width: 100.0, + height: 55.0, + toggleSize: 45.0, + value: status3, + padding: 2.0, + toggleColor: Color.fromRGBO(225, 225, 225, 1), + toggleBorder: Border.all( + color: Color.fromRGBO(2, 107, 206, 1), + width: 5.0, + ), + activeDecoration: BoxDecoration( + borderRadius: BorderRadius.circular(30), + gradient: LinearGradient( + colors: [ + Colors.red, + Colors.orange, + ], + ), + ), + inactiveDecoration: BoxDecoration( + borderRadius: BorderRadius.circular(30), + gradient: LinearGradient( + colors: [ + Colors.blue, + Colors.orange, + ], + ), + ), + onToggle: (val) { + setState(() { + status3 = val; + }); + }, + ), + Container( + alignment: Alignment.centerRight, + child: Text( + "Value: $status3", + ), + ), + ], + ), + SizedBox(height: 20.0), Text("With 'On' and 'Off' text and custom text colors"), SizedBox(height: 10.0), Row( @@ -138,17 +188,17 @@ class _MyHomePageState extends State { showOnOff: true, activeTextColor: Colors.black, inactiveTextColor: Colors.blue[50], - value: status3, + value: status4, onToggle: (val) { setState(() { - status3 = val; + status4 = val; }); }, ), Container( alignment: Alignment.centerRight, child: Text( - "Value: $status3", + "Value: $status4", ), ), ], @@ -164,17 +214,17 @@ class _MyHomePageState extends State { height: 25.0, valueFontSize: 12.0, toggleSize: 18.0, - value: status4, + value: status5, onToggle: (val) { setState(() { - status4 = val; + status5 = val; }); }, ), Container( alignment: Alignment.centerRight, child: Text( - "Value: $status4", + "Value: $status5", ), ), ], @@ -190,20 +240,20 @@ class _MyHomePageState extends State { height: 55.0, valueFontSize: 25.0, toggleSize: 45.0, - value: status5, + value: status6, borderRadius: 30.0, padding: 8.0, showOnOff: true, onToggle: (val) { setState(() { - status5 = val; + status6 = val; }); }, ), Container( alignment: Alignment.centerRight, child: Text( - "Value: $status5", + "Value: $status6", ), ), ], @@ -217,21 +267,21 @@ class _MyHomePageState extends State { FlutterSwitch( activeText: "All Good. Negative.", inactiveText: "Under Quarantine.", - value: status6, + value: status7, valueFontSize: 10.0, width: 110, borderRadius: 30.0, showOnOff: true, onToggle: (val) { setState(() { - status6 = val; + status7 = val; }); }, ), Container( alignment: Alignment.centerRight, child: Text( - "Value: $status6", + "Value: $status7", ), ), ], @@ -253,7 +303,7 @@ class _MyHomePageState extends State { width: 100.0, height: 55.0, toggleSize: 45.0, - value: status7, + value: status8, borderRadius: 30.0, padding: 2.0, activeToggleColor: Color(0xFF6E40C9), @@ -278,7 +328,7 @@ class _MyHomePageState extends State { ), onToggle: (val) { setState(() { - status7 = val; + status8 = val; if (val) { _textColor = Colors.white; @@ -294,7 +344,7 @@ class _MyHomePageState extends State { ), Container( alignment: Alignment.centerRight, - child: Text("Value: $status7"), + child: Text("Value: $status8"), ), ], ), @@ -308,7 +358,7 @@ class _MyHomePageState extends State { width: 100.0, height: 55.0, toggleSize: 45.0, - value: status8, + value: status9, borderRadius: 30.0, padding: 2.0, activeToggleColor: Color(0xFF0082C8), @@ -331,13 +381,13 @@ class _MyHomePageState extends State { ), onToggle: (val) { setState(() { - status8 = val; + status9 = val; }); }, ), Container( alignment: Alignment.centerRight, - child: Text("Value: $status8"), + child: Text("Value: $status9"), ), ], ), diff --git a/lib/flutter_switch.dart b/lib/flutter_switch.dart index e30ca12..94d05eb 100644 --- a/lib/flutter_switch.dart +++ b/lib/flutter_switch.dart @@ -15,7 +15,9 @@ class FlutterSwitch extends StatefulWidget { Key? key, required this.value, required this.onToggle, + this.activeDecoration, this.activeColor = Colors.blue, + this.inactiveDecoration, this.inactiveColor = Colors.grey, this.activeTextColor = Colors.white70, this.inactiveTextColor = Colors.white70, @@ -111,11 +113,21 @@ class FlutterSwitch extends StatefulWidget { /// [inactiveTextFontWeight] - The font weight to use on the text value when the switch is off. final String? inactiveText; - /// The color to use on the switch when the switch is on. + /// The decoration to use on the switch when the switch is on. + /// If null the other values like [activeColor], [borderRadius] + /// and [activeSwitchBorder] will be used. + final Decoration? activeDecoration; + + /// The color to use on the switch when the switch is off. /// /// Defaults to [Colors.blue]. final Color activeColor; + /// The decoration to use on the switch when the switch is off. + /// If null the other values like [inactiveColor], [borderRadius] + /// and [inactiveSwitchBorder] will be used. + final Decoration? inactiveDecoration; + /// The color to use on the switch when the switch is off. /// /// Defaults to [Colors.grey]. @@ -304,6 +316,9 @@ class _FlutterSwitchState extends State Border? _switchBorder; Border? _toggleBorder; + Decoration? decoration = + widget.value ? widget.activeDecoration : widget.inactiveDecoration; + if (widget.value) { _toggleColor = widget.activeToggleColor ?? widget.toggleColor; _switchColor = widget.activeColor; @@ -345,11 +360,13 @@ class _FlutterSwitchState extends State width: widget.width, height: widget.height, padding: EdgeInsets.all(widget.padding), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(widget.borderRadius), - color: _switchColor, - border: _switchBorder, - ), + decoration: decoration ?? + BoxDecoration( + borderRadius: + BorderRadius.circular(widget.borderRadius), + color: _switchColor, + border: _switchBorder, + ), child: Stack( children: [ AnimatedOpacity(