If you’re diving into Flutter and looking to enhance your user interface, creating a bottom bar with a sheet is a fantastic way to optimize screen space while providing intuitive navigation. In this guide, we’ll explore how to implement the BottomBarWithSheet package, along with a breakdown of its features and attributes.

Table of Content

• Getting Started
• Attributes
• Attributes of BottomBarTheme
• Attributes of MainActionButtonTheme

Getting Started

To begin, you need to add the necessary dependency and import the package into your Flutter project. Here’s how you can get started:

dependencies:
  bottom_bar_with_sheet: ^2.4.0

import 'package:bottom_bar_with_sheet/bottom_bar_with_sheet.dart';

Now, let’s easily set up the bottom navigation bar within a Scaffold widget:

Scaffold(
  bottomNavigationBar: BottomBarWithSheet(
    controller: _bottomBarController,
    bottomBarTheme: const BottomBarTheme(
      decoration: BoxDecoration(color: Colors.white),
      itemIconColor: Colors.grey,
    ),
    items: const [
      BottomBarWithSheetItem(icon: Icons.people),
      BottomBarWithSheetItem(icon: Icons.favorite),
    ],
  ),
);

For more examples, you can see here.

Attributes

The BottomBarWithSheet offers several attributes that can be adjusted to tailor it to your needs:

Attribute	Type	Annotation
autoClose	bool	Determines if the sheets automatically close when an item is pressed.
disableMainActionButton	bool	Enables or disables the MainActionButton.
sheetChild	Widget	The widget displayed at the bottom of the BottomBarWithSheet when opened.
items	List<BottomBarWithSheetItem>	Navigation buttons for the BottomBarWithSheet.
bottomBarTheme	BottomBarTheme	Theme settings for the BottomBarWithSheet.
onSelectItem	Function	Callback function triggered on item selection, returns the index of the selected button.
duration	Duration	Animation time for opening/closing the BottomBarWithSheet.
curve	Curve	Animation curve style.
mainActionButtonBuilder	MainActionButton	Custom version of the Main Action Button.

Attributes of BottomBarTheme

Similarly, the BottomBarTheme has its own set of properties:

Attribute	Type	Annotation
height	double	Height of the BottomBarWithSheet icon line.
decoration	BoxDecoration	Visual decoration of the BottomBarWithSheet.
backgroundColor	Color	Background color of the BottomBarWithSheet.

Attributes of MainActionButtonTheme

This theme configures the Main Action Button attributes:

Attribute	Type	Annotation
size	double	Size of the Main Action Button.
icon	Widget	Icon displayed in the center of the Main Action Button.
color	Color	Background color of the Main Action Button.

Troubleshooting

If you encounter any issues while implementing the BottomBarWithSheet, consider the following troubleshooting tips:

• Controller Not Working: Ensure the instance of the controller is initialized properly.
• Items Not Displaying: Check if the items list is populated correctly and associated widgets are defined.
• Animations Lagging: Review the duration and curve settings to ensure they are configured optimally.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.