Skip to main content

​
ChromiaDrawer

A customizable drawer component for side navigation.

​
Basic Usage

Scaffold(
  drawer: ChromiaDrawer(
    header: ChromiaDrawerHeader(
      title: 'John Doe',
      subtitle: '[email protected]',
    ),
    items: [
      ChromiaDrawerItem(
        icon: Icons.home,
        label: 'Home',
        selected: true,
        onTap: () {},
      ),
      ChromiaDrawerItem(
        icon: Icons.settings,
        label: 'Settings',
        onTap: () {},
      ),
    ],
  ),
)

​
Parameters

​
header
Widget?
Header widget (typically DrawerHeader or ChromiaDrawerHeader)
​
items
List<Widget>
default:"[]"
List of drawer items
​
footer
Widget?
Footer widget
​
backgroundColor
Color?
Background color of the drawer
​
width
double?
Width of the drawer

​
ChromiaDrawerItem

A single item in the drawer.

​
Basic Usage

ChromiaDrawerItem(
  icon: Icons.home,
  label: 'Home',
  selected: true,
  badge: '3',
  onTap: () {
    Navigator.pop(context);
  },
)

​
Parameters

​
label
String
required
Label text for the item
​
icon
IconData?
Leading icon
​
trailing
Widget?
Trailing widget
​
selected
bool
default:"false"
Whether this item is selected
​
onTap
VoidCallback?
Callback when tapped
​
badge
String?
Optional badge text (e.g., notification count)

​
ChromiaDrawerSection

A section header in the drawer.

​
Basic Usage

ChromiaDrawer(
  items: [
    ChromiaDrawerSection(title: 'Main'),
    ChromiaDrawerItem(icon: Icons.home, label: 'Home'),
    ChromiaDrawerSection(title: 'Settings'),
    ChromiaDrawerItem(icon: Icons.settings, label: 'Settings'),
  ],
)

​
Parameters

​
title
String
required
Section title text
​
padding
EdgeInsetsGeometry?
Custom padding for the section header

​
ChromiaDrawerDivider

A divider for the drawer.

​
Basic Usage

ChromiaDrawer(
  items: [
    ChromiaDrawerItem(icon: Icons.home, label: 'Home'),
    ChromiaDrawerDivider(),
    ChromiaDrawerItem(icon: Icons.settings, label: 'Settings'),
  ],
)

​
Parameters

​
margin
EdgeInsetsGeometry?
Margin around the divider

​
ChromiaDrawerHeader

A custom drawer header with user info.

​
Basic Usage

ChromiaDrawerHeader(
  title: 'John Doe',
  subtitle: '[email protected]',
  avatar: CircleAvatar(
    child: Text('JD'),
  ),
  backgroundImage: NetworkImage('https://example.com/bg.jpg'),
  onTap: () {
    // Navigate to profile
  },
)

​
Parameters

​
title
String?
Title text (e.g., user name)
​
subtitle
String?
Subtitle text (e.g., email)
​
avatar
Widget?
Avatar widget
​
backgroundImage
ImageProvider?
Background image
​
backgroundColor
Color?
Background color (used when no image is provided)
​
onTap
VoidCallback?
Callback when the header is tapped

​
ChromiaMiniDrawer

A mini drawer that shows only icons.

​
Basic Usage

Row(
  children: [
    ChromiaMiniDrawer(
      header: FlutterLogo(),
      items: [
        ChromiaMiniDrawerItem(
          icon: Icons.home,
          label: 'Home',
          selected: true,
          onTap: () {},
        ),
        ChromiaMiniDrawerItem(
          icon: Icons.explore,
          label: 'Explore',
          onTap: () {},
        ),
      ],
      footer: ChromiaMiniDrawerItem(
        icon: Icons.settings,
        label: 'Settings',
        onTap: () {},
      ),
    ),
    Expanded(child: MainContent()),
  ],
)

​
Parameters

​
header
Widget?
Header item (e.g., app logo)
​
items
List<ChromiaMiniDrawerItem>
default:"[]"
List of drawer items
​
footer
ChromiaMiniDrawerItem?
Footer item (e.g., settings)
​
selectedIndex
int
default:"0"
Currently selected index
​
onItemSelected
ValueChanged<int>?
Callback when item is selected
​
backgroundColor
Color?
Background color
​
width
double
default:"72"
Width of the mini drawer

​
ChromiaMiniDrawerItem

A single item in the mini drawer.

​
Parameters

​
icon
IconData
required
Icon to display
​
label
String?
Optional label (shown on hover as tooltip)
​
selected
bool
default:"false"
Whether this item is selected
​
onTap
VoidCallback?
Callback when tapped
​
badge
String?
Optional badge (e.g., notification count)

​
Example with Badge

ChroミaMiniDrawerItem(
  icon: Icons.notifications,
  label: 'Notifications',
  badge: '5',
  onTap: () {},
)

Build docs developers (and LLMs) love

Get started for freeTalk to us