flutterlayoutcupertinopicker

Flutter: Possible to position item in CupertinoPicker in the center between the two lines?


Is it possible to change the default position of the item within a CupertinoPicker to the center between the two lines? The default position seems to be rather towards the upper line.

This is the code to reproduce the CupertinoPicker

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}


class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CupertinoPicker(
        itemExtent: 50,
        onSelectedItemChanged: (int index) {
          print(index);
        },
        children: <Widget>[
          Text("Item 1"),
          Text("Item 2"),
          Text("Item 3"),
        ],
      ),
    );
  }
}

This it what it looks like:

enter image description here

Thanks for any tips, hints and advice!


Solution

  • Wrap your children widgets with a Center widget:

    CupertinoPicker(
      itemExtent: 50,
      onSelectedItemChanged: (int index) {
        print(index);
      },
      children: <Widget>[
        Center(child: Text("Item 1")),
        Center(child: Text("Item 2")),
        Center(child: Text("Item 3")),
      ],
    ),