ManAxisAlignment.spaceBetween (row) not working as it should? - flutter

I have the following code:
_buildWave() {
return Container(
height: 100.0,
width: double.infinity,
child: Container(
child: Stack(
children: [
WaveWidget(
config: CustomConfig(
colors: helpers.waveColors,
durations: [32000, 21000, 25000, 5000],
heightPercentages: [0.25, 0.26, 0.28, 0.31]),
backgroundColor: Colors.transparent,
size: Size(double.infinity, double.infinity),
waveAmplitude: 0,
),
Container(
child: Positioned(
bottom: 15,
child: Padding(
padding: EdgeInsets.fromLTRB(15, 0, 5, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(LineIcons.streetView, size: 20),
SizedBox(width: 5),
Text(
"Left",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [Text("Right")],
),
),
],
),
),
),
),
],
),
),
);
}
The intention is to place the LEFT and RIGHT text on yes, the left and right side. Now, I know this can be done using MainAxisAlignment.spaceBetween but for some reason it won't work. I'm getting no errors.
Image is what I'm getting right now:


Maybe that is because you have kept the Row Widget inside Stack Widget, try giving the full width to the Positioned Widget present inside the Stack Widget like below and also remove the Container Widget:
child: Stack(
children: [
WaveWidget(
config: CustomConfig(
colors: helpers.waveColors,
durations: [32000, 21000, 25000, 5000],
heightPercentages: [0.25, 0.26, 0.28, 0.31]),
backgroundColor: Colors.transparent,
size: Size(double.infinity, double.infinity),
waveAmplitude: 0,
),
Positioned(
// Here
left: 0.0,
right: 0.0,
//
bottom: 15,
child: Padding(
padding: EdgeInsets.fromLTRB(15, 0, 5, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(LineIcons.streetView, size: 20),
SizedBox(width: 5),
Text(
"Left",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [Text("Right")],
),
),
],
),
),
),
],

Related

Flutter expand row inside of a column

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: [],
)
],
),
),
),
],
),
),

How to add text at right to screen?

I want to add the report question text on the right side I tried the position widget but it doesn't work what I do?
I try to achieve-
code-
Positioned(
right: 0,
child: Row(
children: [
Icon(Icons.report, color: Color(0xff0E5487),),
TextButton(onPressed: () => {}, child: Text("Report Question",
style: cstmTextStyle(fs: 18, fc:Color(0xff0E5487) ),)),
],
),),

My advice is to use a Column with Spacer widget instead of a Stack.
I made an example of you:
Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.green,
width: 160,
height: 160,
),
const Spacer(),
Container(
color: Colors.green,
width: 160,
height: 160,
)
],
),
const SizedBox(height: 8,),
Row(
mainAxisSize: MainAxisSize.max,
children: const [
Spacer(),
Placeholder(fallbackWidth: 32, fallbackHeight: 32,),
SizedBox(width: 8,),
Text('Report Question')
],
)
],
),

Wrap Your Row With Alignment
Align(alignment: Alignment.topRight,
child: const Row(
),
),

Text inside container was overflow when minimize screen in flutter

I have a container with width MediaQuery.of(context).size.width / 1.75.When I minimize screen size text inside the container is overflowing.
This is the output I got now:
class ProfileTopPortion extends StatelessWidget {
const ProfileTopPortion({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB), width: 0.4),
color: Color(0xfffbfbfa),
),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
),
SizedBox(
width: 20,
),
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'First Name',
),
SizedBox(
height: 6,
),
Text(
'Engineer',
),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Email',
),
SizedBox(
height: 10,
),
Text(
'Organization',
),
],
),
SizedBox(
width: 30,
),
Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'testEmail1235#gmail.com',
),
SizedBox(
height: 10,
),
Text("Test12346#gma.com"),
],
)
],
),
SizedBox(
height: 25,
),
],
),
],
),
),
),
],
),
);
}
}
I tried flexible and expanded widgets but nothing works.

You need to use Expanded in two widget, try this:
Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB), width: 0.4),
color: Color(0xfffbfbfa),
),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
),
SizedBox(
width: 20,
),
Expanded(//<---- add this
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'First Name',
),
SizedBox(
height: 6,
),
Text(
'Engineer',
),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Email',
),
SizedBox(
height: 10,
),
Text(
'Organization',
),
],
),
SizedBox(
width: 30,
),
Expanded(//<---- add this
child: Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'testEmail1235#gmail.com',
overflow: TextOverflow.ellipsis,//<---- add this
),
SizedBox(
height: 10,
),
Text(
"Test12346#gma.com",
overflow: TextOverflow.ellipsis,//<---- add this
),
],
),
)
],
),
SizedBox(
height: 25,
),
],
),
),
],
),
),
),

wrap this column to expanded and also wrap the inner texts into flexible
Expanded( child: Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(child:Text(
'testEmail1235#gmail.com',
)),
SizedBox(
height: 10,
),
Flexible(child:Text("Test12346#gma.com")),
],
),)

Wrap your text with FittedBox
FittedBox(
child: Text(
"your text",
),
),

Instead of using height and width for container you can use the constraints property i.e
constraints:Boxconstrains(
maxWidth:double.infinity,
maxHeight:double.infinity,
),
It will resize the container height and width according to the text inside.
You can use padding for further decoration

how to fill the remaining space inside a row?

i have a row that includes a column widget.now as its second child i want to have a container to fill the remaining space.here is my code:
Row(
children: [
_status(),
Constants.smallHorizontalSpacer,
Padding(
padding: const EdgeInsets.only(
top: Constants.smallSize,
bottom: Constants.smallSize,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_roundedAvatar(),
_projectType(),
_name(),
],
),
),
_divider(),
Padding(
padding: const EdgeInsets.only(
top: Constants.smallSize,
bottom: Constants.smallSize,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [
_usageTypes(),
Constants.smallVerticalSpacer,
_details(),
],
),
Expanded(
child: Container(
height: 60,
color: Colors.black,
child: const Text('fill the remaining space'),
),
),
],
),
Constants.smallVerticalSpacer,
_description(),
],
),
),
// _map(context),
],
),
i have already tried expanded and flexble but all my widgets disappeared.any idea will be greate.
this is my result:
https://i.stack.imgur.com/gFTwX.png

You can wrap your Container with Expanded widget.
Row(
children: [
///.....widgets
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [Text("A")],
),
Expanded(
child: Container(
width: 60,
height: 60,
color: Colors.black,
child: const Text('fill the remaining space'),
),

Wrap the container with a flexible widget and give the container a width of the hoal screen:
Flexible(
child: Container(
width: ‌‌‌‌MediaQuery.of(context).size.width,
),
),
I know it does the same thing like a expanded widget but the expanded widget make's on a real device problems

Flutter: Layout Card

I'm working with Card , i have some problem with layout .
So, What i'm expected like this :
But when implement, not what i want , i'm already using
mainAxisAlignment: MainAxisAlignment.spaceBetween, But Not Work
Text Disini Judul always in center Container:
It's my Card Code
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Card(
elevation: 5,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Text('Disini Judul'),
),
Container(
child: Text('Disini Judul'),
),
],
),
),
Container(
child: Image.network(
'https://picsum.photos/250?image=9',
width: 150),
)
],
)
],
),
),
)
Can you help me with this layout ?
Thank's

Add child in to Container base on you needs
body: SingleChildScrollView(
child: Container(
color: Colors.black,
height: 200.0,
width: double.infinity,
child: Row(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.yellow,
height: 100.0,
width: double.infinity,
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500'),
),
),
Container(
color: Colors.green,
height: 50.0,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Your date'),
Text('Your Category')
],
),
)
],
),
),
Container(
color: Colors.red,
height: double.infinity,
width: 150.0,
child: Image.network("https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg",
fit: BoxFit.fill
),
),
],
),
),
),

you can easily achieve this using Stack widget, have a look at below code
Container(
height: 180,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Card(
elevation: 5,
child: Stack(
children: <Widget>[
Positioned(
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500'),
top: 0,
right: 150,
left: 10,
),
Positioned(
bottom: 0,
left: 10,
right: 150,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Date: 18-Sep-2019'),
Text('Category: Sport')
],
),
),
Positioned(
top: 0,
right: 0,
child: Container(
child: Image.network('https://picsum.photos/250?image=9',
width: 150),
),
)
],
),
),
)