Tag: Ios-Styling

CupertinoPicker-Example-iOS styling Flutter

CupertinoPicker widget is an iOS styled picker.

Displays its children widgets on a wheel for selection and calls back when the currently selected item changes.

Find below function to create a CupertinoPicker

 void _showPicker(BuildContext ctx) {
    showCupertinoModalPopup(
        context: ctx,
        builder: (_) => Container(
              height: 250,
              child: CupertinoPicker(
                backgroundColor: Colors.white,
                itemExtent: 30,
                scrollController: FixedExtentScrollController(initialItem: 1),
                children: [for (var i = 0; i < 10; i++) Text("Option $i")],
                onSelectedItemChanged: (value) {
                  setState(() {
                    print(value);
                  });
                },
              ),
            ));
  }

Complete main.dart file

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomeStateCupertinoPicker createState() => _MyHomeStateCupertinoPicker();
}
class _MyHomeStateCupertinoPicker extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("Show Picker"),
          onPressed: () {
            _showPicker(context);
          },
        ),
      ),
    );
  }

  void _showPicker(BuildContext ctx) {
    showCupertinoModalPopup(
        context: ctx,
        builder: (_) => Container(
              height: 250,
              child: CupertinoPicker(
                backgroundColor: Colors.white,
                itemExtent: 30,
                scrollController: FixedExtentScrollController(initialItem: 1),
                children: [for (var i = 0; i < 10; i++) Text("Option $i")],
                onSelectedItemChanged: (value) {
                  setState(() {
                    print(value);
                  });
                },
              ),
            ));
  }
}

Result

Thanks for reading !!

CupertinoContextMenu-iOS Styling-Flutter

CupertinoContextMenu is an iOS-style context menu that popup when the user long-press the button.

Result

Find below code for CupertinoContextMenu

CupertinoContextMenu(
          child: Icon(Icons.menu),
          actions: <Widget>[
            CupertinoContextMenuAction(
              child: Text('Action one'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            CupertinoContextMenuAction(
              child: Text('Action two'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        )

Thanks for reading !!

CupertinoActionSheet- iOS style Widget-Flutter

An action sheet is a specific style of alert that presents the user with a set of two or more choices related to the current context. An action sheet can have a title, an additional message, and a list of actions. The title is displayed above the message and the actions are displayed below this content.

This action sheet styles its title and message to match the standard iOS action sheet title and message text style.

The result design will be like

Please find below code for a Simple CupertinoActionSheet

showCupertinoModalPopup(
            context: context,
            builder: (BuildContext context) => CupertinoActionSheet(
              title: const Text('Choose From Below'),
              message: const Text('Options Are'),
              cancelButton: CupertinoActionSheetAction(
                child: Text("Cancel"),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              actions: <Widget>[
                CupertinoActionSheetAction(
                  child: const Text('Option 1'),
                  onPressed: () {
                    Navigator.pop(context, '1');
                  },
                ),
                CupertinoActionSheetAction(
                  child: const Text('Option 2'),
                  onPressed: () {
                    Navigator.pop(context, '2');
                  },
                )
              ],
            ),
          );

Thanks for reading!