surface_container

Description:

surface container

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"),
),
);
copied to clipboard