I am trying to make a reusable Switch Widget using the flutter_switch package https://pub.dev/packages/flutter_switch.

Unfortnaly how i maked it, it does not change the look, the size etc. of the widget when i use it. If i make a reusable Swich without using the package it works fine.

Somebody have a idea what is wrong here? Thanks for any help

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

class MyFlutterSwitch extends StatelessWidget {
 const MyFlutterSwitch(
     {required this.onToggle,
     required this.value,
     required this.activeColor,
     required this.inactiveColor,
     required this.activeTextColor,
     required this.inactiveTextColor,
     required this.toggleColor,
     required this.activeToggleColor,
     required this.inactiveToggleColor,
     this.padding,
     this.borderRadius,
     this.toogleSize,
     Key? key})
     : super(key: key);

 final void Function(bool) onToggle;
 final bool value;
 final Color activeColor;
 final Color inactiveColor;
 final Color activeTextColor;
 final Color inactiveTextColor;
 final Color toggleColor;
 final Color? activeToggleColor;
 final Color? inactiveToggleColor;
 final double? padding;
 final double? borderRadius;
 final double? toogleSize;

 @override
 Widget build(BuildContext context) {
   return SizedBox(
     height: 20.0,
     width: 40.0,
     child: FlutterSwitch(
       toggleSize: 15.0,
       borderRadius: 60.0,
       padding: 3.0,
       activeTextColor: const Color.fromARGB(255, 198, 40, 40),
       inactiveTextColor: const Color.fromARGB(255, 46, 125, 50),
       activeToggleColor: Colors.red[800],
       inactiveToggleColor: Colors.green[800],
       inactiveColor: const Color(0xFF55DDCA),
       activeColor: const Color(0xFFF87A54),
       onToggle: onToggle,
       value: value,
     ),
   );
 }
}

CodePudding user response：

You need to pass your functions values if you want to pass custom values in every instance of this widget if you want :

class MyFlutterSwitch extends StatelessWidget {
 const MyFlutterSwitch(
     {
       this.toggleSize: 15.0,
       this.borderRadius: 60.0,
       this.padding: 3.0,
       this.activeTextColor: const Color.fromARGB(255, 198, 40, 40),
       this.inactiveTextColor: const Color.fromARGB(255, 46, 125, 50),
       this.activeToggleColor: Colors.red[800],
       this.inactiveToggleColor: Colors.green[800],
       this.inactiveColor: const Color(0xFF55DDCA),
       this.activeColor: const Color(0xFFF87A54),
       
       required this.onToggle,
     required this.value,
     Key? key})
     : super(key: key);

 final void Function(bool) onToggle;
 final bool value;
 final Color activeColor;
 final Color inactiveColor;
 final Color activeTextColor;
 final Color inactiveTextColor;
 final Color toggleColor;
 final Color? activeToggleColor;
 final Color? inactiveToggleColor;
 final double? padding;
 final double? borderRadius;
 final double? toogleSize;

 @override
 Widget build(BuildContext context) {
   return SizedBox(
     height: 20.0,
     width: 40.0,
     child: FlutterSwitch(
       toggleSize: toggleSize,
       borderRadius: borderRadius,
       padding: padding,
       activeTextColor: activeTextColor,  
       inactiveTextColor: inactiveTextColor,
       activeToggleColor: activeToggleColor,
       inactiveToggleColor: inactiveToggleColor,
       inactiveColor: inactiveColor,
       activeColor: activeColor,
       onToggle: onToggle,
       value: value,
     ),
   );
 }
}

CodePudding user response：

It looks like you're not passing in the values from your parameter list. Your build method should look something like this.

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 20.0,
      width: 40.0,
      child: FlutterSwitch(
        toggleSize: toogleSize ?? 15.0,
        borderRadius: borderRadius ?? 60.0,
        padding: padding ?? 3.0,
        activeTextColor: activeColor,
        inactiveTextColor: inactiveColor,
        activeToggleColor: activeToggleColor ?? Colors.red[800],
        inactiveToggleColor: inactiveToggleColor ?? Colors.green[800],
        inactiveColor: inactiveColor,
        activeColor: activeColor,
        onToggle: onToggle,
        value: value,
      ),
    );
  }