I want Radio button widget and text widget inline - flutter

I want the single selected radio button widget and text widget in the same row. It won't work even if I try to wrap it with the row. I want it like the image below.I want this, But I got this. Thanks in advance!
Column(
children: [
RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
Container(
decoration: BoxDecoration(
color: Color(0xffbebdbd),
border: Border.all(color: Color(0xffbebdbd)),
borderRadius: BorderRadius.circular(5)),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text("العربية",
style: TextStyle(
fontSize: 17,
color: Color(0xff000000),
fontWeight: FontWeight.bold)))),
],
),

You have to use Row widget and wrap each child in it with Expanded, because RadioListTile want to take the width of its parent, and Row wait its children to render, so it can know its own width.
By using Expanded the Row know that it must take all the possible with, and it's children can fit correctly in it.

try this update i hope it will fix the issue
Container(
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 2,
height: 50,
child: RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
),
Container(
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xffbebdbd),
border: Border.all(color: Color(0xffbebdbd)),
borderRadius: BorderRadius.circular(5),
),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text(
"العربية",
style: TextStyle(
fontSize: 17,
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),

Related

How to set text widget under sized box in a container flutter

In flutter how to set a text widget under a sized box in a container as below? I tried but didn't get what I wanted. Thanks in advance!
[1]: https://i.stack.imgur.com/fLRje.jpg,
[2]: https://i.stack.imgur.com/dfMa8.jpg
[What I want][1]
[What I get][2]
Row(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xffb2b2b2),
),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: SizedBox(
width: 70.0,
height: 70.0,
child: Card(
color: Color(0xffe31da8),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.notifications,
size: 40, color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
)),
Padding(
padding: const EdgeInsets.only(left: 30, top: 30),
child: Row(
children: [
const Text('Language',
style: TextStyle(
fontSize: 17,
letterSpacing: 0.5,
fontWeight: FontWeight.bold,
color: Color(0xff5f2dea),
decorationStyle: TextDecorationStyle.wavy)),
],
),
),
),
],
),
To add multiple widget vertically you have to use Column. Row is used to multiple widget in one line (Horizontally). 1. Remove unnecessary use of Row from your code. Use padding, margin or alignment parameters to give proper spacing or alignment. Here is updated code:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xffb2b2b2),
),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: SizedBox(
width: 120.0,
height: 120.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Card(
color: Color(0xffe31da8),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.notifications,
size: 40, color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
Padding(
padding: const EdgeInsets.only(top: 30),
child: const Text('Language',
style: TextStyle(
fontSize: 14,
letterSpacing: 0.5,
fontWeight: FontWeight.bold,
color: Color(0xff5f2dea),
decorationStyle: TextDecorationStyle.wavy)),
),
],
)),
),

How to Center Children of Row Widgets

I have a horizontal ListView with three Containers, I want to center the content/children of the Rows within the Containers. I have tried MainAxisAlignment.center but it does not seem to work for me.
This is the code, the mainAxisAlignment has been commented although I have tried using it to no avail.
Container(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
width: 134.0,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
color: Color(0xFFFF7700),
),
child: Row(
// mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
urlImage,
height: 45.0,
width: 45.0,
),
const SizedBox(width: 4.0),
Flexible(
child: Text(
title,
style: const TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
),
],
));
First, both children of the column should be wrapped inside Expanded. Then, check textAlign property of Text and set it to center
home: Scaffold(
body: Builder(builder: (context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
width: 134.0,
child: Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.green)),
child: Row(
// mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red)),
child: const Text('smth'),
)),
const SizedBox(width: 4.0),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red)),
child: const Text(
'title',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
textAlign: TextAlign.center,
),
),
),
],
),
));
}),
));
RESULT
I wrapped them with border colors so you can see the difference. When both are wrapped with Expanded, they take the same space and now you can center the text.

How to change textformfield spacing?

I am new to using flutter. I want to ask. How to change the spacing between textformfield? I have done the same as textformfield address, Postcode and District for textformfield firstname, last name, and relationship but still not successful. I have changed the container margin and padding and used spacing wrap for textformfield firstname, last name and relationship but still not successful. Where is my coding error? Please, someone, help me in solving this problem.
This is my code:
Container(
width: double.infinity,
//margin: EdgeInsets.symmetric(vertical: 50),
margin: EdgeInsets.symmetric(
horizontal: 10, vertical: 40),
padding: EdgeInsets.symmetric(horizontal: 210),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
borderRadius: BorderRadius.circular(5)),
/*decoration: BoxDecoration(
border: Border(
/* top: BorderSide(
color: Colors.blue,
width: 2.0,
),*/
bottom: BorderSide(
color: Colors.blue, width: 2.0))),*/
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Next of kin 1',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
Container(
//height: 51,
//width: 30,
width: double.infinity,
//margin: EdgeInsets.symmetric(horizontal: 10),
/*padding: EdgeInsets.symmetric(horizontal: 5),*/
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
borderRadius: BorderRadius.circular(5)),
child: Row(
children: [
Expanded(
child: Wrap(
direction: Axis.horizontal,
alignment: WrapAlignment.start,
//spacing: 20.0,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'First Name',
style: TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 300,
//height: 100,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller:
nextOfKinFirstName,
onSaved: (String? value) {
nextOfKinFirstName.text =
value!;
},
decoration:
const InputDecoration(
border:
OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
)
],
),
),
Expanded(
child: Wrap(
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Last Name',
style: TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 300,
//height: 100,
child: TextFormField(
style: const TextStyle(
color: Colors.black),
controller: nextOfKinLastName,
onSaved: (String? value) {
nextOfKinLastName.text =
value!;
},
decoration:
const InputDecoration(
border:
OutlineInputBorder(),
hintText: 'Last Name',
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16),
),
),
),
],
),
],
)),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
SizedBox(
height: 30,
child: Text(
'Relationship',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
Container(
height: 51,
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 1.0,
),
borderRadius:
BorderRadius.circular(5)),
child: SizedBox(
width: 300,
child: DropdownButton<String>(
underline: Container(
color:
Colors.transparent),
hint: _nextOfKinRelationship ==
null
? Text('Relationship')
: Text(
_nextOfKinRelationship),
isExpanded: true,
value:
_nextOfKinRelationship,
items: <String>[
'Father',
'Mother',
'Husband',
'Wife',
'Son',
'Daughter',
'Brother',
'Sister',
'Grandfather',
'Grandmother',
'Grandson',
'Grandaughter',
'Uncle',
'Aunt',
'Cousin',
'Nephew',
'Neice',
'Father in law',
'Mother in law',
'Son in law',
'Daughter in law',
'Brother in law',
'Sister in law',
'Friend'
].map((String value) {
return new DropdownMenuItem<
String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (value) {
setState(() {
_nextOfKinRelationship =
value!;
});
},
)),
),
],
),
)
],
))
],
),
),
you use Row to cover 3 TextField and wrap it with expanded, the space that available will be devide into 3.
but for the TextField you wrap it with certain width (SizedBox). and i think current screen is wider than all children inside Row
my suggestion is change it with Container which is fit available space.
Row(
children: [
// option 1
Expanded(
child: Column(
children: [
Text("label"),
TextField(), // without sizebox ,
],
),
),
//option 2
Expanded(
child: Column(
children: [
Text("label"),
Container(
width: double.infinity, // push to maximum space available
child: TextField(),
) // use container insted if you want to make decoration ,
],
),
),
],
);

Dynamically expand a component and compress another component in flutter

I have the following code
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
child: Container(
height: 32.0,
padding: EdgeInsets.symmetric(
horizontal: 12.0, vertical: 5.0),
decoration: BoxDecoration(
color: Colors.green.shade300,
borderRadius: BorderRadius.circular(7.0),
),
child: Row(
children: <Widget>[
Flexible(
child: Text(
'Save 20%',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.poppins(
fontSize: 12.0,
color: Colors.white,
fontWeight: FontWeight.w500,
letterSpacing: 0.5,
),
),
),
],
),
),
),
SizedBox(
width: 8.0,
),
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Material(
child: InkWell(
splashColor: Colors.green.withOpacity(0.5),
onTap: () {
print('Add to cart');
if (FirebaseAuth.instance.currentUser == null) {
Navigator.pushNamed(context, '/sign_in');
return;
}
cartBloc.add(
AddToCartEvent(product.id, currentUser.uid));
},
child: Container(
width: 38.0,
height: 35.0,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.01),
borderRadius: BorderRadius.circular(8.0),
border: Border.all(
width: 0.8,
color: Colors.black.withOpacity(0.15),
),
),
child: Icon(
FontAwesomeIcons.cartPlus,
color: Colors.black45,
size: 18.0,
),
),
),
),
),
],
),
),
which results in the following view
I want to have the following criteria
When I click the cart icon for the first time
1. add to cart button should expand if quantity > 0
2. "You save 20%" component should compress to square box "20%"
Something like this
I would highly appreciate any kind of feedback, comments, hints, solution pointers. Thx
I think in your case you can use an AnimatedContainer class.
pseudocode
var isClickedOnCart;
AnimatedContainer(
....
width: isClickedOnCart? 100 : 20;
...
/// YOUR CODE HERE///
)
/// ONPRESSED CART CARD
onPressed(){
if(quantity > 0){
setState(){
isClickedOnCart = !isClickedOnCart;
}
}
}
You can use this. Remember that, I have used only setState.
String text = 'Save 20%';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32.0,
padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 5.0),
decoration: BoxDecoration(
color: Colors.green.shade300,
borderRadius: BorderRadius.circular(7.0),
),
child: Center(
child: Text(
text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
color: Colors.white,
fontWeight: FontWeight.w500,
letterSpacing: 0.5,
),
),
),
),
SizedBox(
width: 8.0,
),
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Material(
child: InkWell(
splashColor: Colors.green.withOpacity(0.5),
onTap: () {
//here I use setState for sate management
//TODO: implement your logic to change the text
setState(() {
text = text == 'Save 20%' ? '20%' : 'Save 20%';
});
},
child: Container(
width: 38.0,
height: 35.0,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.01),
borderRadius: BorderRadius.circular(8.0),
border: Border.all(
width: 0.8,
color: Colors.black.withOpacity(0.15),
),
),
child: Icon(
Icons.shopping_cart,
color: Colors.black45,
size: 18.0,
),
),
),
),
),
],
),
));
}

Different behaviours using `SingleChildScrollView` Flutter

I'm trying to make the whole OrderScreen slide up when the keyboard appears as I do in UserProfileScreen by wrapping the scaffold's container in a SingleChildScrollView, but doing so on this screen it throws various RenderBox was not laid out: _RenderScrollSemantics#abc84 relayoutBoundary=up4 NEEDS-PAINT errors, which are not thrown without SingleChildScrollView. I set up the two screen just the same apart from UserProfileScreen having a Column as a child of another Column. All column's children are wrapped in and Expanded widget with different flex values for layout purposes. Can you se why I do get these errors?
UserProfileScreen ( working ) :
child: Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: Container(
color: Colors.black54,
padding:
EdgeInsets.only(left: 100, right: 100, top: 30, bottom: 70),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 100,
),
Stack(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey[200],
width: 2,
),
borderRadius: BorderRadius.circular(100),
),
child: CircleAvatar(
radius: 50,
backgroundImage:
NetworkImage('${widget.user.shopLogoUrl}'),
),
),
],
),
SizedBox(
height: 35,
width: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Text(
AppLocalizations.instance.text('Shop name'),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white, fontSize: fontSize),
),
),
// SizedBox(width: 50),
Expanded(
flex: 2,
child: TextField(
controller: _nameController,
style: TextStyle(
color: Colors.black87,
fontSize: fontSize,
fontWeight: FontWeight.w500),
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.all(5),
enabled: false,
hintText: AppLocalizations
.instance
.text(
'Shop name placeholder'),
//'nome',
hintStyle: TextStyle(
fontSize: fontSize,
color: Colors.grey[350]),
border: OutlineInputBorder(),
// focusColor: Colors.lightGreenAccent,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
width: 1,
),
),
fillColor: Colors.white,
filled: true),
cursorColor: Colors.black,
),
),
],
),
...
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// TODO cancel button
RaisedButton(
color: Colors.redAccent,
child: Text(
AppLocalizations.instance
.text('Cancel'),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: fontSize),
),
onPressed: () {
BlocProvider.of<UserBloc>(context)
.add(LoadUser());
},
),
SizedBox(width: 20),
// TODO save button
RaisedButton(
color: Colors.green.shade400,
child: Text(
AppLocalizations.instance.text('Save'),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: fontSize),
),
onPressed: () {
BlocProvider.of<UserBloc>(context)
.add(SaveUser(
user: FixitUser(
shopName: widget.user.shopName,
email: widget.user.email,
phoneNumber:
_phoneNumberController.text,
uid: widget.user.uid,
shopLogoUrl:
widget.user.shopLogoUrl,
address: _addressController.text,
zipCode: _zipCodeController.text,
city: widget.cityUser,
region: widget.regionUser,
country: widget.countryUser,
vatNumber: _vatController.text,
homeLat: widget
.userLocation.latitude
.toString(),
homeLong: widget
.userLocation.longitude
.toString(),
lastLogin: DateTime.now()
.millisecondsSinceEpoch,
signUpDate: signUpDate ??
DateTime.now()
.millisecondsSinceEpoch),
));
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return Dialog(
child: Container(
padding: EdgeInsets.all(50),
child: new Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
mainAxisSize:
MainAxisSize.min,
children: [
new CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation<
Color>(
Colors
.redAccent),
),
SizedBox(
height: 50,
),
new Text(
AppLocalizations
.instance
.text(
'Saving user profile'),
style: TextStyle(
fontSize: fontSize,
color:
Colors.black54),
),
],
),
),
);
});
}),
...
],
),
),
],
),
),
),
),
OrderScreen ( trowing error ) :
child: Scaffold(
resizeToAvoidBottomInset : true,
body: SingleChildScrollView(
child: Container(
color: Colors.black54,
padding:
const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 10,),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: Colors.redAccent, width: 2),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 9,
child: TextField(
controller: _customerNameController,
style: TextStyle(
color: Colors.black87,
fontSize: fontSize,
fontWeight: FontWeight.w500),
decoration: InputDecoration(
isDense: true,
enabled: true,
hintText: AppLocalizations.instance
.text('Customer name placeholder'), //'nome',
hintStyle: TextStyle(
fontSize: fontSize, color: Colors.grey[400]),
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
width: 1,
),
),
fillColor: Colors.white,
filled: true),
cursorColor: Colors.black,
onChanged: (value){
BlocProvider.of<OrderBloc>(context).add(LoadOrdersForCustomer(_customerNameController.text));
},
),
),
SizedBox(width: 20,),
Expanded(
flex: 2,
child: RaisedButton(
color: Colors.redAccent,
child: Text(
AppLocalizations.instance.text('Cancel'),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white, fontSize: fontSize),
),
onPressed: () {
setState(() {
_customerNameController.text = '';
});
BlocProvider.of<OrderBloc>(context).add(LoadOrders(user: widget.user));
},
),
)
],
),
),
),
...
],
),
),
),
),
Progress
Adding height and width to the container got rid of the error, but the view doesn't slide up as UserProfileScreen instead does..with or without resizeToAvoidBottomInset: true, set in Scaffold.. the keyboard just covers up the screen..
child: Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height-50,
width: MediaQuery.of(context).size.width,
color: Colors.black54,
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
child: Column(
So I have two different behaviours.
UserProfileScreen doesn't need Container's heigh and width and it slides up on keyboard appearing.
OrderScreen does need Container's height and width but doesn't slide up on keyboard appearing.