Skip to main content

​
Example

NeoTopbarLayout(
  topbarChildren: [
    Expanded(
      child: Row(
        children: [
          Text(
            "My App",
            style: theme.textStyles.header1.copyWith(
              color: theme.colors.fgPrimary,
            ),
          ),
        ],
      ),
    ),
    NeoTabBar(
      tabs: [
        NeoTab(id: "dashboard", label: "Dashboard"),
        NeoTab(id: "products", label: "Products"),
        NeoTab(id: "orders", label: "Orders"),
      ],
      activeTabId: activeTabId.value,
      onChange: (id) {
        // Handle tab change
      },
    ),
    Expanded(
      child: Row(
        mainAxisAlignment: .end,
        children: [
          NeoButton(
            variant: .outlined,
            label: "Profile",
            onPressed: () {
              // Handle profile button press
            },
          ),
        ],
      ),
    ),
  ],
  child: const AutoRouter(),
),

​
Properties

​
Required

​
topbarChildren
List<Widget>
required
The list of widgets to display in the topbar area. While you have full flexibility, this typically contains navigation elements, branding, or action buttons.
​
child
Widget
required
The main content widget that will be displayed below the topbar. Typically const AutoRouter() when using Neo’s recommended routing approach, but can be any widget that represents your main content area.

​
Best Practices

  • Recommended with AutoRouter: Use child: const AutoRouter() for nested routing when using Neo’s CLI templates and routing approach.
  • Safe area handling: Structure your pages with Container(color: theme.colors.bgPrimary) → NeoSafeArea → your content for proper full-screen behavior.

​
Integration Notes

  • Safe Area Handling: The layout automatically handles safe areas, ensuring content is not obstructed by system UI elements like notches or status bars.
  • Theme Integration: The topbar area respects Neo’s theming system and integrates seamlessly with the overall application design.
  • Layout Behavior: The topbar remains fixed at the top while the main content area fills the remaining space below it.