如何在 bottomsheet flutter 中设置单选按钮

Question

我想做一个设计，点击底部 sheet 它会显示单选按钮。当我 select 单选按钮时，它将打开日期选择器。下面是我单击单选按钮时的代码，它不是 selecting 单选按钮。我是 flutter 的新手，有人可以帮我找出代码中的错误吗？

import 'package:flutter/material.dart';

import 'BottomSheetWidget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo', home: HomeView());
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: MyFloatingButton(),
    );
  }
}

class MyFloatingButton extends StatefulWidget {
  @override
  _MyFloatingButtonState createState() => _MyFloatingButtonState();
}

class _MyFloatingButtonState extends State<MyFloatingButton> {
  bool _show = true;
  @override
  Widget build(BuildContext context) {
    int _radioValue = 0;
    /* var sheetController = showBottomSheet(
        context: context,
        builder: (context) => BottomSheetWidget());*/
    void _handleRadioValueChange(int value) {
      setState(() {
        _radioValue = value;
      });
      print("first"+value.toString()+"radiovalue" +_radioValue.toString());

    }
    return  Container(
      margin: EdgeInsets.all(10.0),
      child: new Wrap(
        children: <Widget>[
          Center(
              child: Container(
                  height: 3.0, width: 40.0, color: Color(0xFF32335C))),
          SizedBox(
            height: 10.0,
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              new Radio(
                value: 0,
                groupValue: _radioValue,
                onChanged: (value) {setState(() {
                  _radioValue=value;
                });
                print("radiofirst"+value.toString()+"radiovalue" +_radioValue.toString());
                _handleRadioValueChange(value);
                },
              ),
              new Text(
                'Single Date',
                style: new TextStyle(fontSize: 16.0),
              ),
              new Radio(
                value: 1,
                groupValue: _radioValue,
                onChanged:  (value) {setState(() {
                  _radioValue=value;
                });
                print("radiosecond "+value.toString()+"radiovalue " +_radioValue.toString());
                _handleRadioValueChange(value);
                },
              ),
              new Text(
                'Dual Date',
                style: new TextStyle(
                  fontSize: 16.0,
                ),
              ),
            ],
          ),


        ],
      ),
    );
  }

}

Answer 1

您可以复制粘贴运行下面的完整代码
您可以从 build

移出 int _radioValue = 0; 和 _handleRadioValueChange

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo', home: HomeView());
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: MyFloatingButton(),
    );
  }
}

class MyFloatingButton extends StatefulWidget {
  @override
  _MyFloatingButtonState createState() => _MyFloatingButtonState();
}

class _MyFloatingButtonState extends State<MyFloatingButton> {
  bool _show = true;
  int _radioValue = 0;
  /* var sheetController = showBottomSheet(
        context: context,
        builder: (context) => BottomSheetWidget());*/
  void _handleRadioValueChange(int value) {
    setState(() {
      _radioValue = value;
    });
    print("first" + value.toString() + "radiovalue" + _radioValue.toString());
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      child: Wrap(
        children: <Widget>[
          Center(
              child: Container(
                  height: 3.0, width: 40.0, color: Color(0xFF32335C))),
          SizedBox(
            height: 10.0,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Radio(
                value: 0,
                groupValue: _radioValue,
                onChanged: (value) {
                  setState(() {
                    _radioValue = value;
                  });
                  print("radiofirst" +
                      value.toString() +
                      "radiovalue" +
                      _radioValue.toString());
                  _handleRadioValueChange(value);
                },
              ),
              Text(
                'Single Date',
                style: TextStyle(fontSize: 16.0),
              ),
              Radio(
                value: 1,
                groupValue: _radioValue,
                onChanged: (value) {
                  setState(() {
                    _radioValue = value;
                  });
                  print("radiosecond " +
                      value.toString() +
                      "radiovalue " +
                      _radioValue.toString());
                  _handleRadioValueChange(value);
                },
              ),
              Text(
                'Dual Date',
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

如何在 bottomsheet flutter 中设置单选按钮

How to set radio buttons in bottomsheet flutter

flutter

radio-button

mobile-application