我是新的扑动，我想设置图标/图像按两性。有人能帮帮我吗?
我使用了custom_radio_grouped_button:包
Container(
child: CustomRadioButton(
elevation: 0,
absoluteZeroSpacing: false,
unSelectedColor: Theme.of(context).canvasColor,
buttonLables: [
'Male',
'Female',
],
buttonValues: [
"MALE",
"FEMALE",
],
buttonTextStyle: ButtonTextStyle(
textStyle: TextStyle(fontSize: 16)),
radioButtonValue: (value) {
print(value);
},
selectedColor: Colors.green,
),
),
正如Theophile所说，custom_radio_grouped_button到目前为止，软件包不允许添加图标或图像。
然而，如果你想利用这个包提供的其他特性，但又不想重新发明轮子，你可以把包的代码复制到项目的新文件中，并做一些你需要的编辑，使它像你期望的那样工作。
尽管我不建议这样做考虑到我不容易找到另一个小部件来解决这个问题，而且custom_radio_grouped_button的实现相对较小，因此在本例中可以采用这种方法。
作为一个例子，我已经这样做了，下面是修改后的代码。您可以将此代码复制/粘贴到项目的本地文件上(可能命名为custom_radio_button_shape.dart)。):import 'package:flutter/material.dart';
// ignore: must_be_immutable
class CustomRadioButtonShape<T> extends StatefulWidget {
CustomRadioButtonShape({
this.buttonWidgets,
this.buttonValues,
this.buttonTextStyle = const ButtonTextStyleShape(),
this.autoWidth = false,
this.radioButtonValue,
this.unSelectedColor,
this.unSelectedBorderColor,
this.padding = 3,
this.spacing = 0.0,
this.selectedColor,
this.selectedBorderColor,
this.height = 35,
this.width = 100,
this.enableButtonWrap = false,
this.horizontal = false,
this.enableShape = false,
this.elevation = 10,
this.defaultSelected,
this.customShape,
this.absoluteZeroSpacing = false,
this.wrapAlignment = WrapAlignment.start,
}) : assert(buttonWidgets.length == buttonValues.length,
"Button values list and button lables list should have same number of eliments "),
assert(unSelectedColor != null, "Unselected color cannot be null"),
assert(buttonValues.toSet().length == buttonValues.length,
"Multiple buttons with same value cannot exist"),
// assert(buttonLables.toSet().length == buttonLables.length,
// "Multiple buttons label wth same value cannot exist"),
assert(selectedColor != null, "Selected color cannot be null");
///Orientation of the Button Group
final bool horizontal;
///Values of button
final List<T> buttonValues;
///This option will make sure that there is no spacing in between buttons
final bool absoluteZeroSpacing;
///Default value is 35
final double height;
double padding;
///Spacing between buttons
double spacing;
///Default selected value
final T defaultSelected;
///Only applied when in vertical mode
///This will use minimum space required
///If enables it will ignore [width] field
final bool autoWidth;
///Use this if you want to keep width of all the buttons same
final double width;
final List<Widget> buttonWidgets;
///Styling class for label
final ButtonTextStyleShape buttonTextStyle;
final void Function(T) radioButtonValue;
///Unselected Color of the button
final Color unSelectedColor;
///Selected Color of button
final Color selectedColor;
///Unselected Color of the button border
final Color unSelectedBorderColor;
///Selected Color of button border
final Color selectedBorderColor;
/// A custom Shape can be applied (will work only if [enableShape] is true)
final ShapeBorder customShape;
///alignment for button when [enableButtonWrap] is true
final WrapAlignment wrapAlignment;
/// This will enable button wrap (will work only if orientation is vertical)
final bool enableButtonWrap;
///if true button will have rounded corners
///If you want custom shape you can use [customShape] property
final bool enableShape;
final double elevation;
_CustomRadioButtonShapeState createState() => _CustomRadioButtonShapeState();
}
class _CustomRadioButtonShapeState extends State<CustomRadioButtonShape> {
Widget _currentSelectedWidget;
Color borderColor(index) => (_currentSelectedWidget == widget.buttonWidgets[index] ? widget.selectedBorderColor : widget.unSelectedBorderColor) ?? Theme.of(context).primaryColor;
@override
void initState() {
super.initState();
if (widget.defaultSelected != null) {
if (widget.buttonValues.contains(widget.defaultSelected)) {
int index = widget.buttonValues.indexOf(widget.defaultSelected);
_currentSelectedWidget = widget.buttonWidgets[index];
} else
throw Exception("Default Value not found in button value list");
}
}
List<Widget> _buildButtonsColumn() {
return widget.buttonValues.map((e) {
int index = widget.buttonValues.indexOf(e);
return Padding(
padding: EdgeInsets.all(widget.padding),
child: Card(
margin: EdgeInsets.all(widget.absoluteZeroSpacing ? 0 : 4),
color: _currentSelectedWidget == widget.buttonWidgets[index]
? widget.selectedColor
: widget.unSelectedColor,
elevation: widget.elevation,
shape: widget.enableShape
? widget.customShape == null
? RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(50)),
)
: widget.customShape
: null,
child: Container(
height: widget.height,
child: MaterialButton(
shape: widget.enableShape
? widget.customShape == null
? OutlineInputBorder(
borderSide: BorderSide(
color: borderColor(index), width: 1),
borderRadius: BorderRadius.all(Radius.circular(20)),
)
: widget.customShape
: OutlineInputBorder(
borderSide: BorderSide(
color: borderColor(index), width: 1),
borderRadius: BorderRadius.zero,
),
onPressed: () {
widget.radioButtonValue(e);
setState(() {
_currentSelectedWidget = widget.buttonWidgets[index];
});
},
child: Center(
child: widget.buttonWidgets[index],/*Text(
widget.buttonLables[index],
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: widget.buttonTextStyle.textStyle.copyWith(
color: _currentSelectedLabel == widget.buttonLables[index]
? widget.buttonTextStyle.selectedColor
: widget.buttonTextStyle.unSelectedColor,
),
),*/
),
),
),
),
);
}).toList();
}
List<Widget> _buildButtonsRow() {
return widget.buttonValues.map((e) {
int index = widget.buttonValues.indexOf(e);
return Card(
margin: EdgeInsets.all(widget.absoluteZeroSpacing ? 0 : 4),
color: _currentSelectedWidget == widget.buttonWidgets[index]
? widget.selectedColor
: widget.unSelectedColor,
elevation: widget.elevation,
shape: widget.enableShape
? widget.customShape == null
? RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(50)),
)
: widget.customShape
: null,
child: Container(
height: widget.height,
width: widget.autoWidth ? null : widget.width,
constraints: BoxConstraints(maxWidth: 250),
child: MaterialButton(
shape: widget.enableShape
? widget.customShape == null
? OutlineInputBorder(
borderSide: BorderSide(
color: borderColor(index), width: 1),
borderRadius: BorderRadius.all(Radius.circular(20)),
)
: widget.customShape
: OutlineInputBorder(
borderSide: BorderSide(
color: borderColor(index), width: 1),
borderRadius: BorderRadius.zero,
),
onPressed: () {
widget.radioButtonValue(e);
setState(() {
_currentSelectedWidget = widget.buttonWidgets[index];
});
},
child: Center(
child: widget.buttonWidgets[index],/*Text(
widget.buttonLables[index],
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: widget.buttonTextStyle.textStyle.copyWith(
color: _currentSelectedLabel == widget.buttonLables[index]
? widget.buttonTextStyle.selectedColor
: widget.buttonTextStyle.unSelectedColor,
),
),*/
),
),
),
);
}).toList();
}
@override
Widget build(BuildContext context) {
if (widget.absoluteZeroSpacing) {
widget.spacing = 0;
widget.padding = 0;
}
return _buildRadioButtons();
}
_buildRadioButtons() {
if (widget.horizontal)
return Container(
height: widget.height * (widget.buttonWidgets.length * 1.5) +
widget.padding * 2 * widget.buttonWidgets.length,
child: Center(
child: CustomListViewSpacingShape(
spacing: widget.spacing,
scrollDirection: Axis.vertical,
children: _buildButtonsColumn(),
),
),
);
if (!widget.horizontal && widget.enableButtonWrap)
return Container(
child: Center(
child: Wrap(
spacing: widget.spacing,
direction: Axis.horizontal,
alignment: widget.wrapAlignment,
children: _buildButtonsRow(),
),
),
);
if (!widget.horizontal && !widget.enableButtonWrap)
return Container(
height: widget.height + widget.padding * 2,
child: Center(
child: CustomListViewSpacingShape(
spacing: widget.spacing,
scrollDirection: Axis.horizontal,
children: _buildButtonsRow(),
),
),
);
}
}
class ButtonTextStyleShape {
///Selected color of Text
final Color selectedColor;
///Unselected color of Text
final Color unSelectedColor;
final TextStyle textStyle;
const ButtonTextStyleShape({
this.selectedColor = Colors.white,
this.unSelectedColor = Colors.black,
this.textStyle = const TextStyle(),
});
}
class CustomListViewSpacingShape extends StatelessWidget {
final List<Widget> children;
final double spacing;
final Axis scrollDirection;
CustomListViewSpacingShape(
{@required this.children,
this.spacing = 0.0,
this.scrollDirection = Axis.vertical});
Widget build(BuildContext context) {
return ListView(
scrollDirection: scrollDirection,
children: children
.map((c) => Container(
padding: EdgeInsets.all(spacing),
child: c,
))
.toList(),
);
}
}
然后你可以这样使用它(在这个例子中，我也使用了https://pub.dev/packages/flutter_icons包，它包含了大量的伟大的图标，但你可以使用你自己的自定义图像，如果你需要的话)，这是结果
CustomRadioButtonShape(
elevation: 0,
absoluteZeroSpacing: true,
unSelectedColor: Theme.of(context).canvasColor,
buttonWidgets: [
Row(
children: [
Icon(
FontAwesome.male,
size: 15,
),
Padding(
padding: const EdgeInsets.only(left: 5),
child: Text('Male'),
),
],
),
Row(
children: [
Icon(
FontAwesome.female,
size: 15,
),
Padding(
padding: const EdgeInsets.only(left: 5),
child: Text('Female'),
),
],
),
],
buttonValues: [
"MALE",
"FEMALE",
],
buttonTextStyle: ButtonTextStyleShape(
selectedColor: Colors.white,
unSelectedColor: Colors.black,
textStyle: TextStyle(fontSize: 16)
),
radioButtonValue: (value) {
print(value);
},
selectedColor: Theme.of(context).accentColor,
),
希望对你有帮助。