Skip to content

Commit 5962164

Browse files
codenameakshaycodenameakshay
authored
Merge pull request #3 from codenameakshay/dev
v1.1.0 | Update to Flutter 3, add clip property
2 parents 1462e7c + a0d5f8d commit 5962164

File tree

87 files changed

+3642
-351
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+3642
-351
lines changed

‎.metadata

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,45 @@
11
# This file tracks properties of this Flutter project.
22
# Used by Flutter tool to assess capabilities and perform upgrades etc.
33
#
4-
# This file should be version controlled and should not be manually edited.
4+
# This file should be version controlled.
55

66
version:
7-
revision: b22742018b3edf16c6cadd7b76d9db5e7f9064b5
7+
revision: f1875d570e39de09040c8f79aa13cc56baab8db1
88
channel: stable
99

1010
project_type: app
11+
12+
# Tracks metadata for the flutter migrate command
13+
migration:
14+
platforms:
15+
- platform: root
16+
create_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
17+
base_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
18+
- platform: android
19+
create_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
20+
base_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
21+
- platform: ios
22+
create_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
23+
base_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
24+
- platform: linux
25+
create_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
26+
base_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
27+
- platform: macos
28+
create_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
29+
base_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
30+
- platform: web
31+
create_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
32+
base_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
33+
- platform: windows
34+
create_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
35+
base_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
36+
37+
# User provided section
38+
39+
# List of Local paths (relative to this file) that should be
40+
# ignored by the migrate tool.
41+
#
42+
# Files that are not part of the templates will be ignored by default.
43+
unmanaged_files:
44+
- 'lib/main.dart'
45+
- 'ios/Runner.xcodeproj/project.pbxproj'

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"dart.flutterSdkPath": "/Users/codenameakshay/Development/flutter3"
3+
}

‎README.md

Lines changed: 330 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,336 @@
1-
# floating_bar
1+
<!--
2+
This README describes the package. If you publish this package to pub.dev,
3+
this README's contents appear on the landing page for your package.
24
3-
A new Flutter project.
5+
For information about how to write a good package README, see the guide for
6+
[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).
47
5-
## Getting Started
8+
For general information about developing packages, see the Dart guide for
9+
[creating packages](https://dart.dev/guides/libraries/create-library-packages)
10+
and the Flutter guide for
11+
[developing packages and plugins](https://flutter.dev/developing-packages).
12+
-->
613

7-
This project is a starting point for a Flutter application.
14+
<h1 align="center">Floating Bottom Bar</h1>
815

9-
A few resources to get you started if this is your first Flutter project:
16+
<p align="center">A flutter package which allows to show a floating widget which can be used as a tab bar, bottom navigation bar or anything one can think of. The widget reacts to scrolling events too.</p><br>
1017

11-
- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
12-
- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
18+
<p align="center">
19+
<a href="https://flutter.dev">
20+
<img src="https://img.shields.io/badge/Platform-Flutter-02569B?logo=flutter"
21+
alt="Platform" />
22+
</a>
23+
<a href="https://pub.dartlang.org/packages/flutter_floating_bottom_bar">
24+
<img src="https://img.shields.io/pub/v/flutter-floating-bottom-bar.svg"
25+
alt="Pub Package" />
26+
</a>
27+
<a href="https://opensource.org/licenses/MIT">
28+
<img src="https://img.shields.io/github/license/codenameakshay/flutter-floating-bottom-bar?color=red"
29+
alt="License: MIT" />
30+
</a>
31+
<a href="https://www.paypal.me/codenameakshay">
32+
<img src="https://img.shields.io/badge/Donate-PayPal-00457C?logo=paypal"
33+
alt="Donate" />
34+
</a>
35+
</p><br>
1336

14-
For help getting started with Flutter, view our
15-
[online documentation](https://flutter.dev/docs), which offers tutorials,
16-
samples, guidance on mobile development, and a full API reference.
37+
| ![A floating tab bar](https://raw.githubusercontent.com/codenameakshay/flutter-floating-bottom-bar/main/screenshots/1.gif) | ![A floating search bar](https://raw.githubusercontent.com/codenameakshay/flutter-floating-bottom-bar/main/screenshots/2.gif) | ![A basic example](https://raw.githubusercontent.com/codenameakshay/flutter-floating-bottom-bar/main/screenshots/3.gif) |
38+
|---|---|---|
39+
| **A floating tab bar** | **A floating search bar** | **A basic example** |
40+
41+
| ![image](https://user-images.githubusercontent.com/60510869/183573165-28e6b896-6559-4d86-897a-3bc8b0adb927.png)|
42+
| - |
43+
| **A floating tab bar with a FAB** |
44+
45+
## Features
46+
47+
The package allows you to create a floating widget like a bottom navigation bar that reacts to scrolling events.
48+
49+
- It can be used as a tab bar, bottom navigation bar or anything one can think of.
50+
- It reacts to scrolling events too.
51+
- It can be used in a full screen app or in a smaller screen.
52+
53+
## Installing
54+
55+
### 1. Depend on it
56+
57+
Add this to your package's `pubspec.yaml` file:
58+
59+
```yaml
60+
dependencies:
61+
flutter-floating-bottom-bar: ^1.1.0
62+
```
63+
64+
### 2. Install it
65+
66+
You can install packages from the command line:
67+
68+
with `pub`:
69+
70+
```
71+
pub get
72+
```
73+
74+
with `Flutter`:
75+
76+
```
77+
flutter pub get
78+
```
79+
80+
### 3. Import it
81+
82+
Now in your `Dart` code, you can use:
83+
84+
```dart
85+
import 'package:flutter_floating_bottom_bar/flutter_floating_bottom_bar.dart';
86+
```
87+
88+
# Usage
89+
90+
`BottomBar` is a _Widget_ that can be wrapped over any child to convert it into a bottom bar.
91+
Below is the most simple use:
92+
93+
```dart
94+
BottomBar(
95+
child: Padding(
96+
padding: const EdgeInsets.all(16.0),
97+
child: Text(
98+
"This is the floating widget",
99+
textAlign: TextAlign.center,
100+
style: TextStyle(color: Colors.white),
101+
),
102+
),
103+
body: (context, controller) =>
104+
InfiniteListPage(controller: controller, color: Colors.blue,
105+
)
106+
```
107+
108+
It needs two required arguments -
109+
110+
- `child` – This is the child inside the `BottomBar` (widget which is floating)
111+
- `body` – The widget displayed below the `BottomBar` (like your main app)
112+
113+
# Detailed Usage
114+
115+
Below is the detailed usage of the package, including all properties defined.
116+
117+
```dart
118+
BottomBar(
119+
child: TabBar(), # A floating tab bar
120+
fit: StackFit.expand,
121+
icon: Center(
122+
child: IconButton(
123+
padding: EdgeInsets.zero,
124+
onPressed: null,
125+
icon: Icon(
126+
Icons.arrow_upward_rounded,
127+
color: unselectedColor,
128+
),
129+
),
130+
),
131+
borderRadius: BorderRadius.circular(500),
132+
duration: Duration(seconds: 1),
133+
curve: Curves.decelerate,
134+
showIcon: true,
135+
width: MediaQuery.of(context).size.width * 0.8,
136+
barColor: colors[currentPage].computeLuminance() > 0.5
137+
? Colors.black
138+
: Colors.white,
139+
start: 2,
140+
end: 0,
141+
bottom: 10,
142+
alignment: Alignment.bottomCenter,
143+
iconHeight: 35,
144+
iconWidth: 35,
145+
reverse: false,
146+
hideOnScroll: true,
147+
scrollOpposite: false,
148+
onBottomBarHidden: () {},
149+
onBottomBarShown: () {},
150+
body: (context, controller) => TabBarView(
151+
controller: tabController,
152+
dragStartBehavior: DragStartBehavior.down,
153+
physics: const BouncingScrollPhysics(),
154+
children: [] # Add children here
155+
),
156+
)
157+
```
158+
159+
## icon
160+
161+
```dart
162+
icon: Center(
163+
child: IconButton(
164+
padding: EdgeInsets.zero,
165+
onPressed: null,
166+
icon: Icon(
167+
Icons.arrow_upward_rounded,
168+
color: unselectedColor,
169+
),
170+
),
171+
),
172+
```
173+
174+
This is the scroll to top button. It will be hidden when the `BottomBar` is scrolled up. It will be shown when the `BottomBar` is scrolled down. Clicking it will scroll the bar on top.
175+
176+
You can hide this by using the `showIcon` property.
177+
178+
## iconWidth
179+
180+
```dart
181+
iconWidth: 35,
182+
```
183+
184+
The width of the scroll to top button.
185+
186+
## iconHeight
187+
188+
```dart
189+
iconHeight: 35,
190+
```
191+
192+
The height of the scroll to top button.
193+
194+
## barColor
195+
196+
```dart
197+
barColor: Colors.white,
198+
```
199+
200+
The color of the `BottomBar`.
201+
202+
## end
203+
204+
```dart
205+
end: 0,
206+
```
207+
208+
The end position in `y-axis` of the SlideTransition of the `BottomBar`.
209+
210+
## start
211+
212+
```dart
213+
start: 2,
214+
```
215+
216+
The start position in `y-axis` of the SlideTransition of the `BottomBar`.
217+
218+
## bottom
219+
220+
```dart
221+
bottom: 10,
222+
```
223+
224+
The position of the bar from the bottom in double.
225+
226+
## duration
227+
228+
```dart
229+
duration: Duration(seconds: 1),
230+
```
231+
232+
The duration of the `SlideTransition` of the `BottomBar`.
233+
234+
## curve
235+
236+
```dart
237+
curve: Curves.decelerate,
238+
```
239+
240+
The curve of the `SlideTransition` of the `BottomBar`.
241+
242+
## width
243+
244+
```dart
245+
width: MediaQuery.of(context).size.width * 0.8,
246+
```
247+
248+
The width of the `BottomBar`.
249+
250+
## borderRadius
251+
252+
```dart
253+
borderRadius: BorderRadius.circular(500),
254+
```
255+
256+
The border radius of the `BottomBar`.
257+
258+
## showIcon
259+
260+
```dart
261+
showIcon: true,
262+
```
263+
264+
If you don't want the scroll to top button to be visible, set this to `false`.
265+
266+
## alignment
267+
268+
```dart
269+
alignment: Alignment.bottomCenter,
270+
```
271+
272+
The alignment of the Stack in which the `BottomBar` is placed.
273+
274+
## onBottomBarShown
275+
276+
```dart
277+
onBottomBarShown: () {},
278+
```
279+
280+
The callback when the `BottomBar` is shown i.e. on response to scroll events.
281+
282+
## onBottomBarHidden
283+
284+
```dart
285+
onBottomBarHidden: () {},
286+
```
287+
288+
The callback when the `BottomBar` is hidden i.e. on response to scroll events.
289+
290+
## reverse
291+
292+
```dart
293+
reverse: true,
294+
```
295+
296+
To reverse the direction in which the scroll reacts, i.e. if you want to make the bar visible when you scroll down and hide it when you scroll up, set this to `true`.
297+
298+
## scrollOpposite
299+
300+
```dart
301+
scrollOpposite: true,
302+
```
303+
304+
To reverse the direction in which the scroll to top button scrolls, i.e. if you want to scroll to bottom, set this to `true`.
305+
306+
## hideOnScroll
307+
308+
```dart
309+
hideOnScroll: false,
310+
```
311+
312+
If you don't want the bar to be hidden ever, set this to `false`.
313+
314+
## fit
315+
316+
```dart
317+
fit: StackFit.expand,
318+
```
319+
320+
The fit property of the `Stack` in which the `BottomBar` is placed.
321+
322+
## clip
323+
324+
```dart
325+
clip: Clip.none,
326+
```
327+
328+
The clipBehaviour property of the `Stack` in which the `BottomBar` is placed.
329+
330+
> Note - You can find more detailed examples in the `example` directory.
331+
332+
# Bugs or Requests
333+
334+
If you encounter any problems feel free to open an [issue](https://github.com/codenameakshay/flutter-floating-bottom-bar/issues/new?template=bug_report.md). If you feel the library is missing a feature, please raise a [ticket](https://github.com/codenameakshay/flutter-floating-bottom-bar/issues/new?template=feature_request.md) on GitHub and I'll look into it. Pull request are also welcome.
335+
336+
See [Contributing.md](https://github.com/codenameakshay/flutter-floating-bottom-bar/blob/master/CONTRIBUTING.md).

0 commit comments

Comments
 (0)