I tried to create an addImage page but getting "constraintsError" every time.
I tried to solve this with "Flexible", "Expanded", "Container" etc. widgets. But I dont get the solution.
Here is the my current page.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Soru Ekleyin'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
children: [
TextFormField(
controller: _nameController,
decoration: InputDecoration(
labelText: '_nameController',
hintText: '_nameController',
filled: true,
fillColor: Color.fromARGB(255, 249, 249, 249),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(color: Colors.green),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
// style: BorderStyle.none,
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
style: BorderStyle.none, color: Colors.green),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
// style: BorderStyle.none,
color: Colors.green),
),
// border: OutlineInputBorder(
// borderRadius: BorderRadius.circular(20.0)
// ),
),
),
TextFormField(
controller: _categoryController,
decoration: InputDecoration(
labelText: '_categoryController',
hintText: '_categoryController',
filled: true,
fillColor: Color.fromARGB(255, 249, 249, 249),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(color: Colors.green),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
// style: BorderStyle.none,
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
style: BorderStyle.none, color: Colors.green),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
// style: BorderStyle.none,
color: Colors.green),
),
// border: OutlineInputBorder(
// borderRadius: BorderRadius.circular(20.0)
// ),
),
),
ElevatedButton(
onPressed: () {
question = Question(
_nameController.text.trim(),
false,
_categoryController.text.trim(),
);
_snackbarGoster(context, 'Soru eklendi.');
//Created the question variable.
// addQuestion(question!);
},
child: Text('Ekle')),
Spacer(),
image != null ? Image.file(image!) : FlutterLogo(),
ElevatedButton(
child: Text('Görsel Ekle'),
onPressed: () {
addImage();
_snackbarGoster(context, 'Görsel eklendi.');
}),
TextField(
decoration: InputDecoration(
labelText: 'Soru ve Açıklama',
hintText: 'Soru ve Açıklama'),
),
ElevatedButton(
onPressed: () async {
await uploadQuestion(question!);
},
child: Text('Yükle'))
],
),
),
),
);
}
Can someone help me with this. How can I solve this. The error is coming from "flex.dart".
I think you need to place your SingleChildScrollView inside sized widget.
Related
I need the login screen with the shared images text field look so I am stock if anyone have idea so kindly share with me. thanks:
You can use Container and InputDecoration:
Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
offset: Offset(1, -1),
),
],
),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
disabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 4, style: BorderStyle.solid),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 4, style: BorderStyle.solid),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 4, style: BorderStyle.solid),
),
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(width: 4, style: BorderStyle.solid),
),
),
),
)
Wrap your TextField with DecoratedBox.
DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border(
bottom: BorderSide(color: Colors.blue),
),
),
child: TextField(),
);
I am creating a class to edit some user fields:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: true,
appBar: AppBar(
backgroundColor: AppColors.rojoMovMap,
title: Text("miperfil".tr()),
),
body: SingleChildScrollView(
child:Column(
children: [
Row(
children: [
Text(
"tuemail".tr(),
style: TextStyle(
color: AppColors.grisMovMap,
fontWeight: FontWeight.bold,
fontSize: 18),
),
],
),
Row(
children: [
Text(
widget.usuario.email,
style: TextStyle(color: AppColors.grisMovMap, fontSize: 16),
)
],
),
SizedBox(
height: 10,
),
SizedBox(height: 5,),
TextField(
controller: controladorUsername,
keyboardType: TextInputType.text,
maxLength: 18,
autocorrect: false,
decoration: new InputDecoration(
icon: GestureDetector(
onTap: (){
//verificar que no existe ya el username
//asignar nuevo username
},
child: new Icon(Icons.edit,color: AppColors.rojoMovMap,)),
labelText: "tuusername".tr(),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
borderSide: const BorderSide(
color: Colors.grey,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.blue),
),
),
),
SizedBox(
height: 15,
),
TextField(
controller: controladorUbicacion,
keyboardType: TextInputType.text,
autocorrect: false,
decoration: new InputDecoration(
icon: GestureDetector(
onTap: (){
//asignar nueva ciudad,provincia
},
child: new Icon(Icons.edit,color: AppColors.rojoMovMap,)),
labelText: "tuubicacion".tr(),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
borderSide: const BorderSide(
color: Colors.grey,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.blue),
),
),
),
SizedBox(
height: 15,
),
TextField(
controller: controladorPais,
keyboardType: TextInputType.text,
autocorrect: false,
decoration: new InputDecoration(
icon: GestureDetector(
onTap: (){
//asignar nuevo pais
},
child: new Icon(Icons.edit,color: AppColors.rojoMovMap,)),
labelText: "tupais".tr(),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
borderSide: const BorderSide(
color: Colors.grey,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.blue),
),
),
),
SizedBox(
height: 15,
),
TextField(
controller: controladorNombre,
keyboardType: TextInputType.text,
autocorrect: false,
decoration: new InputDecoration(
icon: GestureDetector(
onTap: (){
//asignar nuevo nombre
},
child: new Icon(Icons.edit,color: AppColors.rojoMovMap,)),
labelText: "tunombre".tr(),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
borderSide: const BorderSide(
color: Colors.grey,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.blue),
),
),
),
SizedBox(
height: 15,
),
TextField(
controller: controladorApellidos,
keyboardType: TextInputType.text,
autocorrect: false,
decoration: new InputDecoration(
icon: GestureDetector(
onTap: (){
//asignar nuevo apellidos
},
child: new Icon(Icons.edit,color: AppColors.rojoMovMap,)),
labelText: "tusapellidos".tr(),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
borderSide: const BorderSide(
color: Colors.grey,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.blue),
),
),
),
SizedBox(
height: 15,
),
TextField(
controller: controladorApellidos,
keyboardType: TextInputType.text,
autocorrect: false,
decoration: new InputDecoration(
icon: GestureDetector(
onTap: (){
//asignar nuevo apellidos
},
child: new Icon(Icons.edit,color: AppColors.rojoMovMap,)),
labelText: "tusapellidos".tr(),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
borderSide: const BorderSide(
color: Colors.grey,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.blue),
),
),
),
SizedBox(
height: 15,
),
TextField(
controller: controladorApellidos,
keyboardType: TextInputType.text,
autocorrect: false,
decoration: new InputDecoration(
icon: GestureDetector(
onTap: (){
//asignar nuevo apellidos
},
child: new Icon(Icons.edit,color: AppColors.rojoMovMap,)),
labelText: "tusapellidos".tr(),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
borderSide: const BorderSide(
color: Colors.grey,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.blue),
),
),
),
],
),
),
);
}
The issue is that the keyboard is overlapping some textfields:
As you may see in the code,I have wrapped the column that contains the textfields with a SingleChildScrollView and I have included resizeToAvoidBottomPadding: true, inside the scaffold.
What am Im I missing?
test this example
return Scaffold(
body: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: MediaQuery.of(context).size.height,
),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
//your code here
],
),
),
),
),
);
Newb question.
For performance, there's much difference between the class below (widget to build TextField),
or a const that doesn't rebuild anything? I heard in Flutter as everything are widgets, when building for example func vs class, always build a class to replace whatever you are building on your code. I thought this could be the same.
class RoundedBox extends StatelessWidget {
const RoundedBox({
this.text,
this.onChanged,
});
final String text;
final Function onChanged;
#override
Widget build(BuildContext context) {
return TextField(
onChanged: onChanged,
decoration: InputDecoration(
hintText: text,
hintStyle: TextStyle(
color: Colors.grey,
),
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
),
);
}
}
Or just a simple const var?:
const kTextFieldDecoration = InputDecoration(
hintText: 'Enter a value',
hintStyle: TextStyle(
color: Colors.grey,
),
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
);
In this case you will get better performance if you reuse the InputDecoration defined as const.
But this is equivalent(notice the const before InputDecoration). It's a good practice to use const for Widgets that does not change.
#override
Widget build(BuildContext context) {
return TextField(
onChanged: onChanged,
decoration: const InputDecoration(
hintText: text,
hintStyle: TextStyle(
color: Colors.grey,
),
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
),
);
}
}
I need to add shadow on my textfield
My code
TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.blueAccent,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Image.asset('assets/searchIcon#2x.png'),
hintText: "Search services",
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0))))
Also i want to change the inside color of textfied in white
Want to achieve something like this
You can try something like this below or you can wrap your TextField with Container and use BoxDecoration --> BoxShadow to add drop down shadow to it:
Material(
elevation: 20.0,
shadowColor: Colors.blue,
child: TextField(
obscureText: true,
autofocus: false,
decoration: InputDecoration(
icon: new Icon(Icons.lock, color: Color(0xff224597)),
hintText: 'Password',
fillColor: Colors.white,
filled: true,
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
enabledBorder: OutlineInputBorder(borderRadius:BorderRadius.circular(5.0),
borderSide: BorderSide(color: Colors.white, width: 3.0))
),
),
)
You can wrap your TextField widget with Material. Material has property about the shadow. You can use it like this:
Material(
elevation: 3.0, // Set here what you wish!
shadowColor: Colors.grey,
child: TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.blueAccent,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Image.asset('assets/searchIcon#2x.png'),
hintText: "Search services",
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0))))
I could give you an idea. Try something like this,
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
boxShadow: [
BoxShadow(
offset: Offset(0,5),
blurRadius: 10.0,
color: Colors.black.withOpacity(0.5),
),
],
),
child: TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.blueAccent,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Image.asset('assets/searchIcon#2x.png'),
hintText: "Search services",
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
Play around with the color and offset value, you will get the desired output!
Hope that suits your case!
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(6),
boxShadow: const [
BoxShadow(
color: Colors.grey,
blurRadius: 10.0, // soften the shadow
spreadRadius: 1.0, //extend the shadow
offset: Offset(
1.0, // Move to right 5 horizontally
1.0, // Move to bottom 5 Vertically
),
)
]),
child: Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
color: Colors.transparent,
)),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
color: Colors.transparent,
)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
color: Colors.transparent,
)),
fillColor: Colors.white,
filled: true,
hintText: "Search by Jewelers Name",
border: InputBorder.none,
hintStyle:
const TextStyle(color: Colors.grey))),
),
],
),
),
Unable to change the default border color when TextFormField is not active. When TextFormField is not active this shows DarkGrey-Border color. So, how to change that.
Theme(
data: new ThemeData(
primaryColor: Colors.red,
primaryColorDark: Colors.black,
),
child: TextFormField(
decoration: new InputDecoration(
labelText: "Enter Email",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(),
),
//fillColor: Colors.green
),
validator: (val) {
if (val.length == 0) {
return "Email cannot be empty";
} else {
return null;
}
},
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
fontFamily: "Poppins",
),
),
),
Use enabledBorder of the InputDecoration, don't forget you can also use the focusedBorder, like this :
InputDecoration(
labelText: "Enter Email",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.red,
width: 2.0,
),
),
)
Here you have more info: https://api.flutter.dev/flutter/material/InputDecoration/enabledBorder.html
OutlineInputBorder(
borderSide: BorderSide(
color: AppColor.secondaryBackground)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color:
AppColor.secondaryBackground)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color:
AppColor.secondaryBackground),
),