Flutter DateTimePicker size is too small | Resize Flutter DateTimePicker size

Question

I'm trying to maximize the DatePicker size due to user feedback (too small on other devices). I've tried adding a builder but it didn't make any difference.

The following is my current code:

_datePicker() {
return showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(DateTime.now().year),
  lastDate: DateTime.now(),
  initialDatePickerMode: DatePickerMode.day,
  builder: (context, child) {
    return Container(
      height: 555,
      width: 500,
      child: child,
    );
  },
);

}

I'd like to refrain using a library and stick to the stock widgets as much as possible.

Let me know if I missed anything. TIA

score 0 · Answer 1 · answered Aug 11 '21 at 06:11

you can resize date picker dialog by Container(), SizedBox() etc. using it in builder,incrase height and width of sizebox

Here is working example,

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.date_range),
          onPressed: () async {
            await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(DateTime.now().year),
                lastDate: DateTime.now(),
                initialDatePickerMode: DatePickerMode.day,
                builder: (BuildContext context, Widget child) {
                  return Center(
                      child: SizedBox(
                    width: 500.0,
                    height: 500.0,
                    child: child,
                  ));
                });


          },
        ));
  }
}

Here is another example

 await showDatePicker(
               context: context,
               initialDate: DateTime.now(),
               firstDate: DateTime.now(),
               lastDate: DateTime.now().add(Duration(days: 356)),
               builder: (context, child) {
                 return SingleChildScrollView(
                  child: Column(
                     children: <Widget>[
                       Padding(
                         padding: const EdgeInsets.only(top: 10.0),
                         child: Container(
                           height: 700,
                           width: 700,
                           child: child,
                         ),
                       ),
                     ],
                   ),
                 );
               },
             );

score 0 · Accepted Answer · answered Aug 11 '21 at 15:24

showDatePicker "Shows a dialog containing a Material Design date picker." as per the documentation.

My initial solution came from this question but it doesn't seem to work.

Due to time constraints, I'll use SfDateRangePicker for now which solves the width issue I have and will try to find another way in the future.

Flutter DateTimePicker size is too small | Resize Flutter DateTimePicker size

2 Answers2