Xlive Switch: A Flutter Plugin for Enhancing UI Interactivity

Published on by Flutter News Hub

Xlive Switch: A Flutter Plugin for Enhancing UI Interactivity

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:

  1. Add the following dependency to your pubspec.yaml file:

    dependencies:
      xlive_switch: ^latest_version
    
  2. 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, either true or false.
  • 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 is true.
  • unActiveColor: Background color when the switch value is false.
  • 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.

Flutter News Hub