flutter - 如何自定义 flutter 中的单选按钮？

Question

我想做这些按钮，我尝试使用单选按钮，但无法自定义它们。你有什么想法我该怎么做？

Answer 1

我写了一个可重复使用的小部件，它模仿了单选按钮的行为:

自定义 radio 小部件

class CustomRadioWidget<T> extends StatelessWidget {
  final T value;
  final T groupValue;
  final ValueChanged<T> onChanged;
  final double width;
  final double height;

  CustomRadioWidget({this.value, this.groupValue, this.onChanged, this.width = 32, this.height = 32});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GestureDetector(
        onTap: () {
          onChanged(this.value);
        },
        child: Container(
          height: this.height,
          width: this.width,
          decoration: ShapeDecoration(
            shape: CircleBorder(),
            gradient: LinearGradient(
              colors: [
                Color(0xFF49EF3E),
                Color(0xFF06D89A),
              ],
            ),
          ),

          child: Center(
            child: Container(
              height: this.height - 8,
              width: this.width - 8,
              decoration: ShapeDecoration(
                shape: CircleBorder(),
                gradient: LinearGradient(
                  colors: value == groupValue ? [
                    Color(0xFFE13684),
                    Color(0xFFFF6EEC),
                  ] : [
                    Theme.of(context).scaffoldBackgroundColor,
                    Theme.of(context).scaffoldBackgroundColor,
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

您可以将其添加到您的代码中，例如:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
     CustomRadioWidget(
           value: "0",
           groupValue: _radValue,
           onChanged: (String value) {
              setState(() {
                 _radValue = value;
              });
           },
      ),
      CustomRadioWidget(
           value: "1",
           groupValue: _radValue,
           onChanged: (String value) {
              setState(() {
                _radValue = value;
              });
           },
      ),
   ],
),

输出如下所示: