Flutter : how to create a Datepicker inside bottomsheet as below picture

Question

I need to design a DatePicker as a widget inside a column contains another widgets not to popup a DatePicker only

could someone inform me how to implement it as pic

Answer 1

You can use table_calendar or any other custom widgets that you need:

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

  @override
  State<CalendarBottomSheet> createState() => _CalendarBottomSheetState();
}

class _CalendarBottomSheetState extends State<CalendarBottomSheet> {
  DateTime _selectedDate;

  @override
  void initState() {
    super.initState();
    _selectedDate = DateTime.now();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Show Calendar'),
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return SizedBox(
                  height: height * 0.6,
                  child: Column(
                    children: <Widget>[
                      TableCalendar(
                        firstDay: DateTime(2000),
                        lastDay: DateTime(2050),
                        focusedDay: DateTime.now(),
                        calendarFormat: CalendarFormat.month,
                        calendarStyle: CalendarStyle(
                          selectedDecoration: BoxDecoration(
                            color: Theme.of(context).primaryColor,
                            shape: BoxShape.circle,
                          ),
                          todayDecoration: BoxDecoration(
                            color: Colors.grey[300],
                            shape: BoxShape.circle,
                          ),
                        ),
                        selectedDayPredicate: (date) {
                          return isSameDay(_selectedDate, date);
                        },
                        onDaySelected: (date, focusedDay) {
                          setState(() {
                            _selectedDate = date;
                          });
                          Navigator.pop(context);
                        },
                        calendarBuilders: CalendarBuilders(
                          selectedBuilder: (context, date, _) => Container(
                            decoration: BoxDecoration(
                              color: Theme.of(context).primaryColor,
                              shape: BoxShape.circle,
                            ),
                            child: Center(
                              child: Text(
                                date.day.toString(),
                                style: const TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

happy coding...