How do I use IOS style picker on android with flutter

0

I use class to make my InkWell, and I am trying to use IOS style picker on android, but I used CupertinoPicker() and CupertinoDatePicker() than it doesn't work, I want make picker like this, What did i do wrong?

This is my code:

Part of code

List pickerChildren = [
  "male",
  "female",
  "secret",
];
CupertinoPicker(
      itemExtent: 40,
      selectionOverlay: ,
      onSelectedItemChanged: (value) {
        print("Choose gender:${pickerChildren[value]}");
        print("$value");
        setState(() {
          selectedValue = value;
        });
      },
      children: pickerChildren.map((data) {
        return Text(data);
      }).toList(),
    )

All code

final sports = ["walking slowly (4km/hour)", "walking fast, walking (6.0km/hour)","down stairs","up stairs",
  "Jogging (8 km/h)", "Quick running (12 km/h)", "Quick running (16 km/h)", "Riding a bicycle (normal speed, 10 km/h)",
  "Riding a bicycle (fast, 20 km/h)", "Riding a bicycle (fast, 30 km/h)", "Mopping the floor", "Gardening",
  "Farming, pasture, fishing, forestry", "lifting heavy objects", "yoga", "dancing (slow), Yuanji dance", "dancing (fast), international standard dance", "Frisbee",
  "Volleyball", "Bowling", "Tai Chi", "Ping Pong", "Baseball and Softball", "Golf", "Inline Skating", "Badminton", "Swimming (Slow)", "Swimming (Fast) )",
  "Basketball (half court)", "Basketball (full court)", "Aerobic dance", "Tennis", "Football", "Rope skipping (slow)", "Rope skipping (fast)"];
final rsports = ["walking slowly", "walking fast, walking", "down stairs", "up stairs", "jogging", "fast running", "fast running", "riding a bicycle", "riding a bicycle",
  "Bicycle", "Mopping the ground", "Gardening", "Farming, pasture, fishing, forestry", "Carrying heavy objects", "Yoga", "Dancing (slow)", "Dancing (fast)", "Frisbee ",
  "Volleyball", "Bowling", "Tai Chi", "Ping Pong", "Baseball and Softball", "Golf", "Inline Skating", "Badminton", "Swimming (Slow)", "Swimming (Fast) )",
  "Basketball (half court)", "Basketball (full court)", "Aerobic dance", "Tennis", "Football", "Rope skipping (slow)", "Rope skipping (fast)"];
class SContainer extends Container {
  final String Sstring;
  final IconData SIcon;

  SContainer({required this.SIcon, required this.Sstring,Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 42,
      color: Color(0xff65D3E6),
      child: Row(
        children: [
          Container(
            child: Icon(
              SIcon,
              size: 20,
              color: Colors.white,
            ),
            width: 42,
          ),
          Text(
            Sstring,
            style: TextStyle(color: Colors.black),
            textAlign: TextAlign.left,
          ),
        ],
      ),
    );
  }
}
class SInkWell extends StatefulWidget {
  final String Sstring;
  final String Sreturn;
  SInkWell({required this.Sstring, required this.Sreturn, Key? key}) : super(key: key);
  @override
  _SInkWell createState() => _SInkWell(Sstring:Sstring,Sreturn:Sreturn);
}

List pickerChildren = [
  "male",
  "female",
  "secret",
];

class _SInkWell extends State<SInkWell>{
  final String Sstring;
  final String Sreturn;
  List<Container> containerList = [];
  int _selectedValue = 0;

  int selectedValue = 0;
  String selectedGender = "male";
  _SInkWell({required this.Sstring, required this.Sreturn});
  @override
  Widget _buildGenderPicker() {
    return CupertinoPicker(
      itemExtent: 40,
      onSelectedItemChanged: (value) {
        print("Choose gender:${pickerChildren[value]}");
        print("$value");
        setState(() {
          selectedValue = value;
        });
      },
      children: pickerChildren.map((data) {
        return Text(data);
      }).toList(),
    );
  }
  Widget build(BuildContext context) {
    return InkWell(
      splashColor: Color(0x00000000),
      onTap: () async{await showDialog(
          context: context,
          builder: (BuildContext context) {
            return Center(
              child: Container(
                color: Colors.white,
                height: 250,
                child: Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        FlatButton(
                          color: Colors.white,
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: Text("Cancle"),
                        ),
                        FlatButton(
                          color: Colors.white,
                          onPressed: () {
                            Navigator.pop(context);
                            setState(() {
                              selectedGender = pickerChildren[selectedValue];
                            });
                          },
                          child: Text("OK"),
                        ),
                      ],
                    ),
                    Expanded(
                      child: DefaultTextStyle(
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 22,
                        ),
                        child: _buildGenderPicker(),
                      ),
                    ),
                  ],
                ),
              ),
            );
          });
      Navigator.pop(context, Sreturn);
      },
      child:
      SizedBox(
        height: 42,
        width: MediaQuery.of(context).size.width,
        child:
        Container(
          padding: EdgeInsets.only(left: 26.0),
          alignment: Alignment.centerLeft,
          width: MediaQuery.of(context).size.width,
          decoration: new BoxDecoration(
            border: Border(
              bottom: BorderSide(width: 1.0, color: Color(0xFFE4E4E4)),
            ),
          ),
          child: Text(
            Sstring,
            style: TextStyle(color: Colors.black),
            textAlign: TextAlign.left,
          ),
        ),
      ),
    );
  }
}

class SportPage extends StatefulWidget {
  @override
  _SportPage createState() => _SportPage();
}

class _SportPage extends State<SportPage> {

  int ccc = 0;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        leading: new IconButton(icon: Icon(Icons.arrow_back_ios,color: Colors.blue,), onPressed: ()=> Navigator.of(context).pop(),),
        backgroundColor: Color(0xFFF9F9F9),
        centerTitle: true,
        title: Text('SportData',style: TextStyle(color: Colors.black,fontSize: 20),),
      ),
      body:ListView(
        shrinkWrap: true,
        children: <Widget>[SContainer(SIcon: Icon3.bx_bx_walk,Sstring:"walk"),
          SInkWell(Sstring: sports[0],Sreturn: rsports[0],),
          SInkWell(Sstring: sports[1],Sreturn: rsports[1],),
          SContainer(SIcon: Icon2.stairs,Sstring:"climb"),
          SInkWell(Sstring: sports[2],Sreturn: rsports[2],),
          SInkWell(Sstring: sports[3],Sreturn: rsports[3],),
          SContainer(SIcon: Icon3.bx_bx_run,Sstring:"run"),
          SInkWell(Sstring: sports[4],Sreturn: rsports[4],),
          SInkWell(Sstring: sports[5],Sreturn: rsports[5],),
          SInkWell(Sstring: sports[6],Sreturn: rsports[6],),
          SContainer(SIcon: Icon3.cil_bike,Sstring:"bike"),
          SInkWell(Sstring: sports[7],Sreturn: rsports[7],),
          SInkWell(Sstring: sports[8],Sreturn: rsports[8],),
          SInkWell(Sstring: sports[9],Sreturn: rsports[9],),
          SContainer(SIcon: Icon3.house,Sstring:"housework"),
          SInkWell(Sstring: sports[10],Sreturn: rsports[10],),
          SInkWell(Sstring: sports[11],Sreturn: rsports[11],),
          SContainer(SIcon: Icon3.work,Sstring:"work"),
          SInkWell(Sstring: sports[12],Sreturn: rsports[12],),
          SInkWell(Sstring: sports[13],Sreturn: rsports[13],),
          SInkWell(Sstring: sports[14],Sreturn: rsports[14],),
          SContainer(SIcon: Icon3.exercise,Sstring:"other"),
          SInkWell(Sstring: sports[15],Sreturn: rsports[15],),
          SInkWell(Sstring: sports[16],Sreturn: rsports[16],),
          SInkWell(Sstring: sports[17],Sreturn: rsports[17],),
          SInkWell(Sstring: sports[18],Sreturn: rsports[18],),
          SInkWell(Sstring: sports[19],Sreturn: rsports[19],),
          SInkWell(Sstring: sports[20],Sreturn: rsports[20],),
          SInkWell(Sstring: sports[21],Sreturn: rsports[21],),
          SInkWell(Sstring: sports[22],Sreturn: rsports[22],),
          SInkWell(Sstring: sports[23],Sreturn: rsports[23],),
          SInkWell(Sstring: sports[24],Sreturn: rsports[24],),
          SInkWell(Sstring: sports[25],Sreturn: rsports[25],),
          SInkWell(Sstring: sports[26],Sreturn: rsports[26],),
          SInkWell(Sstring: sports[27],Sreturn: rsports[27],),
          SInkWell(Sstring: sports[28],Sreturn: rsports[28],),
          SInkWell(Sstring: sports[29],Sreturn: rsports[29],),
          SInkWell(Sstring: sports[30],Sreturn: rsports[30],),
          SInkWell(Sstring: sports[31],Sreturn: rsports[31],),
          SInkWell(Sstring: sports[32],Sreturn: rsports[32],),
          SInkWell(Sstring: sports[33],Sreturn: rsports[33],),
          SInkWell(Sstring: sports[34],Sreturn: rsports[34],),
        ],
      ),
    );
  }
}
android
flutter
asked on Stack Overflow May 2, 2021 by Stanley Lee • edited May 3, 2021 by Stanley Lee

1 Answer

0

You might be looking for a CupertinoDatePicker

  Expanded(
    child: CupertinoDatePicker(
       initialDateTime: DateTime.now(),
       onDateTimeChanged: (value) {
 // do what you need to do with the selected time (value) here
       },
       mode: CupertinoDatePickerMode.time, // this can be selected to date if you need
     ),
   ),
answered on Stack Overflow May 3, 2021 by Loren.A

User contributions licensed under CC BY-SA 3.0