I looked for the answer but I couldn't found.
Why Column widget gives space between child widgets?
I wanna remove this for my widget layout. Below is my code and space position.
Code!!
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Clock',
theme: ThemeData(
primaryColor: Colors.blue
),
home: Social(),
debugShowCheckedModeBanner: false,
);
}
}
class Social extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0
),
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Flexible(
flex: 1,
child: Row(
children: <Widget>[
ClipOval(
clipper: CircleClipper(),
child: Image.asset('assets/irene.jpg')
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
'Irene',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontSize: 15.0
)
)
),
Align(
alignment: Alignment.centerLeft,
child: Text('Yesterday, Ney York')
)
],
),
),
),
Align(
alignment: Alignment.topRight,
child: IconButton(
color: Theme.of(context).primaryColor,
icon: Icon(Icons.menu),
onPressed: (){},
),
)
],
),
),
Container(
width: MediaQuery.of(context).size.width/1.1,
height: MediaQuery.of(context).size.height/2,
child: Card(
child: Image.asset('assets/irene.jpg'),
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
elevation: 10.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 30.0,right: 30.0,top: 15.0),
child: Row(
children: <Widget>[
Image(
image: AssetImage('assets/like.png'),
width: 30.0,
height: 30.0,
),
SizedBox(width: 20.0,),
Image.asset('assets/chat.png'),
Expanded(child: Container()),
Image.asset('assets/share.png'),
],
),
),
Expanded(child: Container()),
],
),
);
}
}
class CircleClipper extends CustomClipper<Rect> {
@override
Rect getClip(Size size) {
return Rect.fromCircle(center: Offset(size.width/2,size.height/4), radius: size.width/3);
}
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) {
return true;
}
}
How can I fix it and what widgets I have to use?
To make a size of child widget of Column, I have to use Flexible,Expanded etc.
Is there an any other widgets which can satisfy this condition?
You can use Padding widget in between those two widget or wrap those widgets with Padding widget. SizedBox widget can be use in between two widget to add space between two widget and it makes code more readable than padding widget.
MediaQuery. removePadding, which uses this method to remove padding from the ambient MediaQuery. SafeArea, which both removes the padding from the MediaQuery and adds a Padding widget. removeViewInsets, the same thing but for viewInsets.
That's because you are using Flexible
and it expands the Widget
inside to fill the available space.
Change this :
body: Column(
children: <Widget>[
Flexible(
flex: 1,
To this:
body: Column(
children: <Widget>[
SizedBox(
height: 60.0,
And it should work
I see the problem isn't in the Column widget, it's in the first child of it, it takes longer height than you expect, I recommend to use Widget inspector for diagnosing layout issues in the future.
Here is the fix:
1- No need here for the widget, just remove it.
Flexible(
flex: 1, ...)
2- Set proper dimensions to your avatar image by wrapping it in a Container
like this:
Container(
width: 50,
height: 50,
child: ClipOval(clipper: CircleClipper(), child: Image.asset('assets/irene.jpg')),
)
Finally, here is the updated full code:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Clock',
theme: ThemeData(primaryColor: Colors.blue),
home: Social(),
debugShowCheckedModeBanner: false,
);
}
}
class Social extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(backgroundColor: Colors.white, elevation: 0.0),
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 50,
height: 50,
child: ClipOval(clipper: CircleClipper(), child: Image.asset('assets/irene.jpg')),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text('Irene',
style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 15.0))),
Align(alignment: Alignment.centerLeft, child: Text('Yesterday, Ney York'))
],
),
),
),
Align(
alignment: Alignment.topRight,
child: IconButton(
color: Theme.of(context).primaryColor,
icon: Icon(Icons.menu),
onPressed: () {},
),
)
],
),
Container(
width: MediaQuery.of(context).size.width / 1.1,
height: MediaQuery.of(context).size.height / 2,
child: Card(
child: Image.asset('assets/irene.jpg'),
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
elevation: 10.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 30.0, right: 30.0, top: 15.0),
child: Row(
children: <Widget>[
Icon(Icons.thumb_up, color: Colors.black),
SizedBox(
width: 20.0,
),
Icon(Icons.chat, color: Colors.black),
Expanded(child: Container()),
Icon(Icons.share, color: Colors.black),
],
),
),
Expanded(child: Container()),
],
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With