Hi everyone I have some troubles with Flutter FormBuilderDateTimePicker
My problem is that when I set the value manually (with a keyboard not using graphical draggable 'arrows' offered by the widget) I get the validation error every time the hour value is between 12 and 00.
For example, if I set 12:30 the value will be accepted, but if I change the hour to 16:30 it will display a validation error message. Below you can find a graphical representation of my case.
Here is how I set my FormBuilderTimePicker widget
FormBuilderDateTimePicker(
name: 'fieldname',
initialValue: DateTime.now(),
initialDate: DateTime.now(),
initialEntryMode: DatePickerEntryMode.input,
alwaysUse24HourFormat: true,
onChanged: (value) => mayValue = ,
format: DateFormat.yMMMMd('it_IT').add_Hm(),
timePickerInitialEntryMode: TimePickerEntryMode.input,
)
The other input type is working fine, but I would like to keep them both
On flutter_form_builder: ^7.3.1 source code, alwaysUse24HourFormat has not being used. As matias-de-andrea mention on git issue which is still open.
To make it work, they override the transitionBuilder in order to provide 24h format on showTimePicker context.
transitionBuilder: (BuildContext context, Widget? child) {
return MediaQuery(
data: MediaQuery.of(context)
.copyWith(alwaysUse24HourFormat: true),
child: child!,
);
},
You can check How to use 24 hour clock when invoking showTimePicker() in Flutter? and they've discussed more about this.
Related
In a brand new Flutter project, if I add a showTimePicker widget, then open the time picker in input mode, the height of the dialog is shorter than the input mode contents, so you have to scroll to see the OK and Cancel buttons. This, even though the input mode is half as tall as the dial mode contents, which doesn't require scrolling.
Question: Is there any way to add padding or a min-height to a Flutter dialog such as the showTimePicker?
I've seen answers that describe sizing a container outside of/around the picker, or using the builder method, and others mentioning custom styling, but nothing for the size of the picker dialog itself that might address this vertical cutoff.
Flutter 2.0.3 - Device: Pixel XL with Android 10.
Any insights appreciated.
TextButton(
onPressed: () async {
final _selectedTime = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
initialEntryMode: TimePickerEntryMode.input,
);
if (_selectedTime != null) {
String thisHour = _selectedTime.hour <= 9
? '0${_selectedTime.hour}'
: '${_selectedTime.hour}';
String thisMin = _selectedTime.minute <= 9
? '0${_selectedTime.minute}'
: '${_selectedTime.minute}';
print('$thisHour:$thisMin');
}
},
child: Text(
'Test It',
style: TextStyle(
fontSize: 22,
),
),
),
I solved this question this adding this code in showTimePicker builder.
builder: (context, childWidget) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(
textScaleFactor: 1),
});
The answer by zey is close to correct. This is a full working example:
await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
builder: (context, childWidget) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: 1),
child: childWidget!,
);
},
);
The issue is described in this flutter issue, and is happening at least since version 2.2 (and is still happening on Flutter 3.0.2)
So I'm trying to pick a date with a DatePicker package from inside a showDialog using Bloc.
Here's the code that shows the Dialog:
onPressed: () {
showDialog(
context: context,
barrierDismissible: true,
child: _buildEditDialog(context, arguments),
);
},
And here's the Dialog's content:
void _openCalendarPicker(BuildContext context, SearchHotelArguments arguments) async {
final DateTime dateTimeNow = DateTime.now();
final List<DateTime> picked = await DateRagePicker.showDatePicker(
context: context,
initialFirstDate: arguments.checkInDate ?? dateTimeNow,
initialLastDate: arguments.checkOutDate ?? dateTimeNow.add(Duration(days: 1)),
firstDate: dateTimeNow,
lastDate: dateTimeNow.add(Duration(days: 365 * 10)));
if (picked != null && picked.length == 2) {
context.read<HotelChangeParamsBloc>().setCheckInDate(picked[0]);
context.read<HotelChangeParamsBloc>().setCheckOutDate(picked[1]);
}
}
Now, the issue here is that from a Dialog I open a popup with the DateRangePicker, pick the Date and submit it but on the Dialog the date stays the same as it was previously. And if I close and re-open the Dialog I can see that there was a change in the date. So the Dialog is not refreshing the data by itself(unless I re-open it).
Does anyone know how I can refresh the Dialog with the new Date from the DateRangePicker?
Edit:
If you're interested in adhering to the intended Bloc pattern, you wouldn't be firing a regular function from your dialog. That's why I said 'assuming you're emitting a new state'.
Ideally it would be
context.read<HotelChangeParamsBloc>().add(UserSelectedDateEvent(setCheckInDate(picked[0])));
In that example UserSelectedDateEvent is an event that passes in a DateTime object that gets emitted to an updated state.
That event would hit the mapEventToState method in your Bloc, emit a new state, and if you wrap your first dialog in a BlocBuilder as mentioned below, it will show the updated date
Original answer:
Assuming that your setCheckInDate() method is emitting a new state in your HotelChangeParamsBloc, you just need to wrap your first dialog in
BlocBuilder<HotelChangeParamsBloc, HotelChangeParamsBlocState>
Then within that, display the updated date with state.yourBlocVariable.toString()
Without the BlocBuilder theres nothing telling it to rebuild so it won't show the updated state until you close and rebuild it.
this is my first question at StackOverflow, I'm a flutter and dart newbie so I hope to get some help from here.
I'm coding an app that use a TableCalendar to make appointments, I load data in some dates in the calendar using the "events" property, so when I pick any date, if that date has data I load its data in a Dropdown button, I'm using a Stream broadcast() to listen to every time I pick a date so dropdown items change according to the date.
Up to this point I have no problem, the problem is when my dropdown items are ready and I try to pick another value inside the dropdown menu, since the value needs to be updated using OnChanged property, I need to call the setState, but when I do that all the widget tree is rebuilt, and if I don't use the setState obviously the value doesn't change.
I need to update only the dropdown menu item without redrawing all the widget trees keeping the actual state of all the other widgets except the dropdown value and I've been looking from here and there for any solution but I don't find it.
The TableCalendar and the DropdownButton are inside a Listview, the data source is a JSON file, I'm using a Future Builder to build the ListView and a StreamBuilder to build the DropdownButton.
This is the dropdown code:
StreamBuilder(
stream: streamHora.stream,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return DropdownButton<String>(
icon: Icon(Icons.arrow_drop_down),
style: _textStyle(Colors.black, 15.0),
items: [],
onChanged: (value) {},
value: "",
);
}
return DropdownButton<String>(
icon: Icon(Icons.arrow_drop_down),
style: _textStyle(Colors.black, 15.0),
items: snapshot.data,
onChanged: (String value) {
setState(() {
_dropdownHoraValue = value;
});
},
value: _dropdownHoraValue,
);
},
),
Any idea or suggestion will be very appreciated.
In this application, the user will be able to add tasks and display it in a PageView.builder. The user will also be able to scroll through the PageView.builder by swiping left or right. The pageview is mapped to dates (ex: current page maps to today's date, next page maps to tomorrow's date, etc.). I also wanted to implement a jump feature which lets the user move to a new page by specifying a date on a showDatepicker widget.
The PageView.builder was implemented by using this project. this project also has the jump to page feature : https://github.com/ZedTheLed/calendar_views
the showDatepicker is implemented in the method below. it is called by clicking on a Raisedbutton:
_selectDate() async {
final DateTime picker =await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2010),
lastDate: DateTime(2040)
);
if (picker != null) {
print(picker);
return _daysPageController.jumpToDay(picker); // this method jumps the user to a selected date
// Navigator.pop(context);
// print(selectedDate);
// await runJump(selectedDate);
// return selectedDate;
}
}
when the user clicks on a date, the variable DateTime picker successfully returns the user-selected date in the print statement. But when i pass this value to the jumptopage method, it gives his error : The method 'jumpToDay' was called on null.
The PageView.builder is implemented in the code below :
final List<DateTime> days;
Scaffold(
floatingActionButton: new RaisedButton(
child: new Text("Jump To Today"),
onPressed: () {
_selectDate();
},
),
body: new Column(
children: widget.days.map(((day) => Container(
constraints: new BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 1.00,
maxWidth: MediaQuery.of(context).size.width * 1.00
),
child: Starting_screen(_makeTextString(day)), //this screen displays the tasks added by the user
)
),
).toList()
),
);
the method _makeTextString just modifies a DateTime value and returns it in a desirable format.
Could i get a suggestion on how to handle this error?
full project is available here : https://bitbucket.org/NotAnurag/todolist_restarted/src/master/
When the user clicks on a date, the variable DateTime picker successfully returns the user-selected date in the print statement. But when I pass this value to the jumptopage method, it gives his error: "The method jumpToDay was called on null"
The problem that I see in the code is that _daysPageController is not initialized. IDE helpfully suggests various methods that you can call on DaysPageController, but the fact remains that it is declared, but no value is assigned to it (meaning that it is null):
DaysPageController _daysPageController; // remains null unless assigned a value
Therefore, what the error is attempting to tell is that jumpToDay(DateTime) is called on null (which obviously does not have such a method). If you look at the stack trace a bit more explicit hint is buried in there:
[ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: NoSuchMethodError: The method 'jumpToDay' was called on null.
Try to initialize the controller and see if it helps to resolve the issue.
i am building a mobile app that allows the user to pick the date from a date picker,
when opening the picker screen it overflows from the button
i searched the problem and find the same problem here
https://github.com/flutter/flutter/issues/19744
it is mentioned in the solution that he modified the file " date_picker.dart "
how can i find this file and how to apply these changes
the code i used :
DateTime TodayDate = new DateTime.now();Future<Null> selectDate(BuildContext context) async{
final DateTime Picker = await showDatePicker(
context: context,
initialDate: TodayDate,
firstDate: TodayDate,
lastDate: new DateTime(2021),
);
if (Picker != null && Picker != TodayDate){
print('${TodayDate.toString()} تاريخ الرحلة : ');
setState(() {
TodayDate = Picker;
});
}}
inside the widget build
new RaisedButton(onPressed:(){selectDate(context);},
color: Colors.lightGreen,
textColor: Colors.grey[200],
child: const Text('اختيا تاريخ الرحلة'),
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
),
Don't.
Editing the file directly is going to break (ie not have your customization) if anyone else tries to run this code on their own machine.
You'll break your own code if you ever update Flutter.
Look into overriding the showDatePicker build() method. Copying its content and adding your customization would be much preferable to actually editing the file. Although - even this still seems very sketchy though. Think about a year down the road when Flutter decides to change the implementation of showDatePicker.build(). Unless you are committed to maintaining this code with every Flutter update, you may be out of luck.
The ideal solution is to request a feature addition, or to do it yourself and try to get it integrated. Obviously if you need this functionality asap that isn't going to help you much.
Edit: There appears to be workaround that involves using a SingleChildScrollView to avoid the overflow - see https://github.com/flutter/flutter/issues/19744#issuecomment-493873347
DateTime dateTime = await showDatePicker(
context: context,
initialDate: DateTime(2000),
firstDate: DateTime(1950),
lastDate: DateTime(DateTime.now().year + 1),
builder: (context, child) {
return SingleChildScrollView(
child: Theme(
child: child,
data: ThemeData.light(),
),
);
});
In Android Studio, select showDatePicker, then press CTRL + F
The file date_picker.dart will open in a new tab. Around line 960 in the file is the ButtonBar you are looking for. Now when you try to edit it, a warning will pop up:
Just press OK and edit as you like. Beware that the changes might be overwritten when you run flutter upgrade. It might be better to copy the whole file into your project to create your own version of the date picker.