FlutterFlow Docs
Search…
Divider
The Divider widget is a horizontal line that is used to visually separate widgets.
You can use the Divider widget to create some space between a group of widgets or between the items in a ListView.
​

Adding a Divider to Your Project

Here's an example of how you can use a Divider widget in your project:
    First, drag the Column widget from the Layout Elements tab (in the Widget Panel).
    Add one Image widget (inside the Column) from the Base Elements tab. Set its Width property to inf (Click on the
    icon).
    Now, drag the Divider widget from the Layout Elements tab or add it directly from the widget tree.
    Add one more Image to the Column (Below the Divider) and set its width to inf.

Changing the Properties

You may want to customize the default Divider to match your design. The Properties Panel can be used to customize the appearance of your Divider widget.

Changing the Color

To change the color of the Divider:
    Select the Divider from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Divider Properties section.
    Find the Color property and click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Changing the Height and Thickness

To change the height and thickness of the Divider:
    Select the Divider from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Divider Properties section.
    Find the Height property and enter the value to change the height of an overall Divider.
    Now, find the Thickness property (next to the Height property) and enter the value. This will change the thickness of the Divider line.

Add Left and Right Padding

Sometimes you may want to add a little padding on Divider. Using the Indent and End-Indent property, you can add left and right padding on the Divider.
To add left and right padding:
    Select the Divider from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Divider Properties section.
    Find the Indent property and enter the value. This will add left padding to the Divider.
    Similarly, set the End-Indent property to add the right padding on Divider.
Last modified 1mo ago