Question 351163 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make date Year picker in cupertino design in flutter?

I want to make ‘Year picker’ in flutter, so i decided using Cupertino style picker. but i can’t make year list picker

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

class DatePicker extends StatefulWidget {
  const DatePicker({super.key});

  @override
  State<DatePicker> createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {
  DateTime datetime = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Center(
        child: CupertinoButton.filled(
            child: Text('value = $datetime'),
            onPressed: () {
              showCupertinoModalPopup(
                  context: context,
                  builder: (BuildContext context) => SizedBox(
                        height: 250,
                        child: CupertinoDatePicker(
                          backgroundColor: Colors.white,
                          initialDateTime: datetime,
                          onDateTimeChanged: (DateTime newTime) {
                            setState(() {
                              datetime = newTime;
                              int year = newTime.year;
                              print('Selected Year: $year');
                            });
                          },
                          use24hFormat: true,
                          mode: CupertinoDatePickerMode.monthYear,
                        ),
                      ));
            }),
      )),
    );
  }
}

here is my code. i thought mode: CupertinoDatePickerMode.monthYear that part is point. However, I couldn’t change it to the ideal way I desired, (with only the year mentioned).

I also want to change it so that the month, week, date, and time are each listed separately.

I would like to customize it so that, instead of an infinite selection around the current year, it is centered around the present and allows selection from 1980 to -26 years.

Alternatively, it would be helpful if you could provide a reference link and tips on how to customize it according to my preferences.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This also works well. Just make sure to place it in the child or children section of the widget.

    int selectedYear = DateTime.now().year;

Container(
   height: 250,
// color: Color.fromARGB(255, 255, 255, 255),
   child: CupertinoPicker(
          backgroundColor: Colors.white,
          onSelectedItemChanged: (value) {
             setState(() {
             selectedYear = 2020 + value;
            });
          },
         itemExtent: 32.0,
         children: List<Widget>.generate(51, (index) {
         return Center(
         child: Text(
           '${2020 + index}',
           ),
         );
       }),
     ),
   ),

    Through this experience, I've learned that if you can't customize the date as desired in the Cupertino DatePicker, you need to customize it through the CupertinoPicker.


  2. 0

    use this :

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cupertino Year Picker'),
        ),
        body: Center(
          child: YearPickerWidget(),
        ),
      ),
    );
  }
}

class YearPickerWidget extends StatefulWidget {
  @override
  _YearPickerWidgetState createState() => _YearPickerWidgetState();
}

class _YearPickerWidgetState extends State<YearPickerWidget> {
  late int _selectedYear;

  @override
  void initState() {
    super.initState();
    // Set the initial year to the current year
    _selectedYear = DateTime.now().year;
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoDatePicker(
      mode: CupertinoDatePickerMode.date,
      initialDateTime: DateTime(_selectedYear),
      minimumYear: 1900,
      maximumYear: DateTime.now().year,
      onDateTimeChanged: (DateTime newDateTime) {
        setState(() {
          _selectedYear = newDateTime.year;
        });
      },
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search