Skip to main content

Documentation Index

Fetch the complete documentation index at: https://synapsync.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
NbxScaffold

A custom scaffold widget that provides a consistent layout structure with enhanced functionality for Nebux applications.

​
Basic Usage

import 'package:nebux_design_system/nebux_design_system.dart';

NbxScaffold(
  widgetName: 'HomeScreen',
  body: Column(
    children: [
      Text('Hello World'),
    ],
  ),
)

​
Core Properties

​
body
Widget
required
The main content widget to be displayed in the scaffold body
​
widgetName
String
required
Name of the widget for debugging purposes
​
appBar
PreferredSizeWidget?
Custom app bar widget (overrides built-in app bar)
​
appBarConfig
AppBarConfig?
Configuration for the built-in app bar
​
safeAreaConfig
SafeAreaConfig?
Configuration for safe area properties
​
bodyConfig
BodyConfig?
Configuration for body properties
​
bottomNavigationBar
Widget?
Bottom navigation bar widget
​
floatingActionButton
Widget?
Floating action button widget
​
backgroundColor
Color?
Background color for the scaffold
​
decoration
Decoration?
Gradient or custom decoration for the scaffold background

​
AppBarConfig

Configuration for the built-in app bar:
​
title
String?
Title text to display in the app bar
​
actions
List<Widget>?
Action widgets to display in the app bar
​
leadingButton
Widget?
Custom leading button widget for the app bar
​
centerTitle
bool
default:"false"
Whether to center the title in the app bar
​
showDivider
bool
default:"false"
Whether to show a divider below the app bar
​
dividerThickness
double
default:"0.2"
Thickness of the divider below the app bar
​
backgroundColor
Color?
Background color for the app bar

​
Example with App Bar

NbxScaffold(
  widgetName: 'ProfileScreen',
  appBarConfig: AppBarConfig(
    title: 'Profile',
    centerTitle: true,
    showDivider: true,
    actions: [
      IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {},
      ),
    ],
  ),
  body: ProfileContent(),
)

​
SafeAreaConfig

Configuration for safe area behavior:
​
top
bool
default:"true"
Whether to apply safe area to the top of the screen
​
bottom
bool
default:"true"
Whether to apply safe area to the bottom of the screen
​
minimum
EdgeInsets?
default:"EdgeInsets.only(bottom: 20)"
Minimum padding for the safe area

​
Example with Custom Safe Area

NbxScaffold(
  widgetName: 'FullScreenView',
  safeAreaConfig: SafeAreaConfig(
    top: false,
    bottom: true,
    minimum: EdgeInsets.only(bottom: 32),
  ),
  body: FullScreenContent(),
)

​
BodyConfig

Configuration for body layout and behavior:
​
wrapInContainer
bool
default:"true"
Whether to wrap the body in a container with default horizontal padding
​
decoration
Decoration?
Decoration to apply to the body container when wrapInContainer is true
​
resizeToAvoidBottomInset
bool
default:"false"
Whether the body should resize to avoid the keyboard
​
extendBodyBehindAppBar
bool
default:"true"
Whether the body should extend behind the app bar
​
exitMessage
String?
Message to display when user presses back button twice to exit

​
Example with Custom Body Config

NbxScaffold(
  widgetName: 'FormScreen',
  bodyConfig: BodyConfig(
    wrapInContainer: true,
    resizeToAvoidBottomInset: true,
    extendBodyBehindAppBar: false,
  ),
  body: FormContent(),
)

​
Advanced Examples

​
Full-Width Layout

For content that should span the full width without default padding: 
NbxScaffold(
  widgetName: 'ImageGallery',
  bodyConfig: BodyConfig(
    wrapInContainer: false,
  ),
  body: GridView.builder(
    // Full-width grid
  ),
)

​
Double Back to Exit

Enable double back press to exit the app: 
NbxScaffold(
  widgetName: 'HomeScreen',
  bodyConfig: BodyConfig(
    exitMessage: 'Press back again to exit',
  ),
  body: HomeContent(),
)

​
With Gradient Background

NbxScaffold(
  widgetName: 'SplashScreen',
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [
        Colors.blue.shade900,
        Colors.blue.shade600,
      ],
    ),
  ),
  body: SplashContent(),
)

​
With Bottom Navigation

NbxScaffold(
  widgetName: 'MainScreen',
  appBarConfig: AppBarConfig(
    title: 'Dashboard',
  ),
  body: DashboardContent(),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Search',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
    ],
  ),
)

​
Keyboard-Aware Form

NbxScaffold(
  widgetName: 'LoginScreen',
  appBarConfig: AppBarConfig(
    title: 'Sign In',
  ),
  bodyConfig: BodyConfig(
    wrapInContainer: true,
    resizeToAvoidBottomInset: true,
  ),
  body: LoginForm(),
)

​
Best Practices

Set wrapInContainer: false in BodyConfig when your content needs full-width layout (e.g., images, maps, lists with their own padding).
Enable resizeToAvoidBottomInset: true for screens with input fields to ensure they’re visible when the keyboard appears.
The default horizontal padding when wrapInContainer: true is defaultPaddingSize from the design system.
When using custom appBar, the appBarConfig is ignored. Use one or the other, not both.