I am using Slidable and whenever it is used, the widget below is moved up.
Widget buildItemList(BuildContext context, DocumentSnapshot document) {
return new Container(
child: Card(
elevation: 10.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Slidable(
actionPane: SlidableDrawerActionPane(),
//actionExtentRatio: 0.25,
closeOnScroll: false,
secondaryActions: <Widget>[
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: (){},
)
],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
// Unnecessary code was removed
children: <Widget>[
Container(
padding: const EdgeInsets.only(right: 12.0),
child: Row(
children: <Widget>[
Text('0'),
Text('/'),
Text(document['value'].toString())
],)
)
]
),
),
),
);
}
It does not matter where i put Slidable, it always resizes the widget.
Someone able to help?
Thank you!
This will fix the issue
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(
height: double.maxFinite,
width: double.maxFinite,
padding: const EdgeInsets.only(right: 12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('0'),
Text('/'),
Text('value'.toString())
],
)),
)
],
),
If you don't need extra functionality you can remove the two rows and simply write something like
child: Container(
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 12.0),
child: Text('0/${document['value'].toString()}'),
),
Related
I want to show these two buttons click the middle button in the bottom navigation. Already I created the bottom dialog box but it's not working. on click of image button. please help me!
void _bottomSheet() {
Container(
height: 500,
width: double.infinity,
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
children: [
Flexible(
flex: 1,
child: Align(
alignment: Alignment.centerRight,
child: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.black,
child: const Icon(
MyBottomIcon.barcode,
),
),
),
),
SizedBox(
width: 20,
),
Flexible(
flex: 1,
child: Align(
alignment: Alignment.centerLeft,
child: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.black,
child: const Icon(
MyBottomIcon.barcode,
),
),
),
),
],
),
],
),
);
}
Please review my code and correct me when I call this method showing nothing on the screen.
My suggestion is by using floatingActionButton
floatingActionButton: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: const EdgeInsets.all(5),
width: 80.0,
height: 80.0,
child: FloatingActionButton(
onPressed: () => showAlertDialog(context), // Call the function from example below
elevation: 7.0,
child: const Icon(
Icons.add,
size: 50,
),
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
Create the showAlertDialog(context) function and suit the Widget as your needs.
showAlertDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return Center(
child: Container(
padding: const EdgeInsets.only(top: 380.0),
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: <Widget>[
Container(
width: double.infinity,
height: 800,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.transparent),
padding: const EdgeInsets.fromLTRB(20, 50, 20, 20),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 100,
padding: const EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ClipOval(
child: Container(
color: Colors.yellow,
height: 70.0,
width: 70.0,
child: const Center(
child: SizedBox(
height: 30,
width: 30,
child: Icon(Icons.phone),
),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ClipOval(
child: Container(
color: Colors.red,
height: 70.0,
width: 70.0,
child: const Center(
child: SizedBox(
height: 30,
width: 30,
child: Icon(Icons.computer),
),
),
),
),
],
),
),
],
),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: const EdgeInsets.all(5),
width: 80.0,
height: 80.0,
child: FloatingActionButton(
onPressed: () => {Navigator.pop(context)},
elevation: 7.0,
child: const Icon(
Icons.close,
size: 50,
),
),
),
],
),
],
),
),
);
},
);
}
Why does the 1st two work but not the 3rd?? what's the alternative to add vertical divider with height that stretch to the max height of the row?
These 2 works
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
child: Text('Kicukiro'),
),
Container(width: 1,color: Colors.black,height: double.infinity,),
Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text('Kicukiro'),
)
],
)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
child: Text('Kicukiro'),
),
),
// Container(width: 1,color: Colors.black,height: double.infinity,),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text('Kicukiro'),
),
)
],
)
this does not work
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
child: Text('Kicukiro'),
),
),
Container(width: 1,color: Colors.black,height: double.infinity,),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text('Kicukiro'),
),
)
],
)
Test this and it will work
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
child: const Text("Kicukiro", style: TextStyle(fontSize: 52),)),
),
Container(color:Colors.black, width: 1),
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: const Text("Kicukiro", style: TextStyle(fontSize: 52),)),
),
],
),
),
In the last screenshot please add the Container under an Expanded widget. Use children property under Row widget.
Here is an example code
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: Text(
'This is question',
style: TextStyle(
fontSize: 25.0,
color: Colors.white,
),
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
//textColor: Colors.white,
color: Colors.green,
child: Text(
'True',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
onPressed: () {},
),
)),
Expanded(
child: Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
//textColor: Colors.white,
color: Colors.red,
child: Text(
'False',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
onPressed: () {},
),
)),
]
The third is true, in fact, its existence in an SingleChildScrollView has created a problem
It is fixed by putting SizedBox in Row and giving it height
The reason for this problem is the size of the height of the container, which is determined by double.infinity and due to its presence in an SingleChildScrollView, it continues indefinitely and an error was created.
SingleChildScrollView(
child: SizedBox(
height: 250,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: Container(child: Text("Kicukiro"))),
Container(
width: 1,color: Colors.black,height: double.infinity,
),
Expanded(child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text("Kicukiro"))),
],
),
),
),
I'm trying to personalize what's inside a RaisedButton for my home automation project, in with I add different types of text and icons to the Button. but I'm getting an overflow by 1 pixel for some reason.
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
width: 90.0,
height: 90.0,
child: RaisedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.stay_primary_portrait),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('Lock'),
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('100%'),
),
],
),
],
),
),
),
),
The app:
The RaisedButton has some default padding. Fix it by removing the default padding.
This would work perfectly, check it out.
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
width: 90.0,
height: 90.0,
child: RaisedButton(
// remove the default padding the raised button has
padding: EdgeInsets.zero,
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.stay_primary_portrait),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('Lock'),
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('100%'),
),
],
),
],
),
),
),
),
The output looks like this
Screenshot
I didn't figure out why you get this result but you can use InkWell + Container instead of RaisedButton:
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
width: 90.0,
height: 90.0,
child: InkWell(
onTap: () {},
child: Container(
color: Colors.grey,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.stay_primary_portrait),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('Lock'),
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('100%'),
),
],
),
],
),
),
),
),
),
how can i move a container to right.
I have 3 icon and i need move last icon to right so 2 other icons was at left
I writing app for flutter
example a post from my app
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Icon(Icons.insert_emoticon),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node.edgeLikedBy.count.toString()),
],
),
),
Icon(Icons.comment),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node.edgeMediaToComment.count.toString()),
Container(
margin: EdgeInsets.only(left: 230),
child: Icon(Icons.thumb_up),
)
],
),
Simply use a - Spacer() widget to fill up space in between.
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Icon(Icons.insert_emoticon),
Text('10'),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
.node.edgeLikedBy.count
.toString()),
],
),
),
Icon(Icons.comment),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node
.edgeMediaToComment.count
.toString()),
Spacer(), // Add this
Container(
margin: EdgeInsets.only(left: 230),
child: Icon(Icons.thumb_up),
)
],
),
you can follow the answer above or add the IconComment and it is value on the same row and set the mainaxis alignement to MainAxisAlignment.spaceBetween
try the code below
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Icon(Icons.insert_emoticon),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
.node.edgeLikedBy.count
.toString()),
Icon(Icons.comment),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
.node.edgeMediaToComment.count
.toString()),
],
),
),
Container(
margin: EdgeInsets.only(left: 230),
child: Icon(Icons.thumb_up),
)
],
),
you can modify that margin right to make it fit perfectly
I added Dialog, But overflowed on bottow. How to fix like this issue?
return showDialog
return showDialog(
// barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return Dialog(
//this right here
child: Theme(
data: ThemeData().copyWith(
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(),
), ),
Container in child
child: Container(
color: Colors.blueGrey[100],
height: MediaQuery.of(context).size.height / 2.5,
width: MediaQuery.of(context).size.width / 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
first Row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Text(AppTranslations.of(context).text("minimum_length")),),
Text(": 6")
],),
others rows same like first row
Padding for gray color Allowed text
Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Row(
children: <Widget>[
Expanded(
child: Text(
AppTranslations.of(context).text("allowed_character"),
style: TextStyle(color: Colors.grey[700]),
), ),],),),),
OK button
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Expanded(child:
FlatButton(
child: Text(
AppTranslations.of(context).text("ok"),
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () => Navigator.of(context).pop(),
),),],)],),),),), );
For the horizontal overflow add a Expanded parent widget for your Text.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text(AppTranslations.of(context).text("minimum_length")),
),
Text(": 6")
],
),
And for the vertical overflow add SingleChildScrollView parent for your Column
Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView( child : Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[ ...
Wrap your Dialog child element, that is the Container Widget with SingleChildScrollView.
child: SingleChildScrollView(
child: Container(
color: Colors.blueGrey[100],
height: MediaQuery.of(context).size.height / 2.5,
width: MediaQuery.of(context).size.width / 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
....
....
],
),
),
),
),