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],),
],
),
);
}
}
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
),
),
User contributions licensed under CC BY-SA 3.0