I am facing the problem
If two widgets added in a column, there is space between the widgets . I need to remove the space between them. how to acheive it.
Container(height: 50,
width: 50,
color: Colors.grey,
child: Column(mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(flex: 2,
child: Container(color: Colors.indigo,
child: SizedBox(child: Icon(
Icons.filter_list, color: Colors.white,),))),
Flexible( flex:1, child:
Text('5',style: TextStyle(color: Colors.black),)
),]));
The output should be
Actually i need this scenario also,
Any help is really appreciated
You can add a height of 0.6 to the text widget.
Container(
height: 50,
width: 50,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 2,
child: Text(
'5',
style: TextStyle(color: Colors.black),
),
),
Flexible(
flex: 1,
child: Text(
'5',
style: TextStyle(color: Colors.black, height: 0.6),
),
),
],
),
),
You can easily overlap two widgets using assorted_layout_widgets package with innerDistance argument:
return ColumnSuper(
innerDistance: -8,
children: <Widget>[
Text(
'5',
style: TextStyle(
color: Colors.black,
),
),
Icon(
Icons.filter_list,
color: Colors.blue,
),
]
);
Related
I'm apologise to do this question again but I was reading similar ones and try to solve my problen and Iwasn't able to fix it.
I need my column(blue one) inside row expands vertically to and have the max heigth.
Here is my code
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Card(
color: Colors.amber,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 40),
title: AutoSizeText('text',
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subtitle: AutoSizeText(
'subText',
maxLines: 1,
style: Theme.of(context).textTheme.subtitle1!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w500),
),
)),
Column(
children: [
Container(
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.blue,
),
child: FaIcon(
FontAwesomeIcons.locationDot,
),
),
],
),
],
),
),
],
),
Edited: Added expected output
remove following line from the column widget
mainAxisSize: MainAxisSize.min
Try below code and replace my widget code to your
Container(
height: 70,
color: Colors.amber,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 40),
title: Text('text',
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subtitle: Text(
'subText',
maxLines: 1,
style: Theme.of(context).textTheme.subtitle1!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w500),
),
),
),
Column(
children: [
Container(
height: 70,
width: 70,
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.blue,
),
child: Icon(
Icons.add,
),
),
],
),
],
),
),
Result->
How do I make the second text align with the first text. Excerpt of the code is below
Padding(
padding: EdgeInsets.only(top: 20, bottom: 20, left: 10),
child: Column(
children: [
Container(
child: Text(
document.data()['Product Title'],
style: TextStyle(
color: Colors.black
),
),
),
SizedBox(height: 10,),
Container(
child: Text(
document.data()['Product Price'],
style: TextStyle(
color: Colors.black,
),
),
),
Container(
decoration: BoxDecoration(
color: Palette.mainColor,
borderRadius: BorderRadius.circular(8)
),
),
],
),
),
This is how it is at the moment
set the column crossAxisAlignment: CrossAxisAlignment.start
Set CrossAxisAlignment property to Column Widget.
Your Column Widget Should be like this after applying this property.
Column(
crossAxisAlignment: CrossAxisAlignment.start
children: [
Container(
child: Text(
document.data()['Product Title'],
style: TextStyle(
color: Colors.black
),
),
),
SizedBox(height: 10,),
Container(
child: Text(
document.data()['Product Price'],
style: TextStyle(
color: Colors.black,
),
),
),
],
),
Add alignment property to your container.
alignment: Alignment.centerLeft,
Edit:
Ok, I got the problem. #M.M.Hasibuzzaman is right. You need to add crossAxisAlignment: CrossAxisAlignment.start. The correct solution with full code:
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Column(
children: [
Container(
width: 80,
height: 80,
alignment: Alignment.centerLeft,
child: Image.network(
'https://cdn.friendlystock.com/wp-content/uploads/2020/06/2-loud-speaker-cartoon-clipart.jpg',
)),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
"Loud Speaker",
// textAlign: TextAlign.start,
style: TextStyle(color: Colors.black),
),
],
),
SizedBox(
height: 10,
),
Row(
children: [
Text(
"GHS6758",
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.black,
),
),
],
),
Container(
decoration: BoxDecoration(
color: Colors.red, //Palette.mainColor,
borderRadius: BorderRadius.circular(8),
),
),
],
),
],
),
);
}
I'm trying to design my custom view and there's one thing that's not clear to me, when I try to pass my button with a white background, I get a black color and I don't understand why, everyone can explain it to me?
my code :
Expanded(
flex: 3,
child: Container(
color: this.backgroundColorBox,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Center(
child: SvgPicture.asset(
this.iconPath,
color: Colors.white,
height: 150,
width: 150,
),
),
flex: 2,
),
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(
this.textBox,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: Color.fromRGBO(0, 35, 63, 0.5)
),
),
),
ButtonTheme(
minWidth: 180,
height: 50,
child: RaisedButton(
color: this.backgroundColorButton,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
this.textButton,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: this.textColorButton
),
),
onPressed: null,
),
)
]
),
),
flex: 2,
),
]
),
)
);
What is the real problem?
whenever you leave the onPressed property as null the button will be in disabled state so you should provide a function to your button onPressed property to see it in it's active state.
You have to define the color inside ButtonTheme also with parameter "buttonColor" as Colors.white.
I am struggling to make this work but I tried everything and still, I can't make this work. So, I have the structure below:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 40.0,
backgroundImage: Image
.network(
'$thumbnail',
fit: BoxFit.cover,
)
.image,
),
SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Really biiiig drink name here',
style: TextStyle(
color: Colors.white,
fontSize: 28
),
),
Text(
'Category goes here',
style: TextStyle(
color: Colors.white.withOpacity(.8)
),
),
],
),
],
),
And it renders like this:
overflow
How can I clip, or wrap that title text without defining a fixed width to a parent widget?
Use Expanded widgets to resist overflow of view
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 40.0,
backgroundImage: Image.network('https://i.stack.imgur.com/LJ30b.png', fit: BoxFit.cover,).image,
),
SizedBox(
width: 20,
),
Expanded(child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Really biiiig drink name here',
style: TextStyle(
color: Colors.yellow,
fontSize: 28
),
),
Text(
'Category goes here',
style: TextStyle(
color: Colors.red.withOpacity(.8)
),
),
],
), ),
],
),
Add Expanded to your inner Column to give it a defined width.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 40.0,
backgroundImage: Image.network(
'$thumbnail',
fit: BoxFit.cover,
).image,
),
SizedBox(
width: 20,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Really biiiig drink name here',
style: TextStyle(
color: Colors.white,
fontSize: 28
),
),
Text(
'Category goes here',
style: TextStyle(
color: Colors.white.withOpacity(.8)
),
),
],
),
),
],
);
If you add an Expand to where the overflow is taking place it should solve the problem.
i am trying to add a horizontal divider to my current layout but for some reason the divider is not appearing.
below is my code i tried
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
flex: 1,
child: Column(children: <Widget>[
Text('Total Outstanding', textAlign: TextAlign.center,),
Padding(
padding: EdgeInsets.all(3.0),
child: Text('\$345.55',textAlign: TextAlign.center, style: TextStyle(color: Colors.green,)),
),
])),
VerticalDivider( width: 0.0, indent: 0.0, color: black),
Expanded(
flex: 1,
child: Column(children: [
Text('Total Received', textAlign: TextAlign.center,),
Padding(
padding: EdgeInsets.all(3.0),
child: Text('\$1806.50',textAlign: TextAlign.center, style: TextStyle(color: Colors.green)),
),
],
)
),Divider(color: Colors.black54),
],
);
i am expecting Divider(color: Colors.black54), in my code will draw the divider. see the picture below. the red line i drew should be where the divider should appear. can someone help me modify my code so that the horizontal divider can appear where the red line is? also there should be some padding on the start of the screen and the end of the screen. thanks in advance
Column(
children: <Widget>[
SizedBox(
height: 56,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Total Outstanding',
textAlign: TextAlign.center,
),
Padding(
padding: EdgeInsets.all(3.0),
child: Text('\$345.55',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.green,
)),
),
],
),
),
VerticalDivider(width: 1.0, color: Colors.black),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Total Received',
textAlign: TextAlign.center,
),
Padding(
padding: EdgeInsets.all(3.0),
child: Text('\$1806.50', textAlign: TextAlign.center, style: TextStyle(color: Colors.green)),
),
],
),
),
],
),
),
SizedBox(height: 12),
Container(height: 2, color: Colors.black54),
],
),