I ran into a snag while using the scroll_date_picker package. I succeeded in marking the scroll as shown in the figure below, but I want only the year to be displayed and scrolled, not all of the year, month, and day. How would I recommend changing _selectedDate in this case?

This is my code.

import 'package:flutter/material.dart';
import 'package:scroll_date_picker/scroll_date_picker.dart';
import 'package:shipda/constants.dart';

class BuiltYearChoice extends StatefulWidget {
  const BuiltYearChoice({Key? key}) : super(key: key);

  @override
  State<BuiltYearChoice> createState() => _BuiltYearChoiceState();
}

class _BuiltYearChoiceState extends State<BuiltYearChoice> {
  DateTime _selectedDate = DateTime.now();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: baseColor10,
        elevation: 0,
        leading: TextButton(
          onPressed: () {},
          child: Text('Reset'),
        ),
        title: Text(
          'Example',
          style: titleMediumBase50(),
        ),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () {
              Navigator.pop(context);
            },
            icon: Icon(
              Icons.close,
              color: baseColor50,
            ),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(48, 16, 48, 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    Text(
                      'min',
                      // '최소진수년도',
                      style: TextStyle(
                        fontSize: bodyMedium,
                        fontFamily: 'regular',
                        color: Colors.grey.shade500,
                      ),
                    ),
                    marginHeight4,
                    Text(
                      '0000',
                      style: TextStyle(
                        fontSize: 32,
                        fontFamily: 'bold',
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    Text(''),
                    Text(
                      '~',
                      style: TextStyle(
                        fontSize: 32,
                        fontFamily: 'bold',
                        color: Colors.grey.shade400,
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    Text(
                      'max',
                      // '최대진수년도',
                      style: TextStyle(
                        fontSize: bodyMedium,
                        fontFamily: 'regular',
                        color: Colors.grey.shade500,
                      ),
                    ),
                    marginHeight4,
                    Text(
                      '0000',
                      style: TextStyle(
                        fontSize: 32,
                        fontFamily: 'bold',
                      ),
                    ),
                  ],
                ),
              ],
            ),
            SizedBox(
              height: 300,
              child: ScrollDatePicker(
                  locale: Locale('ko'),
                  selectedDate: _selectedDate,
                  onDateTimeChanged: (DateTime value) {
                    setState(() {
                      _selectedDate = value;
                    });
                  }),
            )
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

You can make your CustomPicker, something like this:

import 'package:flutter/material.dart';

class CustomPicker extends StatelessWidget {
  final List<DateTime> list;
  const CustomPicker(this.list, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // define item height
    double itemHeight = 30;
    var middleIndex = (list.length / 2).floor(); // index of the middle item
    var scrollController = ScrollController(
      // if you want middle item to be pre-selected
      initialScrollOffset: middleIndex * itemHeight,
    );
    int numberOfItemsToBeVisible = 5;
    double pickerHeight = itemHeight * numberOfItemsToBeVisible;
    // or you can pass index of the item you want to be visible
    var selectedItem = ValueNotifier(list[middleIndex]);
    // changing selected item on scroll
    scrollController.addListener(() {
      selectedItem.value = list[(scrollController.offset / itemHeight).round()];
    });
    return Column(
      children: [
        Stack(
          children: [
            Positioned.fill(
              child: Center(
                child: Container(
                  height: itemHeight,
                  width: MediaQuery.of(context).size.width,
                  decoration: ShapeDecoration(
                    color: Colors.grey.shade300,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                ),
              ),
            ),
            // picker
            SizedBox(
              height: pickerHeight,
              child: ListWheelScrollView(
                diameterRatio: 1.2,
                itemExtent: itemHeight,
                controller: scrollController,
                children: list
                    .map(
                      (element) => Align(
                        alignment: Alignment.center,
                        child: Text('${element.year}'),
                      ),
                    )
                    .toList(),
              ),
            ),
          ],
        ),
        // selected item
        ValueListenableBuilder(
          valueListenable: selectedItem,
          builder: (context, DateTime value, _) =>
              Text('selected year: ${value.year}'),
        ),
      ],
    );
  }
}

Then you can use it like this:

SizedBox(
  height: 300,
  child: CustomPicker(
    List.generate(21, (index) => DateTime(2000   index)),
  ),
)

The result is: