Flutter: CupertinoPicker Example

In Flutter, CupertinoPicker is an iOS-style widget that displays its children’s widgets on a wheel for selection. To show the CupertinoPicker, we can use the showCupertinoModalPopup or showCupertinoDialog function.

Sample code:

void _showPicker(BuildContext ctx) {
    showCupertinoModalPopup(
        context: ctx,
        builder: (_) => Container(
              width: 300,
              height: 250,
              child: CupertinoPicker(
                backgroundColor: Colors.white,
                itemExtent: 30,
                scrollController: FixedExtentScrollController(initialItem: 1),
                children: [
                  Text('0'),
                  Text('1'),
                  Text('2'),
                ],
                onSelectedItemChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },
              ),
            ));
  }

You can see how this code works in the example below.

Complete Example

Preview

This tiny Flutter app contains a button and a text widget. When the user taps the button, the CupertinoPicker will show up. When the user selects an item from the picker, the value (the index of the selected item) will be reflected in the text widget.

The Code

When working with one or many iOS-style widgets in Flutter, the first thing we need to do is to import the Cupertino library into our code:

import 'package:flutter/cupertino.dart';

AdvertisementsFull code in main.dart:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedValue = 0;
  void _showPicker(BuildContext ctx) {
    showCupertinoModalPopup(
        context: ctx,
        builder: (_) => Container(
              width: 300,
              height: 250,
              child: CupertinoPicker(
                backgroundColor: Colors.white,
                itemExtent: 30,
                scrollController: FixedExtentScrollController(initialItem: 1),
                children: [
                  Text('0'),
                  Text('1'),
                  Text('2'),
                ],
                onSelectedItemChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },
              ),
            ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              CupertinoButton(
                child: Text('Show The Cupertino Picker'),
                onPressed: () => _showPicker(context),
              ),
              SizedBox(height: 30),
              Text('Value: $_selectedValue'),
            ],
          ),
        ),
      ),
    );
  }
}

Conclusion

We’ve examined a full example of using the CupertinoPicker widget in Flutter. If you are developing apps primarily for iOS, you may want to explore more Cupertino widgets:

• Flutter Cupertino Button – Tutorial and Examples
• Flutter CupertinoSegmentedControl Example
• Working with Cupertino Date Picker in Flutter
• How to use Cupertino icons in Flutter
• Flutter CupertinoAlertDialog Example

Flutter is awesome and there are many interesting things to learn. Continue moving and keep the ball rolling by taking a look at the following articles:Advertisements

• Flutter and Firestore Database: CRUD example (null safety)
• Using GetX (Get) for Navigation and Routing in Flutter
• Using GetX (Get) for State Management in Flutter
• Flutter + Firebase Storage: Upload, Retrieve, and Delete files

You can also check out our Flutter category page, or Dart category page for the latest tutorials and examples.