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

Nebux Design System provides convenient BuildContext extensions that allow you to access theme properties anywhere in your widget tree without manually retrieving the theme extension.

​
Available Extensions

The NebuxBuildContextExtension adds three getter methods to BuildContext:

​
nebuxTheme

Access the complete NebuxTheme instance from the current context. 
NebuxTheme get nebuxTheme
Usage: 
Widget build(BuildContext context) {
  final theme = context.nebuxTheme;
  
  return Container(
    color: theme.colors.background,
  );
}

​
nebuxColors

Directly access the NebuxColors palette from the current context. 
NebuxColors get nebuxColors
Usage: 
Widget build(BuildContext context) {
  return Container(
    decoration: BoxDecoration(
      color: context.nebuxColors.surface,
      border: Border.all(color: context.nebuxColors.divider),
    ),
  );
}
This is equivalent to context.nebuxTheme.colors but more concise.

​
nebuxTypography

Directly access the NebuxTypography styles from the current context. 
NebuxTypography get nebuxTypography
Usage: 
Widget build(BuildContext context) {
  return Column(
    children: [
      Text('Heading', style: context.nebuxTypography.heading),
      Text('Body content', style: context.nebuxTypography.paragraph),
      Text('Caption', style: context.nebuxTypography.caption),
    ],
  );
}
This is equivalent to context.nebuxTheme.typography but more concise.

​
Complete Example

import 'package:flutter/material.dart';
import 'package:nebux_design_system/nebux_design_system.dart';

class ProfileCard extends StatelessWidget {
  const ProfileCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: context.nebuxColors.cardColor,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: context.nebuxColors.divider),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'John Doe',
            style: context.nebuxTypography.heading,
          ),
          const SizedBox(height: 8),
          Text(
            'Software Engineer',
            style: context.nebuxTypography.section.copyWith(
              color: context.nebuxColors.textSecondary,
            ),
          ),
          const SizedBox(height: 16),
          Text(
            'Building amazing Flutter applications with Nebux Design System.',
            style: context.nebuxTypography.paragraph,
          ),
        ],
      ),
    );
  }
}

​
NebuxColorThemes Extension

The package also provides an extension on NebuxColorThemes for brightness-based color selection: 
NebuxColors getColorsByBrightness(Brightness brightness)
Usage: 
final colorThemes = NebuxColorThemes.standard();
final isDark = MediaQuery.of(context).platformBrightness == Brightness.dark;
final colors = colorThemes.getColorsByBrightness(
  isDark ? Brightness.dark : Brightness.light,
);

​
Source Code Reference

The context extensions are defined in: File: lib/src/core/theme/extensions/nebux_extension.dart
These extensions require that NebuxTheme is registered as a ThemeExtension in your MaterialApp’s theme or darkTheme. See the Quickstart Guide for setup instructions.

​
Related Pages

Widget Extensions

Padding and margin extensions for widgets

Utilities

NebuxUtils and NebuxDebouncer classes

Customization Guide

Learn how to customize themes and colors