K-Learn

Flutter Divider Widget

Posted on Thursday, 02 March 2023 06:47 PM

The Divider widget is used to create a horizontal line that separates content, similar to a physical divider. It's a simple way to add visual separation between UI elements in your app.

Here's an example of how to use the Divider widget:

@override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: const [
            Expanded(
              child: Card(
                child: SizedBox.expand(),
              ),
            ),
            Divider(),
            Expanded(
              child: Card(
                child: SizedBox.expand(),
              ),
            ),
          ],
        ),
      ),
    );
  }

Some common properties of the Divider widget:

color: The color of the divider. This can be set using a Color object.

height: The height of the divider. This can be set using a double value.

thickness: The thickness of the divider. This can be set using a double value.

indent: The amount of space to the left of the divider. This can be set using a double value.

endIndent: The amount of space to the right of the divider. This can be set using a double value.

Here's an example of Divider with it's properties:

Divider(
  height: 20,
  thickness: 2,
  color: Colors.blue,
  indent: 20,
  endIndent: 20,
)

In this example,

We've set the height of the divider to 20 logical pixels, the thickness to 2 logical pixels, the color to blue, the indent to 20 logical pixels, and the endIndent to 20 logical pixels. This creates a thicker, blue divider with more spacing on either side.