Here is what it looks like right now , first row is text, check, then tooltips, the other row has an Icon too for premium. I want the checkboxes & tooltip to be aligned perfectly vertically What is the best way to align these? I've played around with axisalignment but it doesn't work. Here is the general structure of my code.
Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"hey"),
Checkbox(),
const Tooltip(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.only(top: 8.0),
child: Icon(Icons.help)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.star,
color: Colors.yellow,
),
Text("hello "),
Checkbox(),
const Tooltip(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.only(top: 8.0),
child: Icon(Icons.help))
],
)])
You can use Expanded to fix them in a row and same position but there is a widget different between these rows. I gave a Text widget to fix them. You can try in your own with expanded.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Expanded(child: Text('')),
const Expanded(child: Text("hey")),
Expanded(child: Checkbox(onChanged: (bool? value) { }, value: false,)),
const Expanded(
child: Tooltip(
message: '',
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.only(top: 8.0),
child: Icon(Icons.help)),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Expanded(
child: Icon(
Icons.star,
color: Colors.yellow,
),
),
const Expanded(child: Text("hello ")),
Expanded(child: Checkbox(onChanged: (bool? value) { }, value: false,)),
const Expanded(
child: Tooltip(
message: '',
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.only(top: 8.0),
child: Icon(Icons.help)),
)
],
)
]),
Related
I have the following layout:
Row ->
Column
Padding ->
Column ->
Row ->// this one is only taking as much space as it needs
Text
Image
Text
Row
I need the row in the second column to take the whole width of the column it is wrapped in.
No matter how much I look for the answer wrapping different widgets into Flexible and Expanded doesn't help.
here is the code:
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
children: [
Column(
children: [
CircleAvatar(
radius: 25,
child: Image(
image: getCategoryImage(task.type),
),
)
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(task.title, style: Theme.of(context).textTheme.headlineMedium,),
const Image(
width: 20, image: AssetImage("assets/icons/task/tickbox.png"))
],
),
Text(generateBirdList(task.assignedBirds), style: Theme.of(context).textTheme.titleSmall,),
Row(
children: [
],
)
],
),
),
],
),
),
Container(
color: Colors.amber,
padding: const EdgeInsets.all(10.0),
child: Row(
children: [
Container(
color: Colors.blueAccent,
child: CircleAvatar(
radius: 25,
child: Image.network(
"https://st.depositphotos.com/1909187/2297/i/950/depositphotos_22971972-stock-photo-blank-white-male-head-front.jpg",
),
),
),
Expanded(
child: Container(
color: Colors.green,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"task.title",
style: Theme.of(context).textTheme.headlineMedium,
),
Image.network(
"https://st.depositphotos.com/1909187/2297/i/950/depositphotos_22971972-stock-photo-blank-white-male-head-front.jpg",
width: 20,
)
],
),
Text(
"Bla bla bla text",
style: Theme.of(context).textTheme.titleSmall,
),
Row(
children: [],
)
],
),
),
),
],
),
),
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 am trying to work out why Flutter is ignoring my overflow and wrap settings on my Text widget
Card(
borderOnForeground: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: BorderSide(
color: Colors.grey[200],
width: 1.0,
),
),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
CircleAvatar(
backgroundImage:
widget.user.profileImageUrl.isEmpty
? const AssetImage(
'assets/images/avatar-5.png')
: CachedNetworkImageProvider(
widget.user.profileImageUrl,
)),
const SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${widget.user.firstName} ${widget.user.lastName[0]}'),
Text(task.desc,
overflow: TextOverflow.fade,
maxLines: 2,
softWrap: false,
style: Theme.of(context)
.textTheme
.bodyText1),
]),
],
),
Row(children: [
const Icon(Icons.calendar_today_outlined, size: 12),
const SizedBox(width: 6),
Text(DateFormat('E, d MMM').format(task.due),
style: Theme.of(context).textTheme.caption)
]),
]),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_buildBudget(formatCurrency.format(widget.task.budget))
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(children: [
const Icon(Icons.location_on_outlined, size: 12),
const SizedBox(width: 6),
Text(task.location,
style: Theme.of(context).textTheme.caption)
]),
],
),
Here is a similar question, that might help you:
Flutter - Wrap text on overflow, like insert ellipsis or fade
To achieve the desired effect, you have to tell your text widgets how much space they should take. For example by wrapping your column (the parent of the overflowing text widgets) with a Flexible or Expanded.
I tried to minify your example a little bit to make it more obvious:
class CardWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(
children: [
// Your other widegts
// Row(children: [ ... ]),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Your circle avatar with a constant size
Container(width: 50, height: 50, color: Colors.red),
const SizedBox(width: 10),
// The important part
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Firstname Lastname'),
const Text(
'Really long description that does not fit on to the screen',
overflow: TextOverflow.fade,
maxLines: 2),
],
),
),
],
),
// Your other widegts
// Row(children: [ ... ]),
],
),
),
);
}
}
Note that you should remove the softWrap: false. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.
If the text exceeds 2 lines, the faded overflow effect will be visible. If you do not want that, just remove the maxLines attribute.
Full Example
Here is a full example with a structure, that will work within a ListView assuming location, date and budget widgets should be on the same line:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ListView(shrinkWrap: true, children: [
CardWidget(),
CardWidget(),
CardWidget(),
]),
);
}
}
class CardWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
borderOnForeground: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: BorderSide(
width: 1.0,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(
children: [
Row(
children: [
Container(height: 50, width: 50, color: Colors.red),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Firstname Lastname'),
Text(
"Long text that exceeds multiple lines. Long text that exceeds multiple lines. Long text that exceeds multiple lines",
overflow: TextOverflow.fade,
maxLines: 3,
style: Theme.of(context).textTheme.bodyText1),
],
),
),
],
),
const SizedBox(height: 25),
Row(
children: [
// Location and Date
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(Icons.location_on_outlined, size: 12),
const SizedBox(width: 6),
Text("Location"),
],
),
const SizedBox(width: 25),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(Icons.calendar_today_outlined, size: 12),
const SizedBox(width: 6),
Text("Date"),
],
),
// The budget widget
Expanded(child: Container()),
Text("200"),
],
),
],
),
),
);
}
}
Wrap your Column in a Expanded.. should be work
Expanded(child:Column(...))
and try to add Expanded (wrap Row) here too (last line in code):
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child:Row( ////HERE
The Row does not have a specified width. So one of the childs should have an Expanded
ok i have tested... here the full code:
Card(
borderOnForeground: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: BorderSide(
color: Colors.grey,
width: 1.0,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Row(
children: [
CircleAvatar(backgroundImage: const AssetImage('assets/images/avatar-5.png')),
const SizedBox(width: 10),
Expanded(
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text('${'widget.user.firstName'} '),
Text('task.desc',
overflow: TextOverflow.fade,
maxLines: 2,
softWrap: false,
style: Theme.of(context).textTheme.bodyText1),
]),
),
],
),
),
Row(children: [
const Icon(Icons.calendar_today_outlined, size: 12),
const SizedBox(width: 6),
Text('DateFormat( ).format(task.due)', style: Theme.of(context).textTheme.caption)
]),
]),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [Text('dff')],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(children: [
const Icon(Icons.location_on_outlined, size: 12),
const SizedBox(width: 6),
Text('task.location', style: Theme.of(context).textTheme.caption)
])
],
)
])));
Wrap child of Column with Flexible :
Column(
mainAxisSize : MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible (child :Text(
'${widget.user.firstName} ${widget.user.lastName[0]}')),
Flexible (
child :Text(task.desc,
overflow: TextOverflow.fade,
maxLines: 2,
softWrap: false,
style: Theme.of(context)
.textTheme
.bodyText1)),
]),
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()}'),
),
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