when I set Textfield autofocus:false it doesn't refresh the page but when I tap on the TextField, the keyboard shows then the main page rebuilds which causes lag.
This has been a problem for almost a week now. I can find problems related to textfields rebuilding UI but the solution cannot be applied to mine.
MAIN PAGE CONTAINS THIS FUNCTION WHEN A BUTTON IS CLICKED
void addCommentModal() {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: AddCommentModal(
onPost: (String text) {
// APIServices.commentPost(context, i.toString(), text);
Navigator.pop(context);
},
),
);
},
);
}
AddCommentModal
class AddCommentModal extends StatefulWidget {
final ValueChanged<String> onPost;
AddCommentModal({#required this.onPost});
#override
_AddCommentModalState createState() => _AddCommentModalState();
}
class _AddCommentModalState extends State<AddCommentModal> {
final commentController = TextEditingController();
bool _canPost = false;
String defaultProfilePhoto = "";
#override
void initState() {
defaultProfilePhoto = Constants.userFirstName[0].toUpperCase();
super.initState();
}
#override
void dispose() {
commentController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
print("PHOTO: ${Constants.userProfilePhoto}");
return Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Container(
width: 50,
height: 50,
child: ClipRRect(
borderRadius: new BorderRadius.circular(50),
child: Constants.userProfilePhoto == null
? Container(
color: Color(colorPrimary),
alignment: Alignment.center,
child: Text(
defaultProfilePhoto,
style: TextStyle(
color: Color(colorText), fontSize: 20),
),
)
: Image.network(
APIServices.httpDomain + Constants.userProfilePhoto,
fit: BoxFit.cover,
)),
),
Expanded(
child: Container(
margin: EdgeInsets.only(
left: 10,
),
child: TextField(
controller: commentController,
autofocus: true,
decoration: new InputDecoration(
suffixIcon: IconButton(
onPressed: () => widget.onPost(commentController.text),
icon: Icon(
FontAwesomeIcons.paperPlane,
size: 15,
color: Theme.of(context).primaryColor,
)),
contentPadding: EdgeInsets.all(10),
hintText: "Add a comment ...",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(20.0),
),
),
keyboardType: TextInputType.text,
style: new TextStyle(fontFamily: "Poppins", fontSize: 15),
),
))
],
));
}
}
Faced the same issue, been trying for hours :
if your screen depends on MediaQuery or at least having one widget
depenig on MediaQuery, the keyboard popup changes the size of your
screen, which triggers mediaQuery and causing rebuilds...in this case
avoid using mediaQuery, Instead get your dimensions using (sizer
package) https://pub.dev/packages/sizer
Replaced everything related to mediaQuery and now works fine.
It was caused by an unoptimized code on Flutter's SDK: https://github.com/flutter/flutter/issues/37878.
The fix was merged very recently and is on the "master" channel.
Consider switching to that channel, using flutter channel master.
Related
I'm currently working on a part of a project in which in I will be typing in an entry to the provided Text Form Field and the typed entry will be displayed in a list view builder dynamically (meaning the list grows the more entry the user gives).
However, I came across this error where right after I entered an entry, the screen changes straight to black [PLEASE SEE VIDEO or PICTURES (attached)]. If you slow down the video, you can catch a glimpse that the entered input was indeed displayed in the box, but the screen just switches to black right away. Any ideas why this happens? What can I fix? What's my error?
The following is a time stamp screenshot of what the error looks like (in case the video does not load):
part1
part2
part3
part4
The following is my code:
import 'package:english_words/english_words.dart';
import 'package:globesisters_internship_project/screens/invite_list.dart';
import 'package:flutter/material.dart';
/*GLOBAL VARIABLE*/
//TextFormField for Friends Name
var _friendsName;
final _friendsNameController = TextEditingController();
class InviteFriendsPage extends StatefulWidget {
#override
State<InviteFriendsPage> createState() => _InviteFriendsPageState();
}
class _InviteFriendsPageState extends State<InviteFriendsPage> {
#override
void dispose1() {
_friendsNameController.dispose();
super.dispose();
}
List<String> list_of_friends = []; **//THIS IS THE ENTRY LIST!!**
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Column(children: <Widget>[
SizedBox(
height: 10.0,
),
Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
width: 300,
height: 260,
child: ListView.builder( **//THIS IS THE LISTVIEW BUILDER**
shrinkWrap: true,
itemCount: list_of_friends.length,
itemBuilder: (context, index) {
return Card(
//margin: EdgeInsets.all(5),
child: ListTile(
title: Text(list_of_friends[index]),
));
},
)),
SizedBox(
height: 10.0,
), //spacing
Container(
margin: EdgeInsets.only(
left: 20,
right: 20,
),
child: Column(
children: <Widget>[
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (value) {
if (value!.isEmpty)
return 'Please enter a valid Name';
else
return null;
},
controller: _friendsNameController,
decoration: InputDecoration(
labelText: "Invite your friend!",
prefixIcon: Icon(Icons.person),
border: OutlineInputBorder(),
),
),
SizedBox(height: 10.0),
SendInviteButton(context),
],
),
),
],
))
]);
}
//
/* BUTTON */
OutlinedButton SendInviteButton(BuildContext context) {
int count = 0;
**//THIS IS MY ATTEMPT TO SET-STATE FOR DYNAMIC LIST ENTRY**
void addFriends(String friends) {
setState(() {
list_of_friends.add(friends);
});
}
return OutlinedButton(
style: OutlinedButton.styleFrom(minimumSize: const Size(400, 50)),
onPressed: () {
if (_formKey.currentState!.validate()) {
count++;
final addedFriend = _friendsNameController.text;
//widget.add_friend(addedFriend);
addFriends(addedFriend);
Navigator.of(context).pop();
}
},
child: Text(
"Send Invite".toUpperCase(),
style: const TextStyle(color: Colors.cyan, fontWeight: FontWeight.bold),
),
);
}
}
I am trying to preselect a particular tag shown on the right of the image.
However, I am unable to figure out where to set it. The tags are coming from an API (Postgres backend).
Once it is built to a list of overlay as shown on the right again in the screenshot. I just wanted it to preselect, "Morning", "Evening" or "Daytime" based on the time of the day.
To start off with, I am not able to preselect anything in "selectedTags". This can only be done manually by the user when clicked on a tag.
The method is shared below.
showTagPicker(context, allTags) async {
await showModalBottomSheet(
isDismissible: false,
enableDrag: false,
backgroundColor: Colors.transparent,
isScrollControlled: true,
context: context,
builder: (builder) => Center(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
color: Colors.white,
),
margin: EdgeInsets.all(16),
padding: EdgeInsets.all(24),
child: ListView(
shrinkWrap: true,
children: <Widget>[
Text(
"Please pick your tags",
style: TextStyle(fontSize: 16),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: TagPicker(
height: MediaQuery.of(context).size.height * .6,
tags: allTags,
onTagSelected: (_selectedTags) {
selectedTags = _selectedTags;
print("----->");
print(selectedTags);
print("<-----");
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
RaisedButton(
color: PRIMARY,
textColor: WHITE,
onPressed: () {
Navigator.of(context).pop();
navigateToAnalysis(context);
},
child: Text("Save"),
),
],
)
],
),
),
),
);
}
I tried, adding "print" to debug and see what and where things are being set but I did not get any further, I have also shown the debug screen if it helps.
Any direction here to preselect one/many tags would be helpful.
Please let me know if I must provide additional details to solve this.
Also, I know there are several things in the code which might be wrong, it is inherited code and I am struggling a bit.
Edit: Including TagPicker. It is not a public library but our widget.
class TagPicker extends StatefulWidget {
const TagPicker(
{Key key, this.height, this.tags, this.onTagSelected, this.selectedTags})
: super(key: key);
#override
TagPickerState createState() => TagPickerState();
final double height;
final List tags;
final List selectedTags;
final Function onTagSelected;
}
class TagPickerState extends State<TagPicker> {
List selectedTags = [];
#override
void initState() {
super.initState();
if (widget.selectedTags != null) {
setState(() {
selectedTags = widget.selectedTags;
});
}
}
#override
Widget build(BuildContext context) {
return widget.tags != null
? Container(
constraints: widget.height != null
? BoxConstraints(maxHeight: widget.height, minHeight: 60)
: BoxConstraints(),
child: SingleChildScrollView(
child: Wrap(
spacing: 0.0,
children: List.generate(
widget.tags.length,
(index) {
return Padding(
padding: const EdgeInsets.only(right: 4.0),
child: ChoiceChip(
selectedColor: PRIMARY,
labelStyle: TextStyle(
fontSize: 12,
color: selectedTags.contains(widget.tags[index])
? WHITE
: Colors.black),
label: Text(widget.tags[index]['tag_name']),
selected: selectedTags.contains(widget.tags[index]),
onSelected: (selected) {
setState(() {
selectedTags.contains(widget.tags[index])
? selectedTags.remove(widget.tags[index])
: selectedTags.add(widget.tags[index]);
widget.onTagSelected(selectedTags);
});
},
),
);
},
),
),
),
)
: Container();
}
}
Pass selectedTags as an argument to TagPicker and modify TagPicker to render an initial set of selected tags. As before onTagSelected callback will provide an updated set.
The error (given in the title) was thrown when I ran the app.
Here is my code
class NoteAdder extends StatefulWidget {
#override
_NoteAdder createState() => _NoteAdder();
}
class _NoteAdder extends State<NoteAdder> {
Note? note;
TextEditingController titleController = TextEditingController();
TextEditingController descriptionController = TextEditingController();
#override
Widget build(BuildContext context) {
titleController.text = note!.title!;
descriptionController.text = note!.description!;
return AlertDialog(
backgroundColor: Colors.lime,
content: Column(
children: [
const Text(
'ADD NOTE',
style: TextStyle(fontSize: 25),
),
const SizedBox(height: 30),
Container(
alignment: Alignment.topLeft,
child: const Text('Title:'),
),
TextField(
controller: titleController,
decoration: InputDecoration(
border: UnderlineInputBorder(),
),
),
const SizedBox(height: 30),
Container(
alignment: Alignment.topLeft,
child: const Text('Description:'),
),
TextField(
controller: descriptionController,
maxLines: 13,
decoration: InputDecoration(
border: UnderlineInputBorder(),
),
),
const SizedBox(height: 35),
Container(
alignment: Alignment.center,
child: ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.red),
onPressed: () {
setState(() {
save();
});
},
child: const Text('Save')))
],
));
}
void save() async {
note?.date = DateFormat.yMMMd().format(DateTime.now()) as DateTime?;
if (note?.id != null) {
await NoteDatabaseHelper.update(note!)??0;
} else {
await NoteDatabaseHelper.insert(note!)??0;
}
}
}
I am a bit new to flutter. Please help me to solve this problem
Link to my complete project: https://github.com/SayanBanerjee09082002/Daily_Utility
Note: The add screen appears when I press a floating action button. The app runs ok until I hit that button.
Since you wrote Note? note;, note == null so trying to use it with null check like this note?.date = DateFormat.yMMMd().format(DateTime.now()) as DateTime?; will throw error. Now I don't know what the constructor of your class Note look like so my answer may not be accurate; but as answer, I will advice you to do either:
Note? note = Note(); //I don't know the structure of the constructor, so you have to deal with that part
or inside save()
if(note != null) {
note.date = DateFormat.yMMMd().format(DateTime.now()) as DateTime;
}
I'm trying to create a custom checkbox widget and I'm having trouble getting the bool value of that checkbox from another class:
So am having a form in stateful widget Signup, within this form I'm calling my CustomCheckBox widget (also a stateful widget).
The issue: When I click on the checkbox its value change to true in the CustomCheckBox widget however after submitting the form in Signup widget the value always false (seams to be no back communication between the the two widgets)
My CustomCheckBox code:
import 'package:flutter/material.dart';
import 'package:tunimmo/Constants/palette.dart';
class CustomCheckBox extends StatefulWidget {
bool checked;
final String label;
CustomCheckBox({this.checked, this.label});
#override
_CustomCheckBoxState createState() => _CustomCheckBoxState();
}
class _CustomCheckBoxState extends State<CustomCheckBox> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 15.0, left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
height: 30,
decoration: BoxDecoration(
color: myPrimaryColor,
),
child: Text(" "),
),
Text(' ${widget.label}', style: Theme.of(context).textTheme.bodyText1),
],
),
Center(
child: InkWell(
onTap: () {
setState(() {
widget.checked = !widget.checked;
});
},
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: widget.checked ? myPrimaryColor : myWhiteColor,
border: Border.all(
color: myPrimaryColor,
width: 3,
),
),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: widget.checked
? Icon(
Icons.check,
size: 25.0,
color: myWhiteColor,
)
: Icon(
Icons.check_box_outline_blank,
size: 25.0,
color: myWhiteColor,
),
),
),
)),
],
),
);
}
}
In the Signup widget I'm just calling the constructor and passing a bool field (expected to send/get the value in the CustomCheckBox widget) and a string label.
PS: I have more than one checkbox in my form.
Please advice!
The problem is that you are not changing the checked value in the screen(signup) but changing in the custom checkbox, to solve this issue define checked variable in SignUp if not already did, then define Function call back in the checkbox widget as follows:
final Function(bool)checkChanged;
CustomCheckBox({this.checked, this.label,this.checkedChanged});
then call it in ontap and give the value change
onTap: () {
widget.checkedChanged(!widget.checked);
setState(() {
widget.checked = !widget.checked;
});
}
do the following when calling the CustomCheckbox:
CustomCheckBox(
checked:false,
label:'a label',
checkedChanged:(val){
checked=val;
}
)
and use that checked variable when submitting the form and that should solve your problem.
I have a model class which I used to create a object from one of my main stateful class. I have a text field and button in my main class. But they both are completely different stateful class. That is, I have 3 different classes in a dart file (main page, textfield, button). I want to access and modify the object initiated in the build of main page in my textfield and button.
What I did: I have made my object on the top of all classes in my dart file assuming all classes have access to them. That was a success. All classes have access to that object, even value initiated to the object from main page are available in other classes (textfield, button).
Problem what I have now: Even though I have access to those values in the object, I can't modify it to latest value from FancyTextField class regardless StatusButton class updating.
What my project do: I will get some values from firestore database on my main page build and I will pass it to textfield and button in the other two classes., that way it resembles my values on it. And I will save the modified value from textfield and button to the object and upload it to firestore database from main page.
Complete code of the page:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/services.dart';
import 'package:om/models/machine.dart';
import 'package:om/utils/kalaicons_icons.dart';
Machine machine;
class WorkshopTool extends StatefulWidget {
final String rotary;
WorkshopTool(this.rotary);
#override
_WorkshopToolState createState() => _WorkshopToolState(rotary);
}
class _WorkshopToolState extends State<WorkshopTool> {
String rotary;
bool _showOnScreen = true;
_WorkshopToolState(this.rotary);
#override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
return FutureBuilder(
future: Firestore.instance
.collection('productionrpt')
.document(rotary)
.get(),
builder: (context, snapshot) {
if (!snapshot.hasData)
return Container(
height: screenSize.height - 50.0,
child: Center(
child: SizedBox(
height: 80.0,
width: 80.0,
child: CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation<Color>(Colors.green[600]),
strokeWidth: 15.0,
)),
));
machine = Machine.fromMapObjext(snapshot.data);
return Container(
height: screenSize.height - 50.0,
width: screenSize.width,
child: Stack(
children: <Widget>[
SingleChildScrollView(
child: Column(
children: <Widget>[
//To make a empty column space for stack on top
Container(
height: 80.0,
padding: EdgeInsets.only(bottom: 5.0, right: 15.0),
child: Align(
alignment: Alignment.bottomRight,
child: Text(
machine.date,
style: TextStyle(
color: Colors.black,
fontSize: 17.0,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold),
),
),
),
FancyTextField('Production'),
FancyTextField('Damages'),
FancyTextField('Plan'),
SizedBox(
height: 20.0,
),
Padding(
padding: EdgeInsets.only(
bottom:
MediaQuery.of(context).viewInsets.bottom)),
],
),
),
Container(
height: 50.0,
decoration: BoxDecoration(
color: Colors.green[400],
borderRadius:
BorderRadius.vertical(top: Radius.circular(15.0))),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: MaterialButton(
color: Colors.black,
padding: EdgeInsets.only(
top: 10.0, bottom: 10.0, left: 20.0, right: 20.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)),
child: Text(
'UPDATE',
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Colors.white),
),
onPressed: () {
print('Saved to cloud : ${machine.production}');
firebasePutData();
}),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.all(20.0),
child: StatusButton(),
),
),
Align(
alignment: Alignment.topLeft,
child: IconButton(
icon: Icon(
Icons.close,
size: 40,
color: Colors.black,
),
onPressed: () {
print('Bottomsheet closed');
}),
),
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
machine.rotary,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
decoration: TextDecoration.underline,
fontWeight: FontWeight.bold),
),
),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: Align(
alignment: Alignment.topRight,
child: Switch(
value: _showOnScreen,
activeTrackColor: Colors.black54,
activeColor: Colors.black,
inactiveThumbColor: Colors.grey[600],
inactiveTrackColor: Colors.grey[500],
onChanged: (v) {
_showOnScreen = !_showOnScreen;
print('Switch tapped');
}),
),
),
],
),
);
});
}
void firebasePutData() {
Firestore.instance
.collection("productionrpt")
.document(rotary)
.updateData(machine.toMap());
print('Data updated');
}
} //End of main page STATE (a bottom sheet)
//#######################################################################################################
//############ FANCY TEXT FIELD FOR ENTERING MACHINE DATA #################
class FancyTextField extends StatefulWidget {
final String _title;
FancyTextField(
this._title,
);
#override
_FancyTextFieldState createState() => _FancyTextFieldState(this._title);
}
class _FancyTextFieldState extends State<FancyTextField> {
final String _title;
final TextEditingController _ctrl = TextEditingController();
_FancyTextFieldState(this._title);
#override
void initState() {
switch (_title) {
case 'Production':
_ctrl.text = machine.production.toString();
break;
case 'Plan':
_ctrl.text = machine.plan.toString();
break;
case 'Damages':
_ctrl.text = machine.damage.toString();
break;
}
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
height: 125.0,
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.green[400],
borderRadius: BorderRadius.circular(15.0),
// boxShadow: [
// BoxShadow(
// blurRadius: 5, color: Colors.green[300], spreadRadius: 5)
// ]
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
_title,
style: TextStyle(
color: Colors.black,
fontSize: 23.0,
fontWeight: FontWeight.bold),
),
Container(
height: 50,
width: 300,
alignment: Alignment.center,
padding: const EdgeInsets.all(5.0),
margin: const EdgeInsets.only(
top: 10.0, bottom: 10, left: 30.0, right: 30.0),
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: BorderRadius.circular(10),
),
child: TextField(
//maxLength: 5,
controller: _ctrl,
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
),
decoration: InputDecoration(
border: InputBorder.none,
),
onChanged: (v) {
switch (_title) {
case 'Production':
machine.production = int.parse(_ctrl.text);
break;
case 'Plan':
machine.plan = int.parse(_ctrl.text);
break;
case 'Damages':
machine.damage = int.parse(_ctrl.text);
break;
}
print('Prod: ${machine.production}');
},
),
),
],
),
);
}
} //END OF CLASS FANCY TEXT FIELD
//######################################################################################################
//####### A STATEFUL WIDGET FOR MACHINE STATUS BUTTON : running, off, breakdown ##########
class StatusButton extends StatefulWidget {
#override
_StatusButtonState createState() => _StatusButtonState();
}
class _StatusButtonState extends State<StatusButton> {
Color color;
IconData icon;
#override
Widget build(BuildContext context) {
switch (machine.stats) {
case 0:
color = Colors.grey[600];
icon = Icons.power_settings_new;
break;
case 1:
color = Colors.blue;
icon = Icons.power_settings_new;
break;
default:
color = Colors.red;
icon = Kalaicons.breakdown;
break;
}
return Container(
height: 70.0,
width: 70.0,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
),
child: IconButton(
icon: Icon(
icon,
color: Colors.white,
size: 50.0,
),
onPressed: () {
setState(() {
machine.stats > 1 ? machine.stats = 0 : machine.stats++;
print('Status button pressed: ${machine.stats}');
});
},
));
}
} //END OF CLASS STATUS BUTTON
My model:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:intl/intl.dart';
class Machine {
int _production;
int _plan;
int _damage;
int _stats = 0;
String _date = '~Not available';
String _rotary;
// Machine(this._production, this._damage, this._date,
// [this._stats, this._plan]);
int get production => this._production;
int get plan => this._plan;
int get damage => this._damage;
int get stats => this._stats;
String get date => this._date;
String get rotary => this._rotary;
set production(int updatedValue) {
if (updatedValue != null) {
this._production = updatedValue;
}
}
set plan(int updatedValue) {
if (updatedValue != null) {
this._plan = updatedValue;
}
}
set damage(int updatedValue) {
if (updatedValue != null) {
this._damage = updatedValue;
}
}
set stats(int updatedValue) {
this._stats = updatedValue;
}
// set date(String updatedValue) {
// this._date = DateFormat.jm().format(DateTime.now());
//
// }
//Function to set a map list of new data for firebase
Map<String, dynamic> toMap() {
var map = Map<String, dynamic>();
map['production'] = this._production;
map['plan'] = this._plan;
map['damages'] = this._damage;
map['stats'] = this._stats;
map['date'] = DateFormat("MMMM dd, hh:mm a").format(DateTime.now());
return map;
}
//Constructor to extract firebase collections
Machine.fromMapObjext(DocumentSnapshot map) {
this._production = map['production'];
this._plan = map['plan'];
this._damage = map['damages'];
this._stats = map['stats'];
this._date = map['date'];
this._rotary = map['machine'];
}
}
UPDATE I RECENTLY NOTED: The value of StatusButton is gettiong updated to the object and to firestore. however value of updated FancyTextField only reflects inside that class itself. Not updating globally.
Lastly I found the issue myself rolling 3 days with it. Issue was happened because when keyboard pops, the widget also gets it state rebuild. Since I had my firebase data on FutureBuilder in the build, my old data was recalled from the firebase again and save it on top of newly edited data.
Why initial text I put on the TextField didn't changed ?
Because I had it set it on my initState of FancyTextField class, so when rebuilding widget I won't execute and my edited value stays as before.
Why StatusButton value updated without failing ?
Because when I tap on the button keyboard doesn't pops up and build wasn't rebuild again. But later I noticed, after changing my StatusButton status to someother value and tapping on TextField makes it to OLD value (that is the value that is in firebase currently). Since build is recreated. That's how I figured it out.
What I did to overcome this:
I simply removed my FutureBuilder which gets data from firebase, and created a Future for the same and initiated in the initState.
If anyone want, I can show the updated code here