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

Flutter – Picked Date Does not Showing

late DateTime datePicked = DateTime.now();

void showDatePickerForUser() {
  showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime.now(),
    lastDate: DateTime.now().add(const Duration(days: 365)),
  ).then((value) {
    setState(() {
      datePicked = value!;
    });
  });
}

Container(
                height: MediaQuery.of(context).size.height * 0.08,
                width: MediaQuery.of(context).size.width * 0.9,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(
                    color: Colours().borderColor,
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 20),
                      child: Text(
                        datePicked.toString().substring(0, 10),
                        style: GoogleFonts.ubuntu(
                          fontSize: 18,
                          //fontWeight: FontWeight.bold,
                          color: Colours().unSelectedText,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(right: 10),
                      child: IconButton(
                        onPressed: () {
                          showDatePickerForUser();
                        },
                        icon: const Icon(
                          Icons.calendar_month_outlined,
                          color: Colors.black,
                          size: 28,
                        ),
                      ),
                    ),
                  ],
                ),
              )

The date user picks does not being picked and shown on the field.

Tags:

3

Answers


  1. 0

    enter image description here

     DateTime? datePicked;

 Container(
              height: MediaQuery.of(context).size.height * 0.08,
              width: MediaQuery.of(context).size.width * 0.9,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                border: Border.all(
                  color: Colors.grey,
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 20),
                    child: Text(
                      datePicked != null
                          ? datePicked.toString().substring(0, 10)
                          : 'Select Date',
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 10),
                    child: IconButton(
                      onPressed: () {
                        showDatePickerForUser();
                      },
                      icon: const Icon(
                        Icons.calendar_month_outlined,
                        color: Colors.black,
                        size: 28,
                      ),
                    ),
                  ),
                ],
              ),
            ),

    Maybe it’s helpful for you!

    Login or Signup to reply.
  2. 0

    Here is a complete code to run with the given changes:

    import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Example(),
      ),
    ),
  );
}

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  late DateTime datePicked = DateTime.now();

  void showDatePickerForUser() {
    showDatePicker(
      context: context,
      initialDate: datePicked, // Use datePicked as the initial date
      firstDate: DateTime.now(),
      lastDate: DateTime.now().add(const Duration(days: 365)),
    ).then((value) {
      if (value != null) {
        setState(() {
          datePicked = value;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.08,
      width: MediaQuery.of(context).size.width * 0.9,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Text(
              "${datePicked.toLocal()}".split(' ')[0], // Format the date
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(right: 10),
            child: IconButton(
              onPressed: () {
                showDatePickerForUser();
              },
              icon: const Icon(
                Icons.calendar_month_outlined,
                color: Colors.black,
                size: 28,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

    Changes made:

    1-Used datePicked as the initial date for the showDatePicker.
    2-Checked if the picked date is not null before updating the state.
    3-Formatted the displayed date using toLocal() to show it in the local time.
    4-Used ${datePicked.toLocal()} to get the date part only.

    Login or Signup to reply.
  3. 0

    Make sure your class extends a StateFulWidget.
    I checked your code and it works fine.

    import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {


  DateTime datePicked = DateTime.now();
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(title: const Text('Test'),),

      body: Column(

        children: [
          Container(
            // height: MediaQuery.of(context).size.height * 0.08,
            // width: MediaQuery.of(context).size.width * 0.9,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                //  color: Colours().borderColor,
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 20),
                  child: Text(
                    datePicked.toString().substring(0, 10),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(right: 10),
                  child: IconButton(
                    onPressed: () {
                      showDatePickerForUser();
                    },
                    icon: const Icon(
                      Icons.calendar_month_outlined,
                      color: Colors.black,
                      size: 28,
                    ),
                  ),
                ),
              ],
            ),
          )
        ],

      ),
    );
  }


  void showDatePickerForUser() {
    showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime.now(),
      lastDate: DateTime.now().add(const Duration(days: 365)),
    ).then((value) {
      setState(() {
        datePicked = value!;
      });
    });
  }

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search