Vertical Divider Widget in Flutter | Horizontal and Vertical Dividers in Flutter | Flutter Tutorial
In this article we will discuss about vertical divider widget in Flutter.
🎥 Video Tutorial
🔭 Implementation
Whenever it comes to Dividers, We might be aware of the Divider Widget available in Flutter. But the Divider Widget will create the dividing line in a horizontal manner. If there is a case where we need to separate two individual widgets that are placed in a Row, then we need to go for using Vertical Divider widget. This Vertical Divider widget will help us create dividing line in the vertical manner, so we don’t need to look for custom widgets to perform the same.
Consider the above UI layout where these two Text widgets are place in a Row. Now let’s try to separate these two widgets using a divider. But the normal Divider widget will only help render the dividing line in horizontal manner, which is not suitable to this case. Therefore we can go for using Vertical Divider to create a dividing space in between these two widget to separate them.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
DescriptionTxt(
title: 'Distance',
subTitle: '1.6Km/Day',
txtColor: Colors.blue,
),
// - - - Vertical Divider - - -
VerticalDivider(),
// - - - - - - - - - - - -
DescriptionTxt(
title: 'Move',
subTitle: '62Kcal/Day',
txtColor: Colors.red,
),
],
),Now we have made use of vertical divider widget to create a thin line of divider in a vertical manner in between these two text widgets.
This VerticalDivider widget also has few parameters just like what we have for Divider widget.
color — <Color?>
The color to use when painting the line.
If this is null, then the [DividerThemeData.color] is used. If that is also null, then [ThemeData.dividerColor] is used.
thickness — <double?>
The thickness of the line drawn within the divider.
indent — <double?>
The amount of empty space on top of the divider.
endIndent — <double?>
The amount of empty space under the divider.
width — <double?>
The divider itself is always drawn as a vertical line that is centered within the width specified by this value.
Hence by specifying the above mentioned parameters the previous code snippet can now be updated as follows.,
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
DescriptionTxt(
title: 'Distance',
subTitle: '1.6Km/Day',
txtColor: Colors.blue,
),
// - - - Vertical Divider - - -
VerticalDivider(
color: Colors.grey,
thickness: 2,
indent: 300,
endIndent: 300,
),
// - - - - - - - - - - - -
DescriptionTxt(
title: 'Move',
subTitle: '62Kcal/Day',
txtColor: Colors.red,
),
],
),
Well that’s it. 🎉 Run the code to see it in action.🥳
Refer my video tutorial for complete guide:👉 https://www.youtube.com/watch?v=RqjVlSk2WGM
Get the complete source code here:👉 https://github.com/vijayinyoutube/vertical_divider_demo
Check out all my Flutter related blogs here.,👇
Other articles you may like.,
🔵Setting up your Flutter app for publishing in Play Store.
🔴Confetti Animation in Flutter
🟡 Change App Launcher Icon in Flutter
🔴 AnimatedContainer Widget in Flutter
Most popular
Flutter Tutorials
If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇
If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩
Thanks.,
