Divider Widget in Flutter

Divider Widget in Flutter

Divider Widget is a simple Widget in Flutter that can help in separating two Containers Widget, Card Widget, etc. In this tutorial, we will see how easy this Divider Class is and how it can be used in the Flutter application.

Divider widget, in particular, creates a simple White space showing a partition between two Container widget. The Visual representation can help in making it appealing to understand that there are two different contents on the page. According to the Flutter Docs, “A one device pixel thick horizontal line, with padding on either side”

Following sections show how the Divider Class can be used in the Flutter application.

As always let’s create a simple template to use throughout the application.

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(DividerApp());

class DividerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample Divider Widget',
      home: DividerWidget(),
    );
  }
}

class DividerWidget extends StatefulWidget {
  DividerWidget({Key key}) : super(key: key);

  @override
  _DividerWidgetState createState() => _DividerWidgetState();
}

class _DividerWidgetState extends State<DividerWidget> {


  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold();
}
}

Divider Widget – Basics

To create a simple Divider Class, call the class Divider. There are 4 attributes of Divider class as given below.

color

Takes in a Color class. Sets the color for the Divider. By default, it is set to a White color. To set the color for the Divider Class, follow the below sample code.

Divider(
color: Colors.black87
)
height

This attribute lets you define how big the Divider should be. The Height attribute determines the amount of space between the two widgets that this divider Class separates. It takes in a double value, like given below in the sample code.

Divider(
height: 10.0
)
indent

This attribute lets you define the indent/space to be given on the left side of the Divider. It determines the space in terms of double value as given in the sample code.

Divider(
indent: 5.0
)
endIntent

This attribute lets you define the indent/space to the right of the Divider Class. It determines the space in terms of double value as given in the below code.

Divider( 
endIndent: 5.0 
)

Divider – Example Flutter Application

To create a simple divider with an example application. Check out the app below.

import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(DividerApp());
class DividerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample Divider Widget',
      home: DividerWidget(),
    );
  }
}
class DividerWidget extends StatefulWidget {
  DividerWidget({Key key}) : super(key: key);
  @override
  _DividerWidgetState createState() => _DividerWidgetState();
}
class _DividerWidgetState extends State<DividerWidget> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      appBar: AppBar(
        title: Text('Sample Divider'),
        backgroundColor: Colors.black87,
        leading: BackButton(color: Colors.white,),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
              Card(
                child: Container(
                  height: 200,
                  width: 900,
                  child: Center(child:Text("Sample 1", style: TextStyle(color: Colors.white),),),
                  decoration: BoxDecoration(
                    color: Colors.red
                  ),
                ),
              ),
              Divider(
                height: 10.0,
                indent: 5.0,
                color: Colors.black87,
              ),
              Card(
                child: Container(
                  height: 200,
                  width: 900,
                  child: Center(child:Text("Sample 2", style: TextStyle(color: Colors.white),),),
                  decoration: BoxDecoration(
                      color: Colors.blue
                  ),
                ),
              )
          ],
        ),
      )
    );
  }
}

This creates the app which looks like,

Divider Widget Example App

Conclusion

There is a difference between the Divider widget and the Spacer Widget in Flutter. It is always easy to understand that Divider widget can help in organizing a block of Content, while the spacer widget helps in spacing the content inside that block!

“Learn and Be Curious”

Leave a Comment

Your email address will not be published. Required fields are marked *