How to remove space between widgets in Column in flutter?
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()),
],
),
);
}
}