使用flaft_Switch包的可重复使用的Switch Widget

Question

我正在尝试使用flatter_Switch包制作一个可重复使用的Switch Widgethttps://pub.dev/packages/flutter_switch.

不幸的是，当我使用它时，它不会改变小部件的外观、大小等。如果我在不使用包装的情况下制作一个可重复使用的Swich，效果很好。

有人知道这里出了什么问题吗？感谢的帮助

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,
),
);
}
}

Answer 1

如果你想在这个小部件的每个实例中传递自定义值，你需要传递你的函数值：

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,
),
);
}
}

Answer 2

看起来您没有传入参数列表中的值。您的构建方法应该是这样的。

@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,
),
);
}