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,
}
);
},
),
Related
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,
I am trying to build an app which retrieves all the table data and display it on the screen.I have made it using a list builder widget .I wanted to add a header to each of the rows retrieved .I tried adding a row widget which contains the header.But it is not getting displayed .
Here is what the out List looks like
I wanted add did dname and age Header by making a row ..but its not visible
Here is what my code looks like
// build list view & its tile
ListView _buildPosts(BuildContext context, List<Post> posts) {
print('Hi');
Row(//This row is not getting displayed
children: [
Container(
child: const Text('Did',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
child: const Text('Dname',style: TextStyle(
color: Colors.white,
),),
),
Container(
child: const Text('Age',style: TextStyle(
color: Colors.white,
),),
),
],
);
return ListView.builder(
itemCount: posts.length,
padding: const EdgeInsets.all(20),
itemBuilder: (context, index) {
return Card(
shadowColor: Colors.white,
color:const Color(0xFF303030),
elevation: 1,
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(posts[index].Did,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
Text(posts[index].Dname,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
Text(posts[index].Age,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/driver_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.";
}
}
}
The problem is that the row isn't used anywhere. So instead of using this so called _buildPosts you can simply return a listView.builder. Checkout the code below:
I have added 2 sets of solutions below:
ListView.builder(
itemCount: posts.length,
itemBuilder: (context, index) {
return Card(
shadowColor: Colors.white,
color: const Color(0xFF303030),
elevation: 1,
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Container(
child: const Text(
'Did',
style: TextStyle(
color: Colors.white,
),
),
),
Text(
posts[index].Did,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
Column(
children: [
Container(
child: const Text(
'Dname',
style: TextStyle(
color: Colors.white,
),
),
),
Text(
posts[index].Dname,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
Column(
children: [
Container(
child: const Text(
'Age',
style: TextStyle(
color: Colors.white,
),
),
),
Text(
posts[index].Age,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
],
),
),
);
},
),
This is the most simplest approach but as per your answer there is another complex approach:
ListView.builder(
itemCount: posts.length * 2,
itemBuilder: (context, index) {
if (index.isOdd) {
return Card(
shadowColor: Colors.white,
color: const Color(0xFF303030),
elevation: 1,
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
posts[index*2].Did,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
posts[index*2].Dname,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
posts[index*2].Age,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
);
} else {
return Row(
//This row is not getting displayed
children: [
Container(
child: const Text(
'Did',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
child: const Text(
'Dname',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
child: const Text(
'Age',
style: TextStyle(
color: Colors.white,
),
),
),
],
);
}
},
),
It can't be displayed because it isn't used anywhere! Your _buildPosts() only returns Listview.builder().
Wrap your List view.builder() inside a Column, then move your Row() inside that Column() above Listview.builder().
The best and optimal solution for your case is use DataTable .It makes table data visualization so simple and it is very easy to use
#override
Widget build(BuildContext context) {
return DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Did',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Dname',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('1')),
DataCell(Text('Raj')),
DataCell(Text('34')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Text('Professor')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
],
),
],
);
}
you can render a list into row like this
rows: _list.map((cita) => DataRow(
cells: [
DataCell(Text(_list.telefono ?? '',style: const
TextStyle(
fontSize: 18,color: Colors.black
))),
DataCell(Text(_list.nombre ?? '',style: const
TextStyle(
fontSize: 18,color: Colors.black
))),
DataCell(Text(_list.nombre ?? '',style: const
TextStyle(
fontSize: 18,color: Colors.black
))),
]
)
I know my answer is far away from your asking question but this is the best approach to handle data table in flutter
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();
}),
],
),
I want to develop the Following design in Flutter, I am using Flutter default colors, the I am facing is that when I use Container having color is black and then want to place some Widgets inside of that container having Lighter color than Black as you can in Following image are not visible how to resolve this?
Here is some Code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:marshal/Payment.dart';
import 'bottomnavigationbar.dart';
class Payment2 extends StatefulWidget {
#override
_Payment2State createState() => _Payment2State();
}
class _Payment2State extends State<Payment2> {
#override
Widget build(BuildContext context) {
final PaymentButton = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Route route = MaterialPageRoute(builder: (context) => Paymentdone());
Navigator.pushReplacement(context, route);
},
child: Text("Payment",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.w800)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(12),
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Card(
color: Colors.blueGrey,
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Card(
color: Colors.blueGrey,
child: emailField(),
),
//
// Row(
// crossAxisAlignment: CrossAxisAlignment.center,
// children: <Widget>[
// Card(
// child: Exp_Date(),
// ),
// Card(
// child: CVV(),
// )
// ],
// ),
TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
// Exp_Date(),
PaymentButton,
],
),
),
bottomNavigationBar: BottomNavigation(),
);
}
Widget emailField() {
return TextFormField(
//obscureText: true,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 0, 0, 10.0),
//labelText: "Card Number",
hintText: 'xxxx xxxx 1234',
),
);
}
Widget Exp_Date() {
return TextFormField(
obscureText: true,
style: style,
decoration: InputDecoration(
// contentPadding: EdgeInsets.fromLTRB(20.0, 0, 0, 10.0),
// labelText: "Exp Date",
hintText: "MM/YY",
),
);
}
Widget CVV() {
return TextFormField(
obscureText: true,
style: style,
decoration: InputDecoration(
// contentPadding: EdgeInsets.fromLTRB(20.0, 0, 0, 10.0),
//labelText: "CVV",
hintText: "CVV",
),
);
}
TextStyle style =
TextStyle(fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
}
Note
I don't have any issues with BottomNavigationBar
Use Color(0xFF1E1E1E) instead of Colors.blueGrey.
I have a problem with a simple thing but I don't how is it happening in the code.
Below is the code:
Widget build(BuildContext context) {
String newTaskTitle;
return Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30.0,
color: Colors.lightBlueAccent,
),
),
TextField(
autofocus: true,
textAlign: TextAlign.center,
onChanged: (newText) {
newTaskTitle = newText;
},
),
FlatButton(
child: Text(
'Add',
style: TextStyle(
color: Colors.white,
),
),
color: Colors.lightBlueAccent,
onPressed: () {
print(newTaskTitle);
},
),
],
),
),
);
}
I try to get the value of the text field input and pass it to another screen but when I type something then press the button, it gives me the null.
You can also achieve this using controllers. just initialize one and specify the controller in the TextField widget. To access the text, just do _controlller.text as you can see below:
final _controller = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30.0,
color: Colors.lightBlueAccent,
),
),
TextField(
controller: _controller,
autofocus: true,
textAlign: TextAlign.center,
),
FlatButton(
child: Text(
'Add',
style: TextStyle(
color: Colors.white,
),
),
color: Colors.lightBlueAccent,
onPressed: () {
print(_controller.text);
},
),
],
),
),
),
);
}
You have defined String newTaskTitle inside the build() method try removing it from inside the build method and try defining it inside the StatefulWidget.
This is happening because TextField on change method calls build() method every time the text is changed