In this article, I'm going to share the code on how to add space between two widgets.
Here is how it looks before and after.
**Before:**![](https://fluttercentral.com/Uploads/f7e5bc9f-f35a-4c6b-8dec-e69ed1af3226.PNGwidth="50%height="auto](
**After:**
![](https://fluttercentral.com/Uploads/8d7019a7-7004-413e-968d-4d1dfeae0d0c.PNGwidth="50%height="auto](
This can be achieved through FractionalSizedBox, by specifying heightFactor.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #4ec9b0;](FractionallySizedBox(heightFactor: color: rgb(181, 206, 168);](0.1,)
But, you will see the **yellow-striped lines with both widgets places on extreme ends** when you don't wrap it inside a Flexible widget.
So, in order to achieve this, below is the code which is required.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #4ec9b0;](Flexible(child:color: rgb(78, 201, 176);](FractionallySizedBox(heightFactor: color: #b5cea8;](0.1,)),
Here is the final code from main.dart file.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';
color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();}
color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](double padValue = color: #b5cea8;](0; color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]("Space between widgets Example"), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](Column( children: [ color: #4ec9b0;](Flexible( child:color: #4ec9b0;](FractionallySizedBox( heightFactor: color: #b5cea8;](0.1, )), color: #4ec9b0;](RaisedButton( onPressed: () { color: #dcdcaa;](print(color: #ce9178;]('Button Clicked'); }, child: color: #4ec9b0;](Text(color: #ce9178;]('Click me'), ), color: #4ec9b0;](Flexible( child:color: #4ec9b0;](FractionallySizedBox( heightFactor: color: #b5cea8;](0.1, )), color: #4ec9b0;](RaisedButton( onPressed: () { color: #dcdcaa;](print(color: #ce9178;]('Button Clicked'); }, child: color: #4ec9b0;](Text(color: #ce9178;]('Click me'), )] ), )), ); }}
Thanks,Srikanth