bottom_bar_with_sheet - GitLite

KO | EN

gitlite — search

#python #react #ai #typescript #golang #android #machine-learning #docker #windows #awesome-list #vue #pytorch #mcp #ios

bottom_bar_with_sheet

(★ 442)

:rocket: Flutter custom BottomBar Navigation Widget

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - custom.md
  - feature_request.md
- - auto_tests.yml
- pull_request_template.md
- - .gitignore
  - build.gradle
  - gradle.properties
  - settings.gradle
- - .gitignore
- - main.dart
- - .gitignore
- - e1.gif
  - e2.gif
  - e3.gif
  - e4.gif
- - favicon.png
  - index.html
  - manifest.json
- - .gitignore
  - CMakeLists.txt
- .gitignore
- .metadata
- analysis_options.yaml
- pubspec.lock
- pubspec.yaml
- README.md
- - bottom_bar_with_sheet_base.dart
  - src.dart
- bottom_bar_with_sheet.dart
- - items_generator_test.dart
.gitignore
.metadata
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
Makefile
pubspec.lock
pubspec.yaml
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/Frezyx/bottom_bar_with_sheet

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd bottom_bar_with_sheet

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Make

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Make Linux/macOS는 보통 기본 설치되어 있습니다. Windows는 별도 설치(예: MSYS2, WSL)가 필요합니다.

make

생성된 빌드 설정을 바탕으로 실제 컴파일을 진행해 실행 파일을 만듭니다.

✅ 에러 없이 끝나면 성공입니다. 생성된 실행 파일을 직접 실행해보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1> Bottom bar with Sheet </h1>

<p align ="Left">

[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2FFrezyx%2Fbottom_bar_with_sheet%2Fbadge%3Fref%3Dmaster&style=flat)](https://actions-badge.atrox.dev/Frezyx/bottom_bar_with_sheet/goto?ref=master) [![License](https://img.shields.io/github/license/Frezyx/bottom_bar_with_sheet)](https://opensource.org/licenses/MIT) [![Pub](https://img.shields.io/pub/v/bottom_bar_with_sheet.svg)](https://pub.dartlang.org/packages/bottom_bar_with_sheet)
![Stars](https://img.shields.io/github/stars/Frezyx/bottom_bar_with_sheet?style=social) 
</p>
<p>
  <a href="https://pub.dev/packages/bottom_bar_with_sheet/score"><img src="https://badges.bar/bottom_bar_with_sheet/likes" alt="Pub likes"></a>
  <a href="https://pub.dev/packages/bottom_bar_with_sheet/score"><img src="https://badges.bar/bottom_bar_with_sheet/popularity" alt="Pub popularity"></a>
  <a href="https://pub.dev/packages/bottom_bar_with_sheet/score"><img src="https://badges.bar/bottom_bar_with_sheet/pub%20points" alt="Pub points"></a>
</p>

💥Non-standard way to use more space of screens in your application💥<br>
😳Custom bottom Sheet under Bottom Navigation Bar😳<br>
😩Sounds sucks? 😉 First of all look at screens!

| ![Image](https://github.com/Frezyx/bottom_bar_with_sheet/blob/master/example/rep_files/e1.gif?raw=true) | ![Image](https://github.com/Frezyx/bottom_bar_with_sheet/blob/master/example/rep_files/e2.gif?raw=true) | ![Image](https://github.com/Frezyx/bottom_bar_with_sheet/blob/master/example/rep_files/e3.gif?raw=true) | ![Image](https://github.com/Frezyx/bottom_bar_with_sheet/blob/master/example/rep_files/e4.gif?raw=true) | 
| :------------: | :------------: | :------------: | :------------: |

## Table of Content

- [Getting Started](#getting-started)
- [Attributes](#attributes)
- [Attributes of BottomBarTheme](#attributes-of-bottombartheme)
- [Attributes of MainActionButtonTheme](#attributes-of-mainactionbuttontheme)

---

## Getting Started

### Add dependency

```yaml
dependencies:
  bottom_bar_with_sheet: ^2.4.0
```

### Add import package

```dart
import 'package:bottom_bar_with_sheet/bottom_bar_with_sheet.dart';
```

### Easy to use

Create a **Scaffold** widget and set **bottomNavigationBar** with **BottomBarWithSheet** like in the code below

```dart
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),
    ],
  ),
);
```

**More examples you can see** [here](https://github.com/Frezyx/bottom_bar_with_sheet/tree/master/example/lib)

---

## Attributes

| Attribute  | Type | Annotation |
| ------------- | ------------- | ------------- |
| autoClose | bool | If true the [BottomBarWithSheetItem]'s DO NOT automatically close the child sheet when pressed |
| disableMainActionButton | bool | disable MainActionButton if true , enable if false |
| sheetChild | Widget | that displayed on bottom of **BottomBarWithSheet** when **isOpened** == true |
| items | List BottomBarWithSheetItem | navigation buttons of **BottomBarWithSheet** |
| bottomBarTheme | BottomBarTheme | theme of **BottomBarWithSheet** |
| mainActionButtonTheme | MainActionButtonTheme | theme of **Main Action Button** |
| onSelectItem | Function | Callback **Function** works by clicking on one of **items** Return int **index** of selected button |
| duration | Duration | animation time of closing / opening **BottomBarWithSheet** |
| curve | Curve | the style of animation from the suggested ones of **Curve** |
| bottomBarMainAxisAlignment | MainAxisAlignment | The direction in which the widget content will line up |
| mainActionButtonBuilder | MainActionButton | Custom version of Main Action Button |
---
## Attributes of BottomBarTheme

| Attribute  | Type | Annotation |
| ------------- | ------------- | ------------- |
| height | double | **BottomBarWithSheet** icons line height |
| heightOpened | double | **BottomBarWithSheet** height when **isOpened** == true |
| heightClosed | double | **BottomBarWithSheet** height when **isOpened** == false |
| decoration | BoxDecoration | decoration of **BottomBarWithSheet** |
| contentPadding | EdgeInsets | create padding between content of widget and sides |
| backgroundColor | Color | **BottomBarWithSheet** background color |
| selectedItemIconColor | Color | selected item icon color |
| itemIconColor | Color | unselected item icon color |
| selectedItemTextStyle | Color | selected item text style |
| itemTextStyle | Color | unselected item text style |
| selectedItemIconSize | double | size of item icon when item is pressed |
| mainButtonPosition | enum | filed that response for the position of MainActionButton position this field have 3 possible values: MainButtonPosition.left, MainButtonPosition.right , MainButtonPosition.Center | 
| isVerticalItemLabel | bool | makes the labels of the items appear vertically or horizontally |

---

## Attributes of MainActionButtonTheme

| Attribute  | Type | Annotation |
| ------------- | ------------- | ------------- |
| size | double | size of button |
| icon | Widget | icon that displayed in center of MainActionButton |
| color | Color | background color of widget circle |
| splash | Color | splash color of widget circle |
| margin | EdgeInsets | side paddings of **Main Action Button** |
| transform | Matrix4 | This field can set transform location of **Main Action Button** |

---
*For help getting started with Flutter, view our 
[online documentation](https://flutter.dev/docs), which offers tutorials, 
samples, guidance on mobile development, and a full API reference.*