Xlive Switch: A Flutter Plugin for Enhancing UI Interactivity
Published on by Flutter News Hub
The Xlive Switch plugin for Flutter brings the visually appealing and intuitive Xlive design concept to your mobile applications. Inspired by Oleg Frolov's animation design from Dribbble, this plugin allows developers to seamlessly integrate a stylish and functional toggle switch into their UI.
Getting Started
To incorporate Xlive Switch into your Flutter project, follow these steps:
-
Add the following dependency to your
pubspec.yaml
file:dependencies: xlive_switch: ^latest_version
-
Import the package into your Flutter code:
import 'package:xlive_switch/xlive_switch.dart';
Usage
Xlive Switch is incredibly easy to use. Simply define a XlivSwitch
widget and set its value
and onChanged
properties:
XlivSwitch(
value: _value,
onChanged: _changeValue,
)
-
value
: Represents the current state of the switch, eithertrue
orfalse
. -
onChanged
: A callback function that is triggered when the switch's state changes.
Customizing Appearance
You can customize the appearance of the Xlive Switch by setting the following properties:
-
activeColor
: Background color when the switch value istrue
. -
unActiveColor
: Background color when the switch value isfalse
. -
thumbColor
: Color of the switch's thumb.
Example
Here's a complete example demonstrating how to use the Xlive Switch plugin:
import 'package:flutter/material.dart';
import 'package:xlive_switch/xlive_switch.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
bool _value = true;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Xlive Switch Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
XlivSwitch(
value: _value,
onChanged: _changeValue,
),
Text('Current value: $_value'),
],
),
),
),
);
}
void _changeValue(bool value) {
setState(() {
_value = value;
});
}
}
Conclusion
The Xlive Switch plugin empowers Flutter developers to add a touch of elegance and functionality to their mobile applications. With its customizable appearance and ease of use, it's an ideal choice for adding interactive toggle switches to your UI designs.