I have an expanded widget for my ClipRRect, which I think I need, but I also need to spacebetween my row, but I can't manage it. If I wrap it in an expanded widget it changes the size of my image in ClipRRect, which I don't want to do. This is my code:
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(6),
child: GestureDetector(
onTap: function,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
flex: 1,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Stack(
children: <Widget>[
assetImage,
],
),
),
),
Row(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('$myText -', style: myTextStyle),
SizedBox(width: 5.0,),
Text('$locationText', style: myTextStyle),
],
),
Card(
elevation: 1,
color: Colors.white,
shape: cardBorder,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('$myText - $endmyText mins', style: myTextStyle,),
),
),
],
),
],
),
),
),
);
}
Assuming your question says you want to divide widgets with equal spaces, for it replaces Row with Wrap widget
Wrap(
direction: Axis.horizontal,
spacing: 30, // add space in between widget
children: <Widget>[
Wrap(
spacing: 30, // add space in between widget
direction: Axis.horizontal,
Related
How can I align my widget to take the same width as ClipRect image?
Right now it overflows in my screen. Find attached how it is and how I desire my output would be.
Is it possible to center it within the red lines I drew?
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Flexible(
child: Column(
children: <Widget>[
ColumnWithMainChild(
mainChildKey: mainChildKey,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
imgparam,
width: 350,
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Text(
'Good with children: $param_good_children',
),
GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
)
],
),
Divider(),
Text(
'Good with children: $param_good_children',
),
],
),
),
),
],
),
]));
}
}
Do the following Changes
Set Padding to Parent column
Set width of NetworkImage to double.infinity
Wrap your Progress Bar with Flexible
Code:
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Scaffold(
appBar: AppBar(),
body: Padding( // Set Padding to Paren
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
"https://images.unsplash.com/photo-1474922651267-219b23864ae8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
width: double.infinity, // Set width of NetworkImage to double.infinity
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
const Text(
'Good with children: 5',
),
Flexible( //Wrap your Progress Bar with Flexible
child: GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
),
)
],
),
const Divider(),
const Text(
'Good with children: 5',
),
],
),
),
),
]),
),
);
}
Output:
This is my code now I want to align my Text widget to the center of the screen but it is not taking any of the properties neither the cross axis alignment nor the main axis alignment, if i am wrapping Text widget with center then it is coming horizontally axis but still not vertically, i tried with container widget also
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Please add some notes"),
],
);
Here below is my full code
SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(
children: [
FutureBuilder<QuerySnapshot>(
future:ref.orderBy('Time',descending: true).get(),
builder: (context,snapshot){
if(snapshot.hasData&&snapshot.data?.docs.length!=0){
return ListView.builder(
physics: ClampingScrollPhysics(),
padding: EdgeInsets.fromLTRB(2, 2, 2, 2),
shrinkWrap: true,
itemCount: snapshot.data!.docs.length,
itemBuilder: (context,index){
Map data= snapshot.data!.docs[index].data() as Map;
DateTime mynote_time=data['Time'].toDate();
String formattedTime =
DateFormat.yMMMd().add_jm().format(mynote_time);
return Column(
children: [
Card(
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(3, 1, 3, 1),
child: Text(
"${data['title']}",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(3, 1, 3, 1),
child: Text(
"${data['description']}",
style: GoogleFonts.lato(
fontSize: 14,
),
),
),
Container(
alignment: Alignment.bottomRight,
child: Text(
formattedTime
),
)
],
),
borderOnForeground: true,
shadowColor: Colors.blueAccent,
color: Colors.grey[100],
elevation: 10,
),
],
);
}
);
}
else if(snapshot.data?.docs.length==0){
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(child: Text("Please add some notes")),
],
);
}
else return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SpinKitPumpingHeart(
color: Colors.red,
size: 150,
duration: Duration(seconds: 2),
),
Text("Please wait.....")
],
);
}),
],
),
),
floatingActionButton: Padding(
padding: const EdgeInsets.all(8.0),
child: FloatingActionButton(
backgroundColor: Colors.blueAccent[100],
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>Write_Note()));
},
child: Icon(
Icons.add,
size: 20,
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
);
In both the conditions none of them coming to the center, I am not getting why so happening
In order for vertical and horizontal levels to work, it must have height and width.
Container(
height: 600,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Please add some notes"),
],
),
);
I am trying to make a screen like this:
For this I'm using ListView with custom item.
Here is my code of item:
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10),
child: Card(
elevation: 5,
color: Colors.greenAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 65,
height: 65,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
"assets/images/temp.png",
alignment: Alignment.center,
)),
),
const SizedBox(width: 18),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Test title",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.red,
fontSize: 17,
fontWeight: FontWeight.w500),
),
Text(
"TestDescription",
style: TextStyle(
color: Colors.deepOrangeAccent,
fontSize: 15,
fontWeight: FontWeight.w700),
),
],
),
Spacer(),
CustomButton(
onPressed: () {},
)
],
),
),
],
),
],
),
),
));
}
I need align title and description to top, and custom bottom at the bottom. For this I'm using Spacer() inside Column and I wrapped my Column with Expanded widget. But when I wrap my widget with Expanded I get error like this:
RenderFlex children have non-zero flex but incoming height constraints
are unbounded.
When a column is in a parent that does not provide a finite height
constraint, for example if it is in a vertical scrollable, it will try
to shrink-wrap its children along the vertical axis. Setting a flex on
a child (e.g. using Expanded) indicates that the child is to expand to
fill the remaining space in the vertical direction. These two
directives are mutually exclusive. If a parent is to shrink-wrap its
child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using
FlexFit.loose fits for the flexible children (using Flexible rather
than Expanded). This will allow the flexible children to size
themselves to less than the infinite remaining space they would
otherwise be forced to take, and then will cause the RenderFlex to
shrink-wrap the children rather than expanding to fit the maximum
constraints provided by the parent.
When I remove Expanded() and Spacer() the error no. But I get wrong view. See at the picture:
Please, help me what I'm doing wrong(
You can use IntrinsicHeight as parent of Row to get the desire result with crossAxisAlignment: CrossAxisAlignment.stretch,, then for Rows's children can wrap with Flexible or Exapnded widget.
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10),
child: Card(
elevation: 5,
color: Colors.greenAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
// or exapnded
// fit: FlexFit.tight,
flex: 1,
child: Container(
height: 65,
width: 64,
color: Colors.amber,
child: Text("Image"),
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text("Item 1"),
Text("Item 2"),
],
),
Text("Item b x"),
],
),
),
Flexible(
flex: 1,
// fit: FlexFit.tight,
child: Container(
color: Colors.cyanAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text("lT"),
Text("lBsssssssssssss"),
],
),
),
),
],
),
),
),
),
);
}
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()}'),
),
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>[
....
....
],
),
),
),
),