A visual separator component for dividing content into distinct sections.

Interactive preview

When to use this

• Content separation: Divide sections of content visually
• List items: Separate items in lists or menus
• Form sections: Group form fields into logical sections
• Visual hierarchy: Create clear visual breaks in layouts

Basic implementation

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class DividerExample extends StatelessWidget {
  const DividerExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return RemixDivider(
      style: style,
    );
  }
 
  RemixDividerStyler get style {
    return RemixDividerStyler()
        .height(1)
        .color(Colors.grey.shade400)
        .width(300);
  }
}

Fortal widgets

Remix includes a generated Fortal-themed widget for this component:

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalDividerExample extends StatelessWidget {
  const FortalDividerExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        FortalDivider(size: FortalDividerSize.size1),
        FortalDivider(size: FortalDividerSize.size3),
      ],
    );
  }
}

Constructor

const RemixDivider({
  Key? key,
  RemixDividerStyler style = const RemixDividerStyler.create(),
  RemixDividerSpec? styleSpec,
})

Properties

Widget Properties

style → RemixDividerStyler

Optional. The style configuration for the divider. Customize color, thickness, and spacing.

styleSpec → RemixDividerSpec?

Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.

key → Key?

Optional. Controls how one widget replaces another widget in the tree.

Style Methods

color(Color value)

Sets divider color

thickness(double value)

Sets divider thickness (height for horizontal, width for vertical)

padding(EdgeInsetsGeometryMix value)

Sets container padding

margin(EdgeInsetsGeometryMix value)

Sets container margin

alignment(Alignment value)

Sets container alignment

decoration(DecorationMix value)

Sets container decoration

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

animate(AnimationConfig value)

Configures implicit animation for style transitions.

constraints(BoxConstraintsMix value)

Sets size constraints on the component.

foregroundDecoration(DecorationMix value)

Sets a foreground decoration painted on top of the component.

transform(Matrix4 value, {Alignment alignment = .center})

Applies a matrix transformation to the component.

call({Key? key})

Creates a RemixDivider widget with this style applied.