apptomate_custom_switch 0.0.2

A highly customizable animated toggle switch with label support and smooth transitions.

example/lib/main.dart

import 'package:apptomate_custom_switch/apptomate_custom_switch.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        switchTheme: SwitchThemeData(
          /// Controls the color of the thumb (small circle)
          thumbColor: WidgetStateProperty.resolveWith<Color>(
            (states) {
              if (states.contains(WidgetState.selected)) {
                return Colors.green; // Active thumb color
              }
              return Colors.white; // Inactive thumb color
            },
          ),

          /// Controls the color of the switch track (background)
          trackColor: WidgetStateProperty.resolveWith<Color>(
            (states) {
              if (states.contains(WidgetState.selected)) {
                return Colors.green
                    .withValues(alpha: 0.5); // Active track color
              }
              return Colors.red.withValues(alpha: 0.5); // Inactive track color
            },
          ),

          /// Controls the border color of the switch
          trackOutlineColor: WidgetStateProperty.resolveWith<Color>(
            (states) {
              if (states.contains(WidgetState.selected)) {
                return Colors.transparent; // Active border color
              }
              return Colors.transparent; // Custom inactive border color
            },
          ),
        ),
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<MyHomePage> {
  bool isSwitched = false;
  bool isEnabled = false;
  bool _darkMode = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom Switch Examples')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // Basic usage
            CustomSwitch(
              activeToggleColor: Colors.black,
              inactiveToggleColor: Colors.greenAccent,
              width: 80,
              height: 41.3,
              activeBorder: Border.all(color: Colors.black, width: 1),
              inactiveBorder: Border.all(color: Colors.grey, width: 1),
              activeColor: Colors.redAccent,
              toggleSize: 25,
              value:isSwitched,
              borderRadius: 30.0,
              padding: 3.0,
              inactiveColor: Colors.green,
              onToggle: (val) {
                setState(() {
                  isSwitched=val;
                });
              },
            ),
            CustomSwitch(
              value: isEnabled,
              onToggle: (val) {
                setState(() => isEnabled = val);
              },
              label: "Enable Feature",
              labelPosition: LabelPosition.left,
            )
          ],
        ),
      ),
    );
  }
}