surface_container 0.0.3

Surface Container Streamline UI customization in Flutter for status bars and navigation bars

Surface Container

Surface Container is a Flutter package that provides a customizable container widget for managing UI elements such as the status bar, navigation bar, and tab bars.

Installation

To use this package, add surface_container as a dependency in your pubspec.yaml file:

dependencies:
  surface_container: ^0.0.3

Then, import the package in your Dart code:

import 'package:surface_container/surface_container.dart';

Usage

First, initialize SurfaceConfig in your main function to configure the themes for light and dark modes:

SurfaceConfig.config(
  themeLight: SurfaceThemeData(
    // Define theme settings for light mode
    statusBarPrimaryColor: Colors.white,
    // Add more theme settings as needed
  ),
  themeDark: SurfaceThemeData(
    // Define theme settings for dark mode
    statusBarPrimaryColor: Colors.black,
    // Add more theme settings as needed
  ),
  themeModeType: ThemeMode.system, // Specify initial theme mode
);

Next, wrap your main widget with SurfaceContainer to customize UI elements:

MaterialApp(
  title: 'MyApp',
  theme: ThemeData.light(), // Set default theme to light mode
  darkTheme: ThemeData.dark(), // Set default theme to dark mode
  themeMode: SurfaceConfig.themeModeType, // Use configured theme mode
  home: const SurfaceContainer(
    // Wrap your main widget with SurfaceContainer for UI customization
    child: MainWidget(),
    // Specify other SurfaceContainer parameters as needed
  ),
);

Finally, inside your MainWidget or other widgets, use SurfaceContainer for customization:

SurfaceContainer(
  isTabBarShow: true,
  statusBarColor: Colors.blue, // Customize status bar color
  themedark: true, // Use dark theme for status bar
  systemNavigationBarColor: Colors.red, // Customize navigation bar color
  navigationBarthemedark: false,
  child: Center(
    child: Text("Surface Container"),
  ),
);