Animated Toggle #

Animated Toggle Give you easy way to make your custom Animated toggle.

Installation #

Add this to your pubspec.yaml:

dependencies:
  your_package_name: ^1.0.0

Features #

![Default Style](https://github.com/LoayOmar/Animated_Toggle/blob/master/assets/images/1.jpeg)
![Default Style With Under line](https://github.com/LoayOmar/Animated_Toggle/blob/master/assets/images/2.jpeg)
![Activate the current index under line color](https://github.com/LoayOmar/Animated_Toggle/blob/master/assets/images/3.jpg)
![Use only under line style](https://github.com/LoayOmar/Animated_Toggle/blob/master/assets/images/4.jpg)
![](https://github.com/LoayOmar/Animated_Toggle/blob/master/assets/images/5.jpg)
![](https://github.com/LoayOmar/Animated_Toggle/blob/master/assets/images/6.jpg)
![Control the colors](https://github.com/LoayOmar/Animated_Toggle/blob/master/assets/images/7.jpg)
![](https://github.com/LoayOmar/Animated_Toggle/blob/master/assets/images/8.jpg)

Getting started #

import 'package:your_package_name/your_package_name.dart';

void main() {
  
}

// Start use th package in your State Widget

Usage #

Simple Example about how to use

class MyAnimatedToggle extends StatefulWidget {
  const MyAnimatedToggle({super.key});

  @override
  State<MyAnimatedToggle> createState() => _MyAnimatedToggleState();
}

class _MyAnimatedToggleState extends State<MyAnimatedToggle> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Animated Toggle'),
      ),
      body: Center(
        child: AnimatedToggle(
          taps: const ['First', 'Second', 'Last'],
          width: MediaQuery.of(context).size.width,
          height: 48,
          duration: const Duration(milliseconds: 500),
          background: Colors.grey,
          activeColor: Colors.indigo,
          activeTextStyle: const TextStyle(
              fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white),
          inActiveTextStyle: const TextStyle(
              fontSize: 14, fontWeight: FontWeight.w400, color: Colors.indigo),
          horizontalPadding: 4,
          verticalPadding: 4,
          activeHorizontalPadding: 0,
          activeVerticalPadding: 0,
          radius: 14,
          activeButtonRadius: 14,
          underLineHeight: 1,
          activeUnderLineHeight: 2,
          index: 0,
          onChange: (index) {},
          underLineColor: Colors.grey,
          activeUnderLineColor: Colors.black,
          showUnderLine: false,
          showActiveButtonColor: true,
        ),
      ),
    );
  }
}

Additional information #

Say to me in GitHub what you need to see in the package in the next update