Dividers
Divider components provide visual separation between content sections. They support horizontal and vertical orientations, text labels, icons, and section headers.
ChromiaDivider
A customizable divider component for visual separation.
Basic Usage
Parameters
Height for horizontal divider or width for vertical divider.
Thickness of the divider line.
Space before the divider (left for horizontal, top for vertical).
Space after the divider (right for horizontal, bottom for vertical).
Color of the divider line. Defaults to theme divider color.
Constructors
ChromiaDivider() - Horizontal
Creates a horizontal divider.
ChromiaDivider.vertical()
Creates a vertical divider.
Width of the vertical divider.
ChromiaDivider.withText()
Creates a divider with text in the middle.
Text to display in the middle of the divider.
Thickness of the divider lines.
Color of the divider lines.
ChromiaDivider.withIcon()
Creates a divider with an icon in the middle.
Icon to display in the middle of the divider.
Thickness of the divider lines.
Color of the divider lines.
Examples
Basic Horizontal Divider
Thick Divider
ChroміaDivider(
thickness: 2,
)
Divider with Indents
ChroміaDivider(
indent: 16,
endIndent: 16,
)
Custom Color Divider
ChroміaDivider(
color: Colors.blue,
thickness: 2,
)
Vertical Divider
Row(
children: [
Text('Left'),
ChromiaDivider.vertical(height: 24),
Text('Right'),
],
)
Divider with Text
ChroміaDivider.withText(
text: 'OR',
)
Custom Text Divider
ChroміaDivider.withText(
text: 'Continue with',
textColor: Colors.grey,
color: Colors.grey.shade300,
)
Divider with Icon
ChroміaDivider.withIcon(
icon: Icons.star,
)
Custom Icon Divider
ChroміaDivider.withIcon(
icon: Icons.favorite,
iconColor: Colors.red,
color: Colors.red.shade200,
iconSize: 20,
)
ChromiaSectionDivider
A section divider with optional title and trailing widget for organizing content into sections.
Parameters
Trailing widget (e.g., action button).
Padding around the section. Defaults to theme spacing.
Examples
Section with Title
ChroміaSectionDivider(
title: 'Personal Information',
)
Section with Action
ChroміaSectionDivider(
title: 'Settings',
trailing: TextButton(
onPressed: () => editSettings(),
child: Text('Edit'),
),
)
Section Separator in List
Column(
children: [
// First section
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ChromiaSectionDivider(
title: 'Another Section',
),
// Second section
ListTile(title: Text('Item 3')),
ListTile(title: Text('Item 4')),
],
)
Expandable Section
ChroміaSectionDivider(
title: 'Advanced Options',
trailing: IconButton(
icon: Icon(
isExpanded ? Icons.expand_less : Icons.expand_more,
),
onPressed: () => setState(() => isExpanded = !isExpanded),
),
)
Custom Padding
ChroміaSectionDivider(
title: 'My Section',
padding: EdgeInsets.symmetric(vertical: 24, horizontal: 16),
)
Usage Patterns
Form Sections
Column(
children: [
ChromiaSectionDivider(title: 'Basic Information'),
TextField(decoration: InputDecoration(labelText: 'Name')),
TextField(decoration: InputDecoration(labelText: 'Email')),
ChromiaSectionDivider(title: 'Address'),
TextField(decoration: InputDecoration(labelText: 'Street')),
TextField(decoration: InputDecoration(labelText: 'City')),
],
)
Login Form
Column(
children: [
TextField(decoration: InputDecoration(labelText: 'Email')),
TextField(decoration: InputDecoration(labelText: 'Password')),
ElevatedButton(onPressed: () {}, child: Text('Login')),
ChromiaDivider.withText(text: 'OR'),
OutlinedButton(
onPressed: () {},
child: Text('Continue with Google'),
),
],
)
List with Sections
ListView(
children: [
ChromiaSectionDivider(
title: 'Today',
trailing: Text('3 items', style: TextStyle(color: Colors.grey)),
),
ListTile(title: Text('Task 1')),
ListTile(title: Text('Task 2')),
ListTile(title: Text('Task 3')),
ChromiaSectionDivider(
title: 'Tomorrow',
trailing: Text('2 items', style: TextStyle(color: Colors.grey)),
),
ListTile(title: Text('Task 4')),
ListTile(title: Text('Task 5')),
],
)
Settings Groups
Column(
children: [
ChromiaSectionDivider(title: 'Account'),
ListTile(title: Text('Profile'), trailing: Icon(Icons.chevron_right)),
ListTile(title: Text('Privacy'), trailing: Icon(Icons.chevron_right)),
ChromiaSectionDivider(title: 'Preferences'),
SwitchListTile(title: Text('Notifications'), value: true, onChanged: (_) {}),
SwitchListTile(title: Text('Dark Mode'), value: false, onChanged: (_) {}),
],
)
