Flutter Widget: Divider

The Divider widget in Flutter is a simple yet powerful tool for creating visual separations within your app's user interface. It allows you to add horizontal or vertical lines that help organize and structure the content on your screen. In this article, we'll take a closer look at the Divider widget and provide some examples of its usage.

Creating a Horizontal Divider

To create a horizontal line using the Divider widget, you can simply add it to your widget tree. Here's an example:

Copycopy code to clipboard
1import 'package:flutter/material.dart';
2
3class MyHomePage extends StatelessWidget {
4  @override
5  Widget build(BuildContext context) {
6    return Scaffold(
7      appBar: AppBar(
8        title: Text('Divider Example'),
9      ),
10      body: Column(
11        children: <Widget>[
12          Text('Above the Divider'),
13          Divider(),
14          Text('Below the Divider'),
15        ],
16      ),
17    );
18  }
19}

In this example, we have a Column widget containing two Text widgets separated by a Divider. When you run the app, you'll see a horizontal line dividing the two text elements.

Customizing the Divider

The Divider widget provides several properties that you can use to customize its appearance. For instance, you can adjust the color, thickness, and indent of the line. Here's an example:

Copycopy code to clipboard
1import 'package:flutter/material.dart';
2
3class MyHomePage extends StatelessWidget {
4  @override
5  Widget build(BuildContext context) {
6    return Scaffold(
7      appBar: AppBar(
8        title: Text('Customized Divider'),
9      ),
10      body: Column(
11        children: <Widget>[
12          Text('Above the Divider'),
13          Divider(
14            color: Colors.blue,
15            thickness: 2,
16            indent: 20,
17            endIndent: 20,
18          ),
19          Text('Below the Divider'),
20        ],
21      ),
22    );
23  }
24}

In this case, we have customized the Divider by setting the color property to blue, thickness to 2 pixels, and indent and endIndent to 20 pixels each. You can experiment with these properties to achieve the desired visual effect.

Creating a Vertical Divider

While the Divider widget is primarily used for horizontal lines, you can also create vertical lines by wrapping it in a RotatedBox widget. Here's an example:

Copycopy code to clipboard
1import 'package:flutter/material.dart';
2
3class MyHomePage extends StatelessWidget {
4  @override
5  Widget build(BuildContext context) {
6    return Scaffold(
7      appBar: AppBar(
8        title: Text('Vertical Divider'),
9      ),
10      body: Row(
11        children: <Widget>[
12          Text('Left of the Divider'),
13          RotatedBox(
14            quarterTurns: 1,
15            child: Divider(),
16          ),
17          Text('Right of the Divider'),
18        ],
19      ),
20    );
21  }
22}

In this example, we have a Row widget containing two Text widgets separated by a vertical Divider. The RotatedBox widget rotates the Divider by 90 degrees, resulting in a vertical line.

Conclusion

The Divider widget is a versatile tool in Flutter that helps create visual separations within your app's user interface. Whether you need horizontal or vertical lines, the Divider widget can be easily customized to suit your design requirements.