apptomate_custom_switch 0.0.1

CustomSwitch is a customizable switch widget for Flutter applications that allows toggling between two states with an optional label.

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
            },
          ),
          thumbIcon: WidgetStateProperty.resolveWith<Icon?>(
            (states) {
              return Icon(
                Icons.circle,
                size: 20, // 👈 Adjust size of the thumb
                color: states.contains(WidgetState.selected)
                    ? Colors.green // Thumb color when ON
                    : Colors.white, // Thumb color when OFF
              );
            },
          ),

          /// 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
  _CustomSwitchExampleState createState() => _CustomSwitchExampleState();
}

class _CustomSwitchExampleState extends State<MyHomePage> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: CustomSwitch(
            value: isSwitched,
            onChanged: (newValue) {
              setState(() {
                isSwitched = newValue;
              });
            },
            activeColor: Colors.green,
            labelStyle: TextStyle(
                color: Colors.black, fontWeight: FontWeight.w400, fontSize: 18),
            inactiveThumbColor: Colors.white,
            inactiveTrackColor: Colors.black,
            label: "Enable Notifications",
          ),
        ),
      ),
    );
  }
}