Skip to main content

​
ChromiaAppBar

A customizable app bar component that follows the Chromia design system.

​
Basic Usage

ChromiaAppBar(
  title: 'My App',
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
)

​
Parameters

​
title
String?
Title text to display in the app bar
​
titleWidget
Widget?
Custom title widget (overrides title)
​
leading
Widget?
Leading widget (replaces back button)
​
actions
List<Widget>?
Action widgets displayed on the right side
​
bottom
PreferredSizeWidget?
Bottom widget (e.g., TabBar)
​
backgroundColor
Color?
Background color of the app bar
​
foregroundColor
Color?
Foreground color for text and icons
​
elevation
double
default:"0"
Elevation of the app bar
​
centerTitle
bool?
Whether to center the title
​
showBackButton
bool
default:"true"
Whether to show back button automatically when navigation is possible
​
onBackPressed
VoidCallback?
Callback when back button is pressed
​
height
double?
Custom height for the app bar

​
Example with Custom Styling

ChromiaAppBar(
  title: 'Custom App Bar',
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  elevation: 4,
  centerTitle: true,
  actions: [
    IconButton(
      icon: Icon(Icons.notifications),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {},
    ),
  ],
)

​
ChromiaSearchAppBar

A search app bar with integrated search field.

​
Basic Usage

ChromiaSearchAppBar(
  onSearch: (query) {
    print('Searching for: $query');
  },
  hintText: 'Search products...',
)

​
Parameters

​
onSearch
ValueChanged<String>
required
Called when search query changes
​
hintText
String
default:"'Search...'"
Hint text for search field
​
leading
Widget?
Leading widget (defaults to back button)
​
actions
List<Widget>?
Action widgets
​
backgroundColor
Color?
Background color
​
height
double?
Custom height
​
autofocus
bool
default:"false"
Whether to autofocus the search field
​
controller
TextEditingController?
Text editing controller for the search field

​
ChromiaTabBar

An app bar bottom widget that displays tabs.

​
Basic Usage

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: ChromiaAppBar(
      title: 'Tabs',
      bottom: ChromiaTabBar(
        tabs: [
          Tab(text: 'Home'),
          Tab(text: 'Explore'),
          Tab(text: 'Profile'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        HomeTab(),
        ExploreTab(),
        ProfileTab(),
      ],
    ),
  ),
)

​
Parameters

​
tabs
List<Widget>
required
List of tabs to display
​
controller
TabController?
Tab controller
​
isScrollable
bool
default:"false"
Whether tabs should be scrollable
​
indicatorColor
Color?
Color of the tab indicator
​
labelColor
Color?
Color of selected tab label
​
unselectedLabelColor
Color?
Color of unselected tab labels

​
ChromiaSliverAppBar

A collapsible app bar that expands and collapses on scroll.

​
Basic Usage

CustomScrollView(
  slivers: [
    ChromiaSliverAppBar(
      title: 'Collapsible Header',
      expandedHeight: 200,
      pinned: true,
      flexibleSpace: Image.network(
        'https://example.com/header.jpg',
        fit: BoxFit.cover,
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 20,
      ),
    ),
  ],
)

​
Parameters

​
title
String?
Title text
​
titleWidget
Widget?
Custom title widget
​
leading
Widget?
Leading widget
​
actions
List<Widget>?
Action widgets
​
flexibleSpace
Widget?
Flexible space widget (appears in the expanded area)
​
backgroundColor
Color?
Background color
​
foregroundColor
Color?
Foreground color
​
expandedHeight
double
default:"200"
Height when fully expanded
​
collapsedHeight
double?
Height when collapsed
​
pinned
bool
default:"true"
Whether the app bar should remain visible at the top
​
floating
bool
default:"false"
Whether the app bar should become visible as soon as the user scrolls
​
snap
bool
default:"false"
Whether the app bar should snap into view
​
stretch
bool
default:"false"
Whether the app bar should stretch beyond its normal size

Build docs developers (and LLMs) love

Get started for freeTalk to us