Display time on TextField from TimePicker in Flutter

0

I want to show my time on the TextField from the time that I select from the showTimePicker widget but I cannot figure out how will I display it on my box after picking a time Kindly help me out.

This is my screen without input on the Reminder section:

enter image description here

and this is what I want the output to be displayed under the Reminder section:

enter image description here

Code for Reminder is:

import 'package:epicare/Medicines.dart';
import 'package:flutter/material.dart';
import 'package:flutter_switch/flutter_switch.dart';

class AddMedicine extends StatefulWidget {
  @override
  _AddMedicineState createState() => _AddMedicineState();
}

class _AddMedicineState extends State<AddMedicine> {
  final timeController = TextEditingController();

 Widget build(BuildContext context) {
    String value = "";
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(),

body: SingleChildScrollView(
        child: Column(
          children: [
Container(
              width: size.width,
              padding: EdgeInsets.symmetric(horizontal: 34, vertical: 13),
              child: Text(
                'Reminder',
                style: TextStyle(
                  fontFamily: 'Montserrat',
                  fontSize: 14,
                  color: const Color(0xff000000),
                  fontWeight: FontWeight.w600,
                ),
                textAlign: TextAlign.left,
              ),
            ),
            Container(
              width: size.width * 0.85,
              height: 52,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(6.0),
                color: const Color(0xffffffff),
                border: Border.all(width: 1.0, color: const Color(0xffdbe2ea)),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0x0a2c2738),
                    offset: Offset(0, 4),
                    blurRadius: 8,
                  ),
                ],
              ),
              child: TextField(
                controller: timeController,
                readOnly: true,
                style: TextStyle(
                  fontFamily: 'Montserrat',
                  fontSize: 12,
                  color: const Color(0xff000000),
                  fontWeight: FontWeight.w500,
                ),
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    onPressed: () async {
                      var time = await showTimePicker(
                        builder: (BuildContext context, Widget child) {
                          return Theme(
                            data: ThemeData.light().copyWith(
                              colorScheme: ColorScheme.dark(
                                primary: const Color(0xffE5E0A1),
                                onPrimary: Colors.black,
                                surface: Colors.white,
                                onSurface: Colors.black,
                              ),
                              dialogBackgroundColor:Colors.white,
                            ),
                            child: child,
                          );
                        },
                          context: context,
                          initialTime: TimeOfDay.now(),
                          //timeController.text = time.format(context)
                      );
                      print(time.format(context));

                    },
                    icon: Icon(
                      Icons.add_alert,
                      color: const Color(0xffd4d411),
                    ),
                  ),
                  contentPadding:
                  const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
                  border: InputBorder.none,
                  hintText: "Add time(s) to eat your medicine",
                  hintStyle: TextStyle(
                    fontFamily: 'Montserrat',
                    fontSize: 13,
                    color: const Color(0xffcbd0d6),
                  ),
                ),
                onChanged: (text) {
                  value = text;
                  print(value);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
flutter
dart
asked on Stack Overflow Apr 22, 2021 by Nabia Salman

1 Answer

1

All you need to do is move this line to outside of the showTimePicker function.

timeController.text = time.format(context)
var time = await showTimePicker(
  builder: (BuildContext context, Widget child) {
    return Theme(
       data: ThemeData.light().copyWith(
         colorScheme: ColorScheme.dark(
           primary: const Color(0xffE5E0A1),
           onPrimary: Colors.black,
           surface: Colors.white,
           onSurface: Colors.black,
          ),
          dialogBackgroundColor: Colors.white,
         ),
        child: child,
         );
       },
        context: context,
        initialTime: TimeOfDay.now(),
    //timeController.text = time.format(context) from here
       ); //end of showTimePicker
   timeController.text = time.format(context); // to here
answered on Stack Overflow Apr 22, 2021 by Loren.A

User contributions licensed under CC BY-SA 3.0