Divider

A visual separator component for dividing content into distinct sections.

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,
    );
  }

  RemixDividerStyle get style {
    return RemixDividerStyle()
        .height(1)
        .color(Colors.grey.shade400)
        .width(300);
  }
}

Fortal styles

Remix includes Fortal-themed style helpers 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: [
        RemixDivider(style: FortalDividerStyle.horizontal()),
        RemixDivider(style: FortalDividerStyle.vertical()),
      ],
    );
  }
}

Constructor

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

Properties

Widget Properties

style → RemixDividerStyle

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 config)

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, AlignmentGeometry alignment = Alignment.center)

Applies a matrix transformation to the component.