Flutter ListWheelScrollView shows only one item in list (ios) but displays well in web (dartpad)

Question

I have been trying to use ListWheelScrollView and I am getting a quite strange result.

So this is the code that I am using to show WheelScroll of months.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var monthsOfTheYear = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];
    FixedExtentScrollController fixedExtentScrollController =
        new FixedExtentScrollController();
    return ListWheelScrollView(
      controller: fixedExtentScrollController,
      physics: FixedExtentScrollPhysics(),
      children: monthsOfTheYear.map(
        (month) {
          return LimitedBox(
            maxHeight: 120,
            child: Card(
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(0.0),
                      child: Text(
                        month,
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 18.0),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ).toList(),
      itemExtent: 60.0,
    );
  }
}

I get different results on iPhone simulator and dartpad.

iOS simulator

Dartpad

Why is it not behaving like it is supposed to be in iPhone Simulator?

Does anyone know the issue that causes this?

score 0 · Answer 1 · answered Apr 24 '20 at 12:04

The problem is with the card (use a container).

Try this


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var monthsOfTheYear = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];

    var radius = Radius.circular(10);

    return ListWheelScrollView(
      itemExtent: 60.0,
      children: monthsOfTheYear.map(
        (month) {
          return Container(
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                  bottom: BorderSide(color: Colors.grey, width: 0.1),
                  left: BorderSide(color: Colors.grey, width: 0.1),
                  right: BorderSide(color: Colors.grey, width: 0.1),
                  top: BorderSide(color: Colors.grey, width: 0.1)
                ),
              borderRadius: BorderRadius.only(bottomRight: radius, bottomLeft: radius, topRight: radius),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey[200],
                  spreadRadius: 0,
                  blurRadius: 0
                )
              ]
            ),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(0.0),
                    child: Text(
                      month,
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 18.0),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ).toList(),
    );
  }
}

The output:

Flutter ListWheelScrollView shows only one item in list (ios) but displays well in web (dartpad)

1 Answers1