Divider

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

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

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

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

Fortal widget

import 'package:flutter/material.dart';
import 'ui/ui.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),
      ],
    );
  }
}

See the fortalDividerStyle source code for all available options.

Constructor

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

RemixDivider remixDividerConstructor({
  Key? key,
  DividerStyler style = const DividerStyler.create(),
  DividerSpec? styleSpec,
}) => throw UnimplementedError();