flutterdarttimepicker

Problem with time picker not working flutter


Problem with the time picker not working when I choose the time it should be typed automatically in the field

code : https://codeshare.io/WddQvl

 onTap: () {

                      showTimePicker(context: context,
                          initialTime: TimeOfDay.now()
                      ).then((dynamic value) {
                        timeController.text = value.format(context);
                        print(value.format(context).toString());
                      });
                      },

image 1:

image 1

image 2:

image 2


Solution

  • hope you are missing SetState(). and you forgot to add controller on defaultFormField

      onPressed: () {
                showTimePicker(context: context, initialTime: TimeOfDay.now())
                    .then((dynamic value) {
                  setState(() {
                    _controller.text = value.format(context);
                  });
    
                  print(value.format(context).toString());
                });
    

    enter image description here Full widget

    import 'package:flutter/material.dart';
    
    Widget defaultFormField({
      required TextEditingController controller,
      required TextInputType type,
      Function? validate,
      required dynamic label,
      required IconData prefix,
      IconData? suffix,
      bool isPassword = false,
      Function? suffixPressed,
      VoidCallback? onTap,
      Color colorField = Colors.black54,
    }) =>
        TextFormField(
          controller: controller,
          keyboardType: type,
          obscureText: isPassword,
          onTap: onTap,
          validator: (value) {
            return validate!(value);
          },
          decoration: InputDecoration(
            hintText: label,
            border: OutlineInputBorder(),
            focusedBorder:
                OutlineInputBorder(borderSide: BorderSide(color: colorField)),
            prefixIcon: Icon(
              prefix,
              color: colorField,
            ),
            suffixIcon: IconButton(
              onPressed: () {
                suffixPressed!();
              },
              icon: Icon(suffix),
            ),
          ),
        );
    
    class HomeLayout extends StatefulWidget {
      @override
      _HomeLayoutState createState() => _HomeLayoutState();
    }
    
    class _HomeLayoutState extends State<HomeLayout> {
      int currentIndex = 0;
      List<Widget> screens = [
        NewTasksScreen(),
        // DoneTasksScreen(),
        // ArchivedTasksScreen(),
      ];
      List<String> titles = ['New Tasks', 'Done Tasks', 'Archived Tasks'];
      // late Database database;
      var scaffoldKey = GlobalKey<ScaffoldState>();
      bool isBottomSheetShown = false;
      IconData febIcon = Icons.edit;
      var titleController = TextEditingController();
      final timeController = TextEditingController();
      var backgroundFloatBottom = Colors.deepPurpleAccent;
      String toolTip = 'Add';
      @override
      void initState() {
        // TODO : DATABASE SQFLITE
        super.initState();
        // createDatabase();
      }
    
      @override
      void dispose() {
        timeController.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          key: scaffoldKey,
          appBar: AppBar(
            title: Text(titles[currentIndex]),
            backgroundColor: Colors.deepPurpleAccent,
            elevation: 5,
            shadowColor: Colors.black,
          ),
          body: screens[currentIndex],
          floatingActionButton: FloatingActionButton(
            backgroundColor: backgroundFloatBottom,
            tooltip: toolTip,
            onPressed: () {
              if (isBottomSheetShown) {
                Navigator.pop(context);
                isBottomSheetShown = false;
                setState(() {
                  febIcon = Icons.edit;
                  toolTip = 'Add';
                });
              } else {
                scaffoldKey.currentState!.showBottomSheet((context) => Container(
                      color: Colors.grey[50],
                      padding: EdgeInsets.all(20),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          defaultFormField(
                              controller: titleController,
                              type: TextInputType.text,
                              label: 'Task Title',
                              prefix: Icons.title,
                              colorField: Colors.deepPurpleAccent,
                              validate: (String value) {
                                if (value.isEmpty) {
                                  return 'Title Must Not Be Empty';
                                }
                                return null;
                              }),
                          SizedBox(height: 15),
                          defaultFormField(
                              controller: timeController,
                              type: TextInputType.datetime,
                              label: 'Task Time',
                              colorField: Colors.deepPurpleAccent,
                              prefix: Icons.watch_later_outlined,
                              onTap: () async {
                                await showTimePicker(
                                        context: context,
                                        initialTime: TimeOfDay.now())
                                    .then((dynamic value) {
                                  setState(() {
                                    timeController.text = value.format(context);
                                  });
    
                                  print(value.format(context).toString());
                                });
                              },
                              validate: (String value) {
                                if (value.isEmpty) {
                                  return 'Time Must Not Be Empty';
                                }
                                return null;
                              })
                        ],
                      ),
                    ));
                isBottomSheetShown = true;
                setState(() {
                  febIcon = Icons.close;
                  backgroundFloatBottom = Colors.deepPurpleAccent;
                  toolTip = 'Close';
                });
              }
            },
            child: Icon(febIcon),
            hoverColor: Colors.deepPurple,
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            selectedItemColor: Colors.deepPurpleAccent,
            currentIndex: currentIndex,
            onTap: (index) {
              setState(() {
                currentIndex = index;
              });
            },
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.menu),
                label: 'Tasks',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.done_all),
                label: 'Done',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.archive_outlined),
                label: 'Archived',
              ),
            ],
          ),
        );
      }
    }
    
    class NewTasksScreen extends StatefulWidget {
      NewTasksScreen({Key? key}) : super(key: key);
    
      @override
      _NewTasksScreenState createState() => _NewTasksScreenState();
    }
    
    class _NewTasksScreenState extends State<NewTasksScreen> {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Text("NewTasksScreen"),
        );
      }
    }