# flutter-demo

**Repository Path**: wanxiang-open-source/flutter-demo

## Basic Information

- **Project Name**: flutter-demo
- **Description**: No description available
- **Primary Language**: Dart
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-09-03
- **Last Updated**: 2024-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


🔥Flutter 那些花里胡哨的界面🔥 进来绝不后悔
====
[![GitHub stars](https://img.shields.io/github/stars/longer96/flutter-demo.svg?style=social)](https://github.com/longer96/flutter-demo/stargazers)   [![GitHub forks](https://img.shields.io/github/forks/longer96/flutter-demo.svg?style=social)](https://github.com/longer96/flutter-demo/network)


拖动滑块验证，仿B站(bilibili)底部菜单，仿抖音、小红书底部菜单，向上展开菜单，半圆菜单，中间凹进去的菜单 等等....
收集、实现了一些花里胡哨的底部导航。防止重复造轮，避免产品经理和程序员又又又又又又打起来!



- 觉得对你有帮助的希望点个star [![GitHub stars](https://img.shields.io/github/stars/longer96/flutter-demo.svg?style=social)](https://github.com/longer96/flutter-demo/stargazers)
- 有很棒的底部菜单希望推荐
- 需要使用的，建议大家clone下来，直接引入，具体需求(如未读消息)自己添加
- 欢迎Fork & pr贡献您的代码，大家共同学习❤

<br>

## Example
[Web版在线Demo](http://footer.eeaarr.cn)
<br>


### apk
 - [http://d.cc53.cn/sn6c](http://d.cc53.cn/sn6c)
<img width="200px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/qr.png"/>




### 拖动滑块验证
<img width="320px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/00.gif"/>



<br><br>
### 底部菜单
#### 效果图 (gif效果不太好，可下载或web体验)

- Flutter自带菜单，凹进去
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/01.gif"/>


- 右侧展开菜单
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/02.gif"/>


- 向上展开菜单
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/03.gif"/>


- 半折扇菜单，弧形菜单
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/04.gif"/>


- 山峦起伏菜单

| <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/2.gif"/> | <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/05.gif"/> |
| :---------: | :------: |
| 参考图 | 效果图 |


- 中间凹进去的菜单
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/06.gif"/>


- 底部菜单 仿B站
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/07.gif"/>


- 圆圈圈菜单
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/08.gif"/>



- 圆圈圈圈菜单
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/09.gif"/>


- 抖音、小红书
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/dy.png"/>


- 看上去像拉面的菜单

| <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/0.gif"/> | <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/b/10.gif"/> |
| :---------: | :------: |
| 参考图 | 效果图 |

- 流畅动画的底部导航
[demo地址](https://github.com/mahmoud-eslami/bottom_animation)

| <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/o1.gif"/> | <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/o2.gif"/> |
| :---------: | :------: |
| 效果图1 | 效果图2 |


- 底部导航
[demo地址](https://github.com/lukepighetti/salomon_bottom_bar)
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/o3.gif"/>


- 底部导航
[demo地址](https://github.com/imaNNeoFighT/circular_bottom_navigation)
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/o4.gif"/>


- 底部导航
[demo地址](https://github.com/therezacuet/Motion-Tab-Bar)
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/o5.gif"/>


- 底部导航
[demo地址](https://github.com/retroportalstudio/spincircle_bottom_bar)
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/o6.gif"/>



<br><br>

### 更多效果图参考（想练习的童鞋可以实现）
<br><br>
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/1.gif"/>  <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/3.gif"/>
<br><br>
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/4.gif"/> <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/5.gif"/>
<br><br>
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/6.gif"/> <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/7.gif"/>
<br><br>
<img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/8.gif"/> <img width="300px" style="max-width:100%;" src="https://github.com/longer96/flutter-demo/blob/master/imgs/a/9.gif"/>




### 推荐阅读
- [Flutter动画 教程B站王叔](https://space.bilibili.com/589533168/channel/detail?cid=130705)