Divider

A simple visual separator component for dividing content into distinct sections

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

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:

Fortal base style
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()),
      ],
    );
  }
}

See the FortalDividerStyle source code for all available options.

Constructor

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

Properties

Widget Properties

styleKey?

Optional.

styleSpecKey?

Optional.

keyKey?

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)

animate(AnimationConfig config)

constraints(BoxConstraintsMix value)

foregroundDecoration(DecorationMix value)

transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)