Vertical Divider is Not Showing in my Flutter Application
I have create a simple UI and added vertical divider, that divider not showing, i have tried so many ways, finally i have resolved this issue.
There is two ways to resolve the vertical divider not showing issue by
- Add Your Row widget inside IntrinsicHeight widget
- Add VerticalDivider inside SizedBox widget with required height
Example with IntrinsicHeight
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.menu,color: AppColors.technoBlack,),
SizedBox(width: 5.w,),
Expanded(child: TextField(
style: TextStyle(fontSize: 16.sp,color: AppColors.technoBlack,fontWeight: FontWeight.w300),
decoration: InputDecoration(
hintText: "Your Current Location",
focusedBorder: InputBorder.none,
),)),
SizedBox(width: 5.w,),
VerticalDivider(color: AppColors.technoBlack,thickness: 2),
SizedBox(width: 5.w,),
Icon(Icons.filter_tilt_shift,color: AppColors.technoBlack,),
],),
),
|
Example with VerticalDivider
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.menu,color: AppColors.technoBlack,),
SizedBox(width: 5.w,),
Expanded(child: TextField(
style: TextStyle(fontSize: 16.sp,color: AppColors.technoBlack,fontWeight: FontWeight.w300),
decoration: InputDecoration(
hintText: "Your Current Location",
focusedBorder: InputBorder.none,
),)),
SizedBox(width: 5.w,),
SizedBox(child: VerticalDivider(color: AppColors.technoBlack,thickness: 2,),height: 30,),
SizedBox(width: 5.w,),
Icon(Icons.filter_tilt_shift,color: AppColors.technoBlack,),
],),
|