Related
I'm having a little challenge displaying selected file image in a bottomSheet form. The image simply doesn't display immediately until I tap any field in the form, then the image shows. I'm not sure what's causing this if it is because the form is outside scaffold or what? I want the image to display as soon as it is picked.
Below is what the form widget looks like.
//Form is outside scaffold
Widget bottomSheetSeller() {
return Form(
key: formKey,
onChanged: () => setState(() => value = value),
child: Container(
height: 400,
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0),
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 4.0,
width: 50.0,
decoration: BoxDecoration(
color: globalDefault,
borderRadius: BorderRadius.circular(50.0),
),
alignment: Alignment.center,
),
const SizedBox(height: 45.0),
Container(
child: Text(
'Seller Form',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: globalHeading,
),
textAlign: TextAlign.center,
),
alignment: Alignment.topLeft,
),
const SizedBox(height: 25.0),
FormWithValidation(
initialValue: value,
hint: 'First Name',
keyboardType: TextInputType.text,
validate: (value) {
if (value!.isEmpty) {
return "fill this field";
} else if (value.length <= 2) {
return "too short!";
} else {
return null;
}
},
onSaved: (value) => setState(() => firstName = value!)),
const SizedBox(height: 10.0),
FormWithValidation(
initialValue: value,
hint: 'Last Name',
keyboardType: TextInputType.text,
validate: (value) {
if (value!.isEmpty) {
return "fill this field";
} else if (value.length <= 2) {
return "too short!";
} else {
return null;
}
},
onSaved: (value) => setState(() => lastName = value!)),
const SizedBox(height: 15.0),
//File upload
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
yourLogo.isEmpty
? TextButton(
style: ButtonStyle(
padding: MaterialStateProperty.all(
const EdgeInsets.all(15)),
side: MaterialStateProperty.all(
BorderSide(
width: 1,
color: globalInfoColor,
style: BorderStyle.solid),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
),
),
onPressed: () async {
selectImage(ImageSource.gallery);
},
child: Unicon(
Unicons.uniPlus,
size: bigHeader,
color: globalInfoColor,
),
)
: setPicture(),
const SizedBox(width: 5.0),
const Text('Company logo'),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
'Allowed image format: jpg, jpeg, png',
style: TextStyle(
color: globalInfoColor,
fontStyle: FontStyle.italic,
),
),
),
const SizedBox(height: 30.0),
ButtonWidget(),
//some fields are not added to avoid too much code. If there is a need for more information I will gladly provide them.
the images below describe the situation:
Image 1: Image is already selected but appears not to be
Image 2: I tapped a field in the form and the image is now seen
Wrap your Form with StatefulBuilder and use its setState to update on bottom Sheet UI.
return StatefulBuilder(builder: (context, setState) {
return Form(child:
},)
I'm making a login form in Flutter, I'm using a ListView that has a Container as a child and it's child is a Stack widget which has Positioned children. Because of the Stack, I have to have a bound height, so hence the Container widget, which I gave the height: height: MediaQuery.of(context).size.height * 1.2. If I remove the * 1.2 my Button and and Text widget don't show up, and when I click on the login with * 1.2, my validator pops up, red warning signs shows that your info is entered incorrectly, so I can't see the button anymore. Example in pictures:
This is with height: MediaQuery.of(context).size.height * 1.2
Then I try to login, validator pops, and now I can't see the button nor the text and link below the button:
The problem I am facing is, how do I layout this login form that can only be scrollable as far as it needs, so I don't have empty space after the Button, just to spread the form so it is visible, not get something like this if I increment the height of the Container?
Code:
ListView(
shrinkWrap: true,
children: [
Container(
height: MediaQuery.of(context).size.height * 1.6,
child: Stack(
children: [
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.width * 0.1,
child: Image.asset(
'assests/images/loginform.png',
scale: 2.5,
height: 60,
width: 119,
),
),
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.width * 0.35,
child: Padding(
padding: const EdgeInsets.only(left: 24.0, right: 25.0),
child: Column(
children: <Widget>[
Form(
key: _registrationFormKey,
child: Column(
children: [
TextFormField(
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().name = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Full name'),
validator: (thisValue) {
if (thisValue.isEmpty) {
return 'Please enter your full name';
}
return null;
},
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.phone,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().phoneNumber = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Phone number'),
validator: _validateMobile,
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.streetAddress,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().address = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Address'),
validator: (thisValue) {
if (thisValue.isEmpty) {
return 'Please enter your address';
}
return null;
},
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.text,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().companyName = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Company name'),
validator: (thisValue) {
if (thisValue.isEmpty) {
return 'Please enter your company name';
}
return null;
},
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.text,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().website = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Website name'),
validator: _validateWebsite),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.emailAddress,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().email = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'E-mail address'),
validator: _validateEmail,
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.text,
obscureText: _obscureText,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().password = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Password',
suffixIcon: IconButton(
icon: const Icon(Icons.visibility_outlined),
onPressed: _togglePassVisibility,
),
),
validator: _validatePassword,
),
],
),
),
FormField<bool>(
// 1
initialValue: _agree,
builder: (FormFieldState<bool> state) {
// 2
return Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Checkbox(
// 3
value: state.value,
onChanged: (bool val) => setState(() {
// 4
_agree = val;
// 5
state.didChange(val);
}),
),
const Text('I agree with'),
TextButton(
onPressed: () {},
child: Text('Terms and conditions'),
),
],
),
// 6
state.errorText == null
? Text("")
: Text(state.errorText,
style: TextStyle(color: Colors.red)),
],
);
},
// 7
validator: (val) => _validateTerms(_agree),
),
AlarmButtons(
buttonColour: Color(0xFF29ABE2),
buttonText: 'CREATE ACCOUNT',
buttonTextColour: Colors.white,
buttonBorderSide: Colors.white,
onButtonPress: () async {
if (_registrationFormKey.currentState.validate()) {
signUpToCognito(context);
Navigator.pushNamed(
context, ConfirmRegistrationScreen.id);
}
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Already have an account?'),
TextButton(
onPressed: () {
Navigator.pushNamed(context, LoginScreen.id);
},
child: Text('Log in'),
),
],
),
],
),
),
),
],
),
)
],
)
Thanks in advance for the help and suggestions!
there are a couple mistakes (or at least optimizations) in your code. I will go over them one by one:
If you have a small number of children that need to be scrolled, it is better to use a SingleChildScrollView with a Column instead of a list view. ListView builds its children lazily - that is, it only builds widgets that are visible on the screen. If you have only a handful of widgets with no complex animations, then you don't really need that. SingleChildScrollView is more flexible that a ListView.
SingleChildScrollView(
child: Column(
children: [...]
)
)
It seems that you want the image to be on the background with the form validation on top of it. For that, you used a Stack and a Column as children to a ListView. Instead, have the Stack as a parent, with both the ListView and the image as children to the Stack. Now this might produce an error, as the ListView might expand infinitely. A simple solution is to wrap it within a Positioned widget with all its sides set to zero.
Stack(
children: [
BackgroundImageWidget(),
Positioned(
top: 0, bottom: 0, left: 0, right: 0, // or width: screenWidth, height: screenHeight,
child: ListView(...),
)
]
)
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
children: [
Positioned(
width: MediaQuery.of(context).size.width,
height: 25.0*SizeConfig.heightMultiplier,
child:Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xff009cba), Color(0xff000e11)])
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(flex:3,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FittedBox(child: Text("Firm Details",style: GoogleFonts.lato(color: Color(0xfffbfbfb),fontSize: 1.6*SizeConfig.textMultiplier),/*TextStyle(color: Color(0xfffbfbfb),)*/)),
SizedBox(height: 0.5*SizeConfig.heightMultiplier,),
FittedBox(child: Text("Please select the category that best describes your business model.",style: GoogleFonts.lato(color: Color(0xffb3fbfbfb),fontSize: 1.3*SizeConfig.textMultiplier) /*TextStyle(color: Color(0xffb3fbfbfb),fontSize: 12.0)*/,)),
],
),
),
),
Expanded(flex:1,child:Container(
width: 10.0*SizeConfig.widthMultiplier,
height: 10.0*SizeConfig.heightMultiplier,
child:Image.asset("assets/images/firmDetail.png",width:1.0*SizeConfig.widthMultiplier,height: 1.0*SizeConfig.heightMultiplier,),
), ),
],
),
), ),
Positioned(
top:20.0*SizeConfig.heightMultiplier,
child:Container(
width: MediaQuery.of(context).size.width,
height: 500.0*SizeConfig.heightMultiplier,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0*SizeConfig.widthMultiplier),
color: Colors.white,
),
child:new Container(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
SizedBox(height: 2.0*SizeConfig.heightMultiplier,),
Center(child: Padding(
padding: EdgeInsets.all(1.8*SizeConfig.heightMultiplier),
child: Text("Please select the category that best describes your business model.",style: GoogleFonts.lato(fontWeight: FontWeight.bold),),
)),
horizontalList1,
verticalList, // here vertical list
],
),
),
),
),
],
),
),
);
here in widget verticallist Listview is not scrolling,but when we add Sizedbox after form with fixedheight then it is scrolling but i dont need fixed height for scrollview
Widget verticalList = new Container(
margin: EdgeInsets.symmetric(vertical: 0*SizeConfig.heightMultiplier),
height: MediaQuery.of(context).size.height,
child:ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: [
Form(
key: _formKey,
child:ListView(
shrinkWrap: true,
children: [
Padding(
padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
child: new TextFormField(
validator: (String value) {
if (value.isEmpty) {
return 'PinCode';
} else {
return null;
}
},
keyboardType: TextInputType.phone,
controller: _pincode,
// selectionColor:Color(0xffe4065f),
style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
decoration: const InputDecoration(
labelText: "PinCode",
labelStyle: TextStyle(color: Color(0xffe4065f)),
focusColor: Color(0xffe4065f),
hintText:
"PinCode",
hintStyle: TextStyle(fontSize: 13.0),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xffe4065f))),
),
// style: Theme.of(context).textTheme.body1,
),
),
Padding(
padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
child: new TextFormField(
validator: (String value) {
if (value.isEmpty) {
return 'PAN of the unit. is required';
} else {
return null;
}
},
keyboardType: TextInputType.text,
controller: _pan,
// selectionColor:Color(0xffe4065f),
style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
decoration: const InputDecoration(
labelText: "PAN of the unit",
labelStyle: TextStyle(color: Color(0xffe4065f)),
focusColor: Color(0xffe4065f),
hintText:
"PAN of the unit",
hintStyle: TextStyle(fontSize: 13.0),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xffe4065f))),
),
// style: Theme.of(context).textTheme.body1,
),
),
Padding(
padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
child: FormField<String>(
builder: (FormFieldState<String> state) {
return InputDecorator(
decoration: InputDecoration(
labelText: "Constitution",
errorStyle: TextStyle(color: Colors.redAccent, fontSize: 1.6*SizeConfig.textMultiplier),
hintText: 'Please select expense',),
isEmpty: _constitutions == '',
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: _constitutions,
isDense: true,
onChanged: (String newValue) {
setState(() {
_constitutions = newValue;
state.didChange(newValue);
});
},
items: _constitution.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value,style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,)),
);
}).toList(),
),
),
);
},
),
),
Padding(
padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
child: new TextFormField(
validator: (String value) {
if (value.isEmpty) {
return 'Line of Activity is required';
} else {
return null;
}
},
keyboardType: TextInputType.text,
controller: _lineActicity,
// selectionColor:Color(0xffe4065f),
style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
decoration: const InputDecoration(
labelText: "Line of Activity",
labelStyle: TextStyle(color: Color(0xffe4065f)),
focusColor: Color(0xffe4065f),
hintText:
"Line of Activity",
hintStyle: TextStyle(fontSize: 13.0),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xffe4065f))),
),
// style: Theme.of(context).textTheme.body1,
),
),
Padding(
padding:EdgeInsets.only(
left: 1.0*SizeConfig.widthMultiplier,
right: 1.0*SizeConfig.widthMultiplier,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FlatButton(
onPressed: () {
//x _postData();
if (!_formKey.currentState.validate()) {
//_formKey.currentState.save();
if (_constitutions == null || _districtSelectedValue == null) {
print("eroore");
Flushbar(
message: "please select required fields",
duration: Duration(seconds: 3),
)..show(context);
} else {
// Every of the data in the form are valid at this point
_formKey.currentState.save();
print(_constitutions);
}
} else {
// submitOtp();
_postData();
}
},
child: Text(
"SAVE & NEXT",
style: GoogleFonts.lato(color: Colors.white),
),
color: Color(0xffe4065f),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
side: BorderSide(color: Color(0xffe4065f)),
),
),
],
),
),
],
),
),
// SizedBox(height: 1000,),
],
)
);
here ,when we add Sizedbox after form with fixedheight then it is scrolling but i dont need fixed height for scrollview im new to flutter please help
You can wrap your main widget with the SingleChildScrollView widget
I would suggest a simple widget hierarchy like
Scaffold
- Container (For the red background)
- Column
- Container (with size for the lorem ipsom text.
- Lorem Ipso Text.
- Expanded (So that it will use the rest of the height automatically.)
- Container (with white back ground and top rounded borders. Makes sure you add circular borders only to top and not to bottom of this container.
- DefaultTabController
- builder (to get different context of the default tab controller if more than one is used in your full app.)
- Column
- TabBar (if the number of categories is large use scrolling here as a property of the tab bar.) wrap in container if you need specific height of the tab bar.
- Expanded
- TabBarView to show the appropriate form.
- SingleChildScrollView
-Column
-Your fields
your list view is wrapper in a container that is very long and has no scroll on it. So it wont scroll as the list fits within that long container.
With list views you want a fixed height. It is the fixed height that is given for the visible parts of the list. Remove the wrapping container or reduce the height so all of it is visible on screen.
Also look at your use of the stack. You might have issues once you fix this with the list scrolling on top of the text "Firm Details" etc.
I have an image of an issue that is overflowing by 17 pixels.
& I'm unable to resolve it?
first of all, what I did..!!!
I took a Row()widget and wrapped with Container() & in that Row() took two Expanded() widget. one is for TextField() and another is for CountryPickerDropdown().
I have used country_pickers plugin
CODE:
new Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(left: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
border: Border.all(color: Colors.blue)
),
child: Row(
children: <Widget>[
Expanded(
child: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
isCountryCodeSelected=true;
print("${country.name}");
print("${country.phoneCode}");
print("${country.isoCode}");
print("+${country.phoneCode}(${country.isoCode})");
setState(() {
countryCode= country.phoneCode;
});
},
),
),
Expanded(
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Telephone Number",
),
onChanged: (value){
setState(() {
phoneValue=value;
});
print("phoneNumbe:$phoneNo");
this.phoneNo = isCountryCodeSelected ? "+" + countryCode + value : "+91" + value ;
print("phoneNo="+phoneNo);
},
),
)
],
)
),
Widget for Contry code and their national Flag image:
Widget _buildDropdownItem(Country country) => Container(
child: Row(
children: <Widget>[
CountryPickerUtils.getDefaultFlagImage(country),
SizedBox(
width: 8.0,
),
Text("+${country.phoneCode}(${country.isoCode})"),
],
),
);
Suspecting that your countryselector widget needs to have expanded childs and the text overflow.
Widget _buildDropdownItem(Country country) => Row(
children: <Widget>[
Expanded(child: Container(
margin: EdgeInsets.only(right: 8),
child: CountryPickerUtils.getDefaultFlagImage(country)),),
Expanded(child: Text(
"+${country.phoneCode}(${country.isoCode})",
overflow: Overflow.Eclipse
),)
],
);
Just remove the Expanded widget above the CountryPickerDropdown widget
If we set Expanded widget on both the child, Both will try to take the max width. So if we just set expanded widget on textfield only, textfield will take the remaining width of the screen. Below is the working code snippet with output of screenshot of small device.
Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(left: 10.0),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
border: Border.all(color: Colors.blue)),
child: Row(
children: <Widget>[
CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
print("${country.name}");
print("${country.phoneCode}");
print("${country.isoCode}");
print("+${country.phoneCode}(${country.isoCode})");
},
),
Expanded(
child: TextField(
keyboardType: TextInputType.phone,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: "Telephone Number 14655656556",
),
onChanged: (value) {},
),
)
],
)),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
The Wrap is replaced by Row and width of textfield reduced Hope this helps. Please let me know if something went wrong.
new Container(
padding: EdgeInsets.only(left:10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
border: Border.all(color: Colors.blue)
),
child: Row(
children: <Widget>[
Container(
child: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
isCountryCodeSelected=true;
print("${country.name}");
print("${country.phoneCode}");
print("${country.isoCode}");
print("+${country.phoneCode}(${country.isoCode})");
setState(() {
countryCode= country.phoneCode;
});
},
),
width: MediaQuery.of(context).size.width/2-30.0,
),
Container(
width: MediaQuery.of(context).size.width/2-30.0,
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Telephone Number",
),
onChanged: (value){
setState(() {
phoneValue=value;
});
print("phoneNumbe:$phoneNo");
this.phoneNo = isCountryCodeSelected ? "+" + countryCode + value : "+91" + value ;
print("phoneNo="+phoneNo);
},
),
),
],
)
)
The Wrap is replaced by Row and width of textfield reduced Hope this helps. Please let me know if something went wrong.
Try using this approach ....(In the text field you can add your phone no and in the orange and cyan color flex you can add your country picker)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
resizeToAvoidBottomPadding: false,
body: SafeArea(
child: Center(
child: Column(children: [
Expanded(
flex: 25,
child: Column(children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 2,
child: Column(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
),
),
Expanded(
flex: 1,
child: Row(
children: [
Expanded(
flex: 1,
child: Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.orange,
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.cyan,
),
),
],
)),
Expanded(
flex: 1,
child: TextField(
style: TextStyle(color: Colors.black),
),
),
],
)),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
),
),
],
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.pink,
),
)
])),
Expanded(
flex: 3,
child: Container(
color: Colors.blue,
),
)
])))));
}
}
Expanded(
flex:1
child: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
isCountryCodeSelected=true;
print("${country.name}");
print("${country.phoneCode}");
print("${country.isoCode}");
print("+${country.phoneCode}(${country.isoCode})");
setState(() {
countryCode= country.phoneCode;
});
},
),
),
Expanded(
flex:2
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Telephone Number",
),
onChanged: (value){
setState(() {
phoneValue=value;
});
print("phoneNumbe:$phoneNo");
this.phoneNo = isCountryCodeSelected ? "+" + countryCode + value : "+91" + value ;
print("phoneNo="+phoneNo);
},
),)
I have a Row that has 3 fields in it: 2 TextFields, 1 DropdownButtonHideUnderline wrapped in a Container. I'm trying to ensure that the first TextField takes up about 50-60% and the other two fields share the remaining space. I also want the fields to have the same height. So, something like this:
This is the code I have:
#override
Widget build(BuildContext context) {
return Container(
color: Theme.of(context).accentColor,
child: Padding(
padding: const EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
child: Row(children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.only(right: 5.0),
child: TypeAheadField(
textFieldConfiguration: TextFieldConfiguration(
autofocus: true,
controller: widget.ingredientController,
style: DefaultTextStyle.of(context)
.style
.copyWith(fontStyle: FontStyle.italic),
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.white.withOpacity(1),
hintText: 'Ingredient',
suffixIcon: GestureDetector(
onTap: widget.addFunction,
child: Icon(
Icons.add,
color: Colors.grey,
)))),
suggestionsCallback: (pattern) async {
return await _findIngredients(pattern);
},
//If not items are found, return an empty container.
noItemsFoundBuilder: (context) {
return Container(height: 0, width: 0);
},
itemBuilder: (context, suggestion) {
return ListTile(
title: Text(suggestion.name),
);
},
onSuggestionSelected: (Ingredient suggestion) {
widget.ingredientController.text = suggestion.name;
},
))),
Expanded(
child: TextField(
maxLines: 1,
controller: widget.quantityController,
keyboardType: TextInputType.text,
autofocus: false,
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.white.withOpacity(1),
hintText: 'Qty',
))),
Expanded(flex: 1, child: UnitDropdown()),
])));
}
What I'm left with is this:
I've tried setting the flex factor on the Expanded to different things, but that just results in an overflow on the right side. I've also not found a way to force all of the widgets to have the same height.
Try this one,
Row(children : <Widget>[
Expanded(
Container(child: TextField1())
),
Expanded(
Row(children : <Widget>[
Expanded(child: TextFiled2()),
Expanded(child: DropDown())
]);
)
]);
Or else, You can use MediaQuery to get the exact size of the screen.
Example:
Width : MediaQuery.of(context).size.width * 0.5;
Width : MediaQuery.of(context).size.width * 0.25;
Width : MediaQuery.of(context).size.width * 0.25;
Here you have, the key is to encapsulate the TextField, Dropdown, or whatever component you have in a Container, and define the actual size from the Container, tweaking the predefined internal Paddings of each widget (if you have the chance, sometimes is not available).
double itemsHeight = 30;
Widget getTextField({String hint = 'Ingredients', Widget suffix}) {
// use Container to define the size of the child,
// and reset the original inner paddings!
return Container(
height: itemsHeight,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.zero,
borderSide: BorderSide(color: Colors.white, width: 1)),
hintText: hint,
contentPadding: EdgeInsets.all(
0), // change each value, and set 0 remainding ones.
suffixIcon: suffix,
),
expands: false,
maxLines: 1,
controller: TextEditingController(),
),
);
}
return Scaffold(
body: Container(
color: Colors.green.withOpacity(.2),
margin: EdgeInsets.symmetric(vertical: 50, horizontal: 20),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
flex: 2,
child: getTextField(
hint: 'Ingredients',
suffix: Icon(
Icons.add,
size:
18, // option 1: reduce the size of the icon, and avoid the padding issues..
)),
),
Flexible(
flex: 1,
child: getTextField(
hint: 'Qty',
// option2: trick to match the expanded height of the icon on the previous field
// make an icon transparent :)
suffix: Icon(
Icons.account_box,
color: Colors.transparent,
)),
),
Flexible(
flex: 1,
child: Container(
// use this to match the Flex size..., is like using Expanded.
width: double.infinity,
// container defines the BoxConstrains of the children
decoration: BoxDecoration(
color: Colors.white24,
border: Border.all(color: Colors.white, width: 1),
),
height: itemsHeight,
child: DropdownButton(
hint: Text("Unit"),
onChanged: (i) {},
underline: Container(),
items: List.generate(5, (i) {
return DropdownMenuItem(child: Text("item $i"));
})),
),
),
],
),
),
);
screenshot of result: