Separator

In ProgressDark modeRTL

A visual divider between content sections.

7:21

Section One

Section Two

Blog

Docs

Source

OR CONTINUE WITH

Installation

Copy the component into your project using the CLI:

$ronakcn add separator

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

import 'package:flutter/material.dart';
import '../components/separator/separator.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnSeparator Example')),
      body: Center(
        child: RcnSeparator(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Separator ships with the following variants:

horizontal

A horizontal dividing line.

7:21

Section One

Section Two

Blog

Docs

Source

OR CONTINUE WITH

vertical

A vertical dividing line.

7:21

Section One

Section Two

Blog

Docs

Source

OR CONTINUE WITH

Props

Prop	Type	Default	Description
`orientation`	`Axis`	`Axis.horizontal`	Orientation of the separator.
`color`	`Color?`	`null`	Color of the separator line.
`thickness`	`double`	`1.0`	Thickness in pixels.

Source files

lib/components/ui/separator.dart

import 'package:flutter/material.dart';

class RcnSeparator extends StatelessWidget {
  const RcnSeparator({super.key, this.orientation = Axis.horizontal, this.color, this.thickness = 1.0});
  final Axis orientation;
  final Color? color;
  final double thickness;

  @override
  Widget build(BuildContext context) {
    final c = color ?? Theme.of(context).colorScheme.outline.withOpacity(0.2);
    return orientation == Axis.horizontal
        ? Divider(height: thickness, thickness: thickness, color: c)
        : VerticalDivider(width: thickness, thickness: thickness, color: c);
  }
}

Version 0.1.0 · display category