56. CupertinoDatePicker
The CupertinoDatePicker widget creates an iOS-styled date picker. You can use a Container or a SizedBox to set a specific height or width for the date picker. The mode property allows you to choose between displaying time, date and time, date, or the month and year.
DateTime date = DateTime.now();
@override
Widget build(BuildContext context) {
return Center(
child: CupertinoButton(
child: const Text('CupertinoDatePicker'),
onPressed: () {
showCupertinoModalPopup(
context: context,
builder: (context) {
return Container(
height: MediaQuery.of(context).size.height / 2,
color: CupertinoColors.black,
child: CupertinoDatePicker(
backgroundColor: CupertinoColors.black,
onDateTimeChanged: (DateTime newDate) {
setState(() {
date = newDate;
});
},
use24hFormat: true,
mode: CupertinoDatePickerMode.date,
),
);
},
);
},
),
);
}57. CupertinoPageRoute
The CupertinoPageRoute widget creates a route that transitions between pages using an iOS transition. In the example below, when the button is pressed we call Navigator.of(context).push and use the CupertinoPageRoute widget to transition to the second page. When on the second page, we call Navigator.of(context).pop to transition back to the first page.
@override
Widget build(BuildContext context) {
return Center(
child: CupertinoButton.filled(
child: const Text('Press for page two'),
onPressed: () {
Navigator.of(context).push(
CupertinoPageRoute(
builder: (context) {
return const PageTwo();
},
),
);
},
),
);
}
class PageTwo extends StatelessWidget {
const PageTwo({super.key});
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
backgroundColor: Colors.blueGrey,
child: Center(
child: CupertinoButton.filled(
child: const Text('Go back to page one'),
onPressed: () {
Navigator.of(context).pop(
CupertinoPageRoute(
builder: (context) {
return const PageTwo();
},
),
);
},
),
),
);
}
}58. CupertinoPicker
The CupertinoPicker widget creates an iOS-styled picker which allows you to select from a list of items by scrolling. The itemExtent property is to set the height of each item in the picker. If you want the picker to loop back to the start/end when scrolling past the last/first item, you can set the looping property to true.
int _selectedValue = 0;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Center(
child: CupertinoButton.filled(
onPressed: () {
showCupertinoModalPopup(
context: context,
builder: (BuildContext builder) {
return SizedBox(
height: 250,
width: double.infinity,
child: CupertinoPicker(
itemExtent: 30,
squeeze: 1,
looping: true,
onSelectedItemChanged: (int value) {
setState(() {
_selectedValue = value;
});
},
backgroundColor: CupertinoColors.black,
scrollController:
FixedExtentScrollController(initialItem: 1),
children: const [
Text('0'),
Text('1'),
Text('2'),
Text('3'),
Text('4'),
Text('5'),
],
),
);
},
);
},
child: Text('Value = $_selectedValue'),
),
),
);
}59. CupertinoPopupSurface
This widget creates a rounded rectangular popup surface with the iOS style.
@override
Widget build(BuildContext context) {
return Center(
child: CupertinoButton(
child: const Text('Click Me!'),
onPressed: () {
showCupertinoModalPopup(
context: context,
builder: (builder) {
return CupertinoPopupSurface(
child: Container(
color: CupertinoColors.white,
alignment: Alignment.center,
width: double.infinity,
height: 400,
child: Center(
child: CupertinoButton(
child: const Text('Close'),
onPressed: () {
Navigator.pop(context);
},
),
),
),
);
},
);
},
),
);
}60. CupertinoScrollBar
The CupertinoScrollBar widget creates an iOS-styled scroll bar. In the example below, we have a list view as the child of the scroll bar, because the thumbVisibility is set to true, we can see the scroll bar even when we’re not scrolling. You can modify the thickness and radius of the scroll bar and also the thickness and radius while the scroll bar is being dragged.
@override
Widget build(BuildContext context) {
return CupertinoScrollbar(
thickness: 5,
thicknessWhileDragging: 10,
thumbVisibility: true,
child: ListView.builder(
itemBuilder: (context, int index) {
return Center(
child: Text(
'$index',
style: const TextStyle(fontSize: 35),
),
);
},
itemCount: 100,
),
);
}