Develop Reference

How to fix icons in AppBar when changing toolbarHeight in Flutter?

This is my app bar with one line text:
appBar: AppBar(
title: Text("Summer Trip"),
centerTitle: true,
actions: [
PopupMenuButton(
itemBuilder: (context){
return [
PopupMenuItem<int>(
value: 0,
child: Text("Test"),
),
];
},
),
],
),
And it gives the following result:
As you see the center of the row is about 25 pixels from screen border.
Now I need to add the second line to my title. This is my solution:
appBar: AppBar(
toolbarHeight: 70,
flexibleSpace: SafeArea(
child: Center(
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10),
child: Text('Summer Trip',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 20.0)
),
),
Padding(
padding: const EdgeInsets.only(top: 5),
child: Text('Step 1',
style: TextStyle(color: Colors.white54, fontWeight: FontWeight.normal, fontSize: 14.0)
),
),
],
),
),
),
actions: [
PopupMenuButton(
itemBuilder: (context){
return [
PopupMenuItem<int>(
value: 0,
child: Text("Test"),
),
];
},
),
],
),
And this is the result:
As you see, if we increase toolbarHeight of AppBar then arrow and menu buttons move down. However, I need them to stay at the same position. Could anyone say how to do it?

You can wrap your widgets with Align widget.
appBar: AppBar(
toolbarHeight: 70,
flexibleSpace: SafeArea(
child: Center(
child: Column(
children: const [
Padding(
padding: EdgeInsets.only(top: 10),
child: Text('Summer Trip',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 20.0)),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'Step 1',
style: TextStyle(
color: Colors.white54,
fontWeight: FontWeight.normal,
fontSize: 14.0),
),
),
],
),
),
),
leading: Align(
alignment: Alignment.topCenter,
child: IconButton(
onPressed: () {},
icon: const Icon(
Icons.arrow_back,
),
),
),
actions: [
Align(
alignment: Alignment.topCenter,
child: PopupMenuButton(
itemBuilder: (context) {
return [
const PopupMenuItem<int>(
value: 0,
child: Text("Test"),
),
];
},
),
),
],
),
Output:

Thanks to #Pavel_K for correcting me, earlier I misunderstood the question.
Corrected Answer
Instead of using flexibleSpace, use title (for the main title) and bottom (for the subtitle). This approach will solve your query, and make the icons stay on top (along the center of the title).
appBar: AppBar(
centerTitle: true,
toolbarHeight: 70,
leading: const Icon(Icons.arrow_back),
title: Column(
children: const [
Text(
'Summer Trip',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 20.0,
),
),
],
),
bottom: const PreferredSize(
preferredSize: Size(0, 14),
child: Padding(
padding: EdgeInsets.only(bottom: 8),
child: Text(
'Step 1',
style: TextStyle(
color: Colors.white54,
fontWeight: FontWeight.normal,
fontSize: 14.0,
),
),
),
),
actions: [
PopupMenuButton(
itemBuilder: (context) {
return [
const PopupMenuItem<int>(
value: 0,
child: Text("Test"),
),
];
},
),
],
),
Old (incorrect) Answer
I think you are using the flexibleSpace with the incorrect intent; it is meant to be used with FlexibleSpaceBar.
What you want to achieve can be simply achieved using title property of AppBar, and it will center the icon on it's own.
It will look like this:
appBar: AppBar(
centerTitle: true,
toolbarHeight: 70,
leading: const Icon(Icons.arrow_back),
title: Column(
children: const [
Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
'Summer Trip',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 20.0,
),
),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'Step 1',
style: TextStyle(
color: Colors.white54,
fontWeight: FontWeight.normal,
fontSize: 14.0,
),
),
),
],
),
),

How to remove padding from top of ListTile in Drawer?

I can not remove the indent from the first ListTile in any way. I think this is some kind of default indent, but I could not overcome it. Is it possible? Attached is the code and screenshot.
Drawer(
child: Container(
padding: EdgeInsets.zero,
child: Column(
children: <Widget>[
SizedBox(
height: 88.0,
width: 1000,
child: DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Настройки',
style: TextStyle(
color: Colors.white,
fontSize: MainStyle.p.fontSize
),
),
),
),
Expanded(
child: Column(
children: <Widget>[
ListTile(
title: Text(
'Язык',
style: TextStyle(
fontSize: MainStyle.p.fontSize
),
),
subtitle: Text(
"Русский",
),
trailing: IconButton(
icon: Icon(Icons.edit),
color: Colors.black,
onPressed: () {
},
),
),
ListTile(
title: Text(
'Выход',
style: TextStyle(
fontSize: MainStyle.p.fontSize
),
),
onTap: () {
exit();
},
),
],
)
),
Container(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Column(
children: <Widget>[
ListTile(
title: Text(
globalState.version,
style: TextStyle(
fontSize: 15,
color: Colors.grey
),
textAlign: TextAlign.center,
),
),
],
)
)
),
],
),
)
);
P.S. There is not any details, but StackOverflow make me write more text, because of "It looks like your post is mostly code; please add some more details."

add this line to your DrawerHeader:
margin: EdgeInsets.zero,

Title is not aligned with the body in Flutter

I am trying to make a align the heading(title) contents with the body that is the list item here. But it is not getting aligned. If I align it and reduce my screen size (I am using flutter web) it gives a render flex. If I use an expanded widget to align it it doesn't get itself aligned with the body (if I reduce it to half my screen). If I maximise my screen it s getting aligned
I want it to fit even I reduce the screen size.
How do I do it?
Here is the image:
Here is my code
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:http/http.dart';
import 'Postsc.dart';
late List<Post> drivers;
class MyApp extends StatefulWidget {
// to set the root of app.
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage1(),
);
}
}
class MyHomePage1 extends StatefulWidget {
late final String title;
#override
_MyHomePage1State createState() => _MyHomePage1State();
}
class _MyHomePage1State extends State<MyHomePage1> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Center(
child: Text("Customer Table",
style: TextStyle(
fontWeight: FontWeight.w900,
),
),
),
),
body:Container(
child: Column(
children: [
Row(
children: [
const Text('Cid',
style:TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)
),
( SizedBox(width:MediaQuery.of(context).size.width*0.225)),
const Text('Cname',
style:TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)
),
( SizedBox(width:MediaQuery.of(context).size.width*0.20) ),
const Text('Cadd',
style:TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)
),
( SizedBox(width:MediaQuery.of(context).size.width*0.22)),
const Text('Ctype',
style:TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)
),
]
),
Expanded(
child: Container(
child:_buildBody(context),
),
)
],
),
color:const Color(0xFF303030),
),
);
}
// build list view & manage states
FutureBuilder<List<Post>> _buildBody(BuildContext context) {
final HttpService httpService = HttpService();
return FutureBuilder<List<Post>>(
future: httpService.getPosts(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
final List<Post>? posts = snapshot.data; //marked
return _buildPosts(context, posts!);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
);
}
// build list view & its tile
ListView _buildPosts(BuildContext context, List<Post> posts) {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: posts.length,
itemBuilder: (context, index) {
return Container(
height:70,
child: Card(
shadowColor: Colors.white,
color:const Color(0xFF303030),
elevation: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
child: Text(posts[index].Cid,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
),
),
Expanded(
child: Container(
child: Text(posts[index].Cname,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
),),
Expanded(
child: Container(
child: Text(posts[index].Cadd,style: const TextStyle(fontWeight: FontWeight.bold,color:Colors.white,),
),
),
),
Expanded(
child: Container(
child: Text(posts[index].Ctype,style: const TextStyle(fontWeight: FontWeight.bold,color:Colors.white,),
),
),
),
],
),
),
);
},
);
}
}
class HttpService {
Future<List<Post>> getPosts() async {
Response res = await get(
Uri.parse('http://localhost/localconnect/customer_change.php'));
print(res.body);
if (res.statusCode == 200) {
List<dynamic> body = jsonDecode(res.body);
List<Post> posts = body.map(
(dynamic item) => Post.fromJson(item),
).toList();
return posts;
} else {
throw "Unable to retrieve posts.";
}
}
}

Use Expanded instead of using SizedBox and MediaQuery:.
Like so:
Row(
children: [
const Expanded(
child: Text(
'Cid',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
const Expanded(
child: Text(
'Cname',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
const Expanded(
child: Text(
'Cadd',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
const Expanded(
child: Text(
'Ctype',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
],
)

you can try Expanded widget except using of SizedBox
here is some code:
class MyHomePage1 extends StatefulWidget {
late final String title;
#override
_MyHomePage1State createState() => _MyHomePage1State();
}
class _MyHomePage1State extends State<MyHomePage1> {
List l = [
{"number": "1", "name": "warner", "place": 'sydney', "des": 'Regular customer'},
{"number": "1", "name": "warner", "place": 'sydney', "des": 'Regular customer'},
{"number": "1", "name": "warner", "place": 'sydney', "des": 'Regular customer'},
{"number": "1", "name": "warner", "place": 'sydney', "des": 'Regular customer'},
];
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Center(
child: Text(
"Customer Table",
style: TextStyle(
fontWeight: FontWeight.w900,
),
),
),
),
body: Container(
child: Column(
children: [
Row(
children: const [
Expanded(
child: Text('Cid',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)),
),
Expanded(
child: Text('Cname',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)),
),
Expanded(
child: Text('Cadd',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)),
),
Expanded(
child: Text('Ctype',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)),
),
],
),
Expanded(
child: Column(
children: l
.map(
(e) => Row(
children: [
Expanded(
child: Text(
e['number'],
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
Expanded(
child: Text(
e['name'],
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
Expanded(
child: Text(
e['place'],
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
Expanded(
child: Text(
e['des'],
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
],
),
)
.toList(),
),
)
],
),
color: const Color(0xFF303030),
),
);
}
}

How to resize TextField() text to fit the max width of an Expanded() widget

i want to resize the text of a TextField() widget in order to fit the max width of its Expanded() parent, this width is determined by flex: 10 as you can see in the code.
However, i do not know how can i achieve this result. I also tried the AutoSizeTextField() package with no success. Maybe someone can figure out how to do this.
Thank you in advance.
Edit. If it is not clear, the text is entered by the user. I want to resize it dynamically. The following image is just an example of the current behaviour of the App when user enters "This text should be resized".
Edit. I updated the code so that is clear what i am trying to do.
I have a list of transactions. When the user click on a transaction a dialog will popup in order to let the user edit the info he has provided.
This is the code which call the dialog, the dialog is ModificaTransazione().
Material(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: InkWell(
borderRadius: BorderRadius.circular(10),
onTap: () {
//sleep(Duration(milliseconds: 800));
showDialog(
context: context,
builder: (context) {
return Dialog(
insetPadding: EdgeInsets.only(
bottom: 0.0), //QUESTO TOGLIE SPAZIO DALLA TASTIERA
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40)),
elevation: 16,
child: ModificaTransazione(
idtransazione: tx.id,
titolotransazione: tx.titolo,
importotransazione: tx.costo,
datatransazione: tx.data,
indicetransazione: tx.indicecategoria,
notatransazione: tx.nota,
listatransazioni: widget.transactions,
eliminatransazione: widget.deleteTx,
listanomicategorie: widget.listanomicategorie,
refreshSezioneFinanziaria:
widget.refreshFinanceScreen,
size: size),
);
},
).then((_) {
setState(() {});
});
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: SizedBox(
height: size.height * 0.10,
// color: Colors.red,
child: Row(
children: [
Expanded(
flex: 4,
child: Container(
margin: const EdgeInsets.only(left: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
FittedBox(
child: Text(
tx.titolo,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
FittedBox(
child: Text(
DateFormat('dd MMMM, yyyy', 'it')
.format(tx.data),
style: const TextStyle(
color: Colors.grey,
),
),
),
],
),
),
),
Expanded(
flex: 5,
child: Container(
alignment: Alignment.centerRight,
margin: const EdgeInsets.symmetric(horizontal: 15),
child: FittedBox(
child: Text(
'- ${ciframostrata(tx.costo)} €',
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Color(0xFF7465fc)),
),
),
),
),
],
),
),
),
),
),
This is "ModificaTransazione()" literally "Edit Transaction" in Italian.
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/models/transaction.dart';
import 'package:flutter_application_1/widget/transactions_list.dart';
import 'package:intl/intl.dart';
import 'package:auto_size_text_field/auto_size_text_field.dart';
class ModificaTransazione extends StatefulWidget {
ModificaTransazione({
Key? key,
required this.size,
required this.idtransazione,
required this.titolotransazione,
required this.importotransazione,
required this.datatransazione,
required this.indicetransazione,
required this.notatransazione,
required this.listatransazioni,
required this.eliminatransazione,
required this.listanomicategorie,
required this.refreshSezioneFinanziaria,
}) : super(key: key);
final Size size;
final String idtransazione;
String titolotransazione;
double importotransazione;
DateTime datatransazione;
int indicetransazione;
String notatransazione;
List<String> listanomicategorie;
List<Transaction> listatransazioni;
final Function eliminatransazione;
final Function refreshSezioneFinanziaria;
#override
State<ModificaTransazione> createState() => _ModificaTransazioneState();
}
class _ModificaTransazioneState extends State<ModificaTransazione> {
var _notaController = TextEditingController();
var _importoController = TextEditingController();
var _titoloController = TextEditingController();
#override
void initState() {
super.initState();
if (widget.notatransazione != "") {
_notaController = TextEditingController(text: widget.notatransazione);
} else {
_notaController = TextEditingController(text: "Aggiungi");
}
_importoController = TextEditingController(
text: "${ciframostrata(widget.importotransazione)}");
_titoloController = TextEditingController(text: widget.titolotransazione);
}
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
width: widget.size.width * 0.8,
height: widget.size.height * 0.60,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding:
const EdgeInsets.only(top: 30, left: 30, right: 30, bottom: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
GestureDetector(
onTap: () {
setState(() {
Navigator.of(context).pop();
});
},
child: Icon(
Icons.cancel,
color: Colors.black,
),
),
Spacer(),
Expanded(
//
// THIS IS WHAT I WANT TO RESIZE, BUT FITTEDBOX IS CAUSING RENDERBOX IS NOT LAID OUT
//
flex: 10,
child: FittedBox(
fit: BoxFit.fitWidth,
child: TextField(
maxLines: 1,
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _titoloController,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
onSubmitted: (_) => salvaModifica(),
),
),
),
Spacer(),
GestureDetector(
child: Icon(
Icons.delete_outline_rounded,
color: Colors.black,
),
onTap: () {
print("Transazione Eliminata");
widget.eliminatransazione(widget.idtransazione);
Navigator.of(context).pop();
}),
],
),
Container(
padding: EdgeInsets.all(15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Theme.of(context).primaryColor.withOpacity(0.1),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
flex: 4,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _importoController,
keyboardType: const TextInputType.numberWithOptions(
decimal: true),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 60,
color: Theme.of(context).primaryColor,
),
onSubmitted: (_) => salvaModifica(),
),
),
Flexible(
//color: Colors.red,
//alignment: Alignment.centerRight,
//width: widget.size.width * 0.10,
// color: Colors.red,
child: Text(
"€",
style: TextStyle(
fontSize: 40,
color:
Theme.of(context).primaryColor.withOpacity(0.8),
),
),
),
],
),
),
// AutoSizeText(
// "${ciframostrata(widget.importotransazione)} €",
// maxLines: 1,
// style: TextStyle(
// fontSize: 70,
// color: Theme.of(context).primaryColor,
// ),
// ),
// ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Categoria",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.grey,
),
),
Container(
child: Row(
children: [
GestureDetector(
child: Text(
"${funzioneCategoria(indicenuovo ?? widget.indicetransazione, widget.listanomicategorie)[2]} ",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: funzioneCategoria(
indicenuovo ?? widget.indicetransazione,
widget.listanomicategorie)[1]),
),
onTap: _askedToLead,
),
Icon(
funzioneCategoria(
indicenuovo ?? widget.indicetransazione,
widget.listanomicategorie)[0],
color: funzioneCategoria(
indicenuovo ?? widget.indicetransazione,
widget.listanomicategorie)[1]),
],
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Data",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.grey,
),
),
InkWell(
// borderRadius: BorderRadius.circular(10),
onTap: _presentDatePicker,
child: Text(
DateFormat('dd MMMM, yyyy', 'it')
.format(_selectedDate ?? widget.datatransazione),
style: TextStyle(
color: Colors.black, //Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
),
],
),
Container(
//color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
"Nota",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.grey,
),
),
),
Expanded(
child: (_notaController.text != "Aggiungi")
? TextField(
textAlign: TextAlign.end,
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _notaController,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
onSubmitted: (_) => salvaModifica(),
)
: TextField(
textAlign: TextAlign.end,
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _notaController,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[600],
),
onSubmitted: (_) => salvaModifica(),
)),
],
),
),
modificato == true
? TextButton(
child: Text("Salva"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Theme.of(context).primaryColor),
foregroundColor:
MaterialStateProperty.all(Colors.white),
),
onPressed: () {
premuto = true;
salvaModifica();
},
)
: SizedBox(),
],
),
),
),
);
}

You can use the FittedBox widget to dynamically change text size based on width or height.
FittedBox(
fit: BoxFit.fitWidth,
child: TextField(
maxLines: 1,
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _titoloController,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
onSubmitted: (_) => salvaModifica(),
)),
The text will be resized based on the width of Expanded.

I have checked your code. You can do the following:
Row(
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: () {
setState(() {
Navigator.of(context).pop();
});
},
child: Icon(
Icons.cancel,
color: Colors.black,
),
),
Expanded(
child: TextField(
maxLines: 4,
decoration: InputDecoration(
border: InputBorder.none,
),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
GestureDetector(
child: Icon(
Icons.delete_outline_rounded,
color: Colors.black,
),
onTap: () {
print("Transazione Eliminata");
Navigator.of(context).pop();
}),
],
),

Datas from TextFormFields is null in Firebase database

I am having a hard time figuring this one out (im still new to flutter btw), I created a new screen with form that lets the user fill it out with information and after filling them out, there is a validator and onSaved: on EACH TextFormField() as of the moment, I just want the textform fields to have the datas saved to Firebase Database.
EDIT: I managed to make it work somehow using this code BUT the data Ive input in is nulled in Firebase database (second pic):
child: FlatButton(
color: Colors.blue,
child: Text("Confirm", style: TextStyle(color: Colors.white)),
onPressed: () async {
await db.collection("createdoffers").add(
{
'name': offerName,
'type': offerType,
'start': start,
'end': end,
}
);
},
),
Ive also watched some tutorial but Im having trouble making it work since its kind of a bit different to what Im trying to do (I guess its a beginners problem, Im new to programming and I fell in love with flutter lol)
Now on my Firebase console, I created a new collection with some new
dummy data just to fill in (mind you, I still dont save INPUTS from
the app, just created a collection and put in some dummy data)
The image of my firebase is below:
NULLED data
my code is below for the screen form that I am trying to save data from INPUTS in the TextFormField and saving it all to my database by clicking the FlatButton
My target for this is: 1. Save the data to firebase 2. Read that data and display it to a Container widget, I just want the C and R in CRUD for now
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class AddOffer extends StatefulWidget {
AddOffer({Key key}) : super(key: key);
#override
_AddOfferState createState() => _AddOfferState();
}
class _AddOfferState extends State<AddOffer> {
String offerName;
String offerType;
String start;
String end;
bool allBranches = false;
bool selectedBranches = false;
final db = Firestore.instance;
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: ListView(
children: <Widget>[
Container(
color: Color(0xFF707070),
height: 200.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
InkWell(
onTap: () {
setState(() {
Navigator.pop(context);
});
},
child: Padding(
padding: EdgeInsets.fromLTRB(20, 30, 20, 0),
child: Icon(Icons.arrow_back,
color: Colors.white, size: 25.0),
),
),
Center(
child: Padding(
padding: EdgeInsets.all(80.0),
child: Text(
"DEAL IMAGE",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
],
),
),
Form(
key: _formKey,
child: Padding(
padding: EdgeInsets.fromLTRB(30, 30, 30, 0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
"Name",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
],
),
TextFormField(
decoration: InputDecoration(hintText: 'Enter Offer Name'),
validator: (value) {
if (value.isEmpty) {
}
return 'Please Enter Offer Name';
},
onSaved: (value) => offerName = value,
),
SizedBox(height: 30.0),
Row(
children: <Widget>[
Text(
"Type",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
],
),
TextFormField(
decoration: InputDecoration(hintText: 'Enter Offer Type'),
validator: (value) {
if (value.isEmpty) {
}
return 'Please Enter Offer Type';
},
onSaved: (value) => offerType = value,
),
SizedBox(height: 60.0),
Row(
children: <Widget>[
Text(
"Start",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
],
),
TextFormField(
decoration:
InputDecoration(hintText: 'Enter Offer Start Date'),
validator: (value) {
if (value.isEmpty) {
}
return 'Please Enter Offer Start Date';
},
onSaved: (value) => offerName = value,
),
SizedBox(height: 30.0),
Row(
children: <Widget>[
Text(
"End",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
],
),
TextFormField(
decoration:
InputDecoration(hintText: 'Enter Offer End Date'),
validator: (value) {
if (value.isEmpty) {
}
return 'Please Enter Offer End Date';
},
onSaved: (value) => offerName = value,
),
SizedBox(height: 60.0),
Row(
children: <Widget>[
Column(
children: <Widget>[
Text(
"Valid Until",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
Text(
"01/01/20",
style: TextStyle(
color: Color(0xFF707070), fontSize: 17.0),
),
],
),
],
),
SizedBox(height: 30.0),
Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Time of Active",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
Text(
"12/12/19",
style: TextStyle(
color: Color(0xFF707070), fontSize: 17.0),
),
],
),
],
),
SizedBox(height: 60.0),
Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Max people (optional)",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
Text(
"5",
style: TextStyle(
color: Color(0xFF707070), fontSize: 17.0),
),
],
),
],
),
SizedBox(height: 20.0),
Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Max redemption per member (optional)",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
Text(
"5",
style: TextStyle(
color: Color(0xFF707070), fontSize: 17.0),
),
],
),
],
),
SizedBox(height: 20.0),
Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Number of redemption",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
Text(
"5",
style: TextStyle(
color: Color(0xFF707070), fontSize: 17.0),
),
],
),
],
),
SizedBox(height: 60.0),
Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Branches",
style: TextStyle(
color: Color(0xFF707070),
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
Row(
children: <Widget>[
Checkbox(
value: allBranches,
onChanged: (bool value) {
setState(() {
allBranches = value;
});
},
),
Text(
"All Branches",
style: TextStyle(
color: Color(0xFF707070), fontSize: 17.0),
),
],
),
Row(
children: <Widget>[
Checkbox(
value: selectedBranches,
onChanged: (bool value) {
setState(() {
selectedBranches = value;
});
},
),
Text(
"Selected Branches",
style: TextStyle(
color: Color(0xFF707070), fontSize: 17.0),
),
],
),
],
),
],
),
SizedBox(height: 30.0),
Container(
width: 250.0,
child: FlatButton(
color: Colors.blue,
child: Text("Confirm", style: TextStyle(color: Colors.white)),
onPressed: () {
},
),
),
SizedBox(height: 30.0),
],
),
),
)
],
),
),
);
}
}
WHAT I TRIED SO FAR
child: FlatButton(
color: Colors.blue,
child: Text("Confirm", style: TextStyle(color: Colors.white)),
onPressed: () {
setState(() async{
await db.collection("createdoffers").add(
{
'name': offerName,
'type': offerType,
'start': start,
'end': end,
}
);
}
);
}
)

What Went Wrong
child: FlatButton(
color: Colors.blue,
child: Text("Confirm", style: TextStyle(color: Colors.white)),
onPressed: () async {
await db.collection("createdoffers").add(
{
'name': offerName, // This is null, try to change the way you save data via setState
'type': offerType,
'start': start,
'end': end,
}
);
},
),
What you can do
If you are continuing with this implementation, please do try TextEditingController.
// Declaration
TextEditingController _offerNameTextController = TextEditingController();
// Usage
TextFormField(
controller: _offerNameTextController,
...
)
// Retrieving data from the input field
FlatButton(
onPressed: () {
// Utilize the value (eg. on your Firebase saving method
print(_offerNameTextController.text);
}
)
Further reading
https://api.flutter.dev/flutter/widgets/TextEditingController-class.html

You're passing the value of the textformfield during onsaved. But you forgot to save the form. Add this _formKey.currentState.save();
child: FlatButton(
color: Colors.blue,
child: Text("Confirm", style: TextStyle(color: Colors.white)),
onPressed: () async {
_formKey.currentState.save();
await db.collection("createdoffers").add(
{
'name': offerName,
'type': offerType,
'start': start,
'end': end,
}
);
},
),