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.

​
Overview

NbxScaffold provides a consistent layout structure for Nebux applications with enhanced functionality including configurable app bars, safe areas, body decoration, and double-back-to-exit behavior.

​
Basic Usage

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

​
Widget Properties

​
Required Properties

​
body
Widget
required
The main content widget to be displayed in the scaffold body.
​
widgetName
String
required
Name of the widget to be used for debugging purposes.

​
App Bar Properties

​
appBar
PreferredSizeWidget?
Custom app bar widget. If provided, overrides the built-in app bar.
​
appBarConfig
AppBarConfig?
Configuration for the built-in app bar properties. The app bar is only shown if this is provided and contains at least a title, actions, or leading button.

​
Layout Properties

​
safeAreaConfig
SafeAreaConfig?
default:"SafeAreaConfig()"
Configuration for safe area properties (top, bottom, minimum padding).
​
bodyConfig
BodyConfig?
default:"BodyConfig(wrapInContainer: true)"
Configuration for body properties including container wrapping, decoration, and resize behavior.
​
backgroundColor
Color?
Background color for the scaffold. Defaults to context.nebuxColors.background.
​
decoration
Decoration?
Gradient or decoration for the scaffold background.

​
Navigation Properties

​
bottomNavigationBar
Widget?
Bottom navigation bar widget.
​
floatingActionButton
Widget?
Floating action button widget.
​
floatingActionButtonLocation
FloatingActionButtonLocation?
Location of the floating action button.

​
Configuration Classes

​
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.

​
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.

​
BodyConfig

Configuration for scaffold body behavior.
​
wrapInContainer
bool
default:"true"
Whether to wrap the body in a container with decoration and 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 bottom inset (keyboard).
​
exitMessage
String?
Message to display when double back to exit is triggered. If provided, enables double-back-to-exit behavior.
​
extendBodyBehindAppBar
bool
default:"true"
Whether the body should extend behind the app bar.

​
Examples

​
Basic Scaffold

NbxScaffold(
  widgetName: 'HomePage',
  body: Center(
    child: Text('Welcome to Nebux'),
  ),
)

​
With App Bar

NbxScaffold(
  widgetName: 'ProfilePage',
  appBarConfig: AppBarConfig(
    title: 'Profile',
    centerTitle: true,
    showDivider: true,
    actions: [
      IconButton(
        icon: Icon(Icons.settings),
        onPressed: () => _openSettings(),
      ),
    ],
  ),
  body: ProfileContent(),
)

​
With Custom Leading Button

NbxScaffold(
  widgetName: 'DetailsPage',
  appBarConfig: AppBarConfig(
    title: 'Details',
    leadingButton: IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () => Navigator.pop(context),
    ),
  ),
  body: DetailsContent(),
)

​
Without Container Wrapper

NbxScaffold(
  widgetName: 'FullScreenMap',
  bodyConfig: BodyConfig(
    wrapInContainer: false,
  ),
  body: MapWidget(),
)

​
With Double Back to Exit

NbxScaffold(
  widgetName: 'MainScreen',
  bodyConfig: BodyConfig(
    exitMessage: 'Press back again to exit',
  ),
  body: MainContent(),
)

​
With Bottom Navigation

NbxScaffold(
  widgetName: 'HomeScreen',
  body: _pages[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: _currentIndex,
    onTap: (index) => setState(() => _currentIndex = index),
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Search',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
    ],
  ),
)

​
With Floating Action Button

NbxScaffold(
  widgetName: 'TasksScreen',
  appBarConfig: AppBarConfig(title: 'Tasks'),
  body: TasksList(),
  floatingActionButton: FloatingActionButton(
    onPressed: () => _addTask(),
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)

​
With Gradient Background

NbxScaffold(
  widgetName: 'WelcomeScreen',
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.blue, Colors.purple],
    ),
  ),
  body: WelcomeContent(),
)

​
With Keyboard Resize

NbxScaffold(
  widgetName: 'ChatScreen',
  appBarConfig: AppBarConfig(title: 'Chat'),
  bodyConfig: BodyConfig(
    resizeToAvoidBottomInset: true,
  ),
  body: ChatContent(),
)

​
Custom Safe Area

NbxScaffold(
  widgetName: 'VideoPlayer',
  safeAreaConfig: SafeAreaConfig(
    top: false,
    bottom: false,
  ),
  bodyConfig: BodyConfig(
    wrapInContainer: false,
  ),
  body: VideoPlayerWidget(),
)

​
With Custom App Bar Widget

NbxScaffold(
  widgetName: 'CustomScreen',
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(100),
    child: CustomAppBar(),
  ),
  body: Content(),
)

​
Behavior Notes

​
App Bar Display

The built-in app bar is only displayed if appBarConfig is provided and contains at least one of:
  • title
  • actions
  • leadingButton

​
Body Container

When bodyConfig.wrapInContainer is true (default), the body is wrapped in a container with:
  • Horizontal padding of defaultPaddingSize
  • Optional decoration from bodyConfig.decoration

​
Default Padding

The default horizontal padding is controlled by defaultPaddingSize constant from the design system.

​
See Also