How to customize CupertinoDatePicker? How to customize the textstyle etc.?

38 Views Asked by At

I am using cupertino syle datepicker in my flutter application. Unfortunately, it doesnt have much options for customzation of the datepicker. I want to change the text color and add a divider line in between each date.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:zachezu_app/utils/colors.dart';

class DOB extends StatelessWidget {
  const DOB({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 40.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("Date of Birth",
                style: TextStyle(
                  fontFamily: 'DM Sans',
                  color: primary,
                  fontSize: 26.sp,
                  fontWeight: FontWeight.w700,
                )),
            SizedBox(
              height: MediaQuery.of(context).size.height * 0.015.h,
            ),
            Text(
              'Let us celebrate your Birthday ',
              style: TextStyle(
                fontFamily: 'DM Sans',
                color: darkGrey,
                fontSize: 18.sp,
                fontWeight: FontWeight.w400,
              ),
            ),
            SizedBox(
              height: MediaQuery.of(context).size.height * 0.162.h,
            ),
            SizedBox(
              height: 200,
              child: _buildDateOfBirthSelection(context),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDateOfBirthSelection(BuildContext context) {
    return SizedBox(
      height: 200,
      child: CupertinoDatePicker(
        mode: CupertinoDatePickerMode.date,
        dateOrder: DatePickerDateOrder.dmy,
        initialDateTime: DateTime.now(),
        minimumDate: DateTime(1900),
        maximumDate: DateTime(2024, 12, 31),
        onDateTimeChanged: (DateTime value) {},
      ),
    );
  }
}

I tried another package "Flutter_holo_picker" instead, but it also didn't work out. Also, were trying to achieve the desired design by custome datepicker but they were quite difficult.

0

There are 0 best solutions below