{"id":15435958,"url":"https://github.com/deven98/flip_box_bar","last_synced_at":"2025-04-09T15:10:01.394Z","repository":{"id":54417659,"uuid":"161511720","full_name":"deven98/flip_box_bar","owner":"deven98","description":"A 3D Bottom Navigation Bar in Flutter","archived":false,"fork":false,"pushed_at":"2019-10-04T13:59:17.000Z","size":735,"stargazers_count":263,"open_issues_count":3,"forks_count":45,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-09T15:09:55.535Z","etag":null,"topics":["flutter","flutter-package","flutter-plugin"],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deven98.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-12T16:00:46.000Z","updated_at":"2025-01-12T07:14:59.000Z","dependencies_parsed_at":"2022-08-13T15:00:54.166Z","dependency_job_id":null,"html_url":"https://github.com/deven98/flip_box_bar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deven98%2Fflip_box_bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deven98%2Fflip_box_bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deven98%2Fflip_box_bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deven98%2Fflip_box_bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deven98","download_url":"https://codeload.github.com/deven98/flip_box_bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055282,"owners_count":21040157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","flutter-package","flutter-plugin"],"created_at":"2024-10-01T18:47:11.586Z","updated_at":"2025-04-09T15:10:01.365Z","avatar_url":"https://github.com/deven98.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flip_box_bar\n\nA 3D BottomNavigationBar inspired by Dribbble design by Dannniel\n[https://dribbble.com/shots/4811135-Tab-Bar-Cube-Interaction].\n\n# Demo\n\n![](https://github.com/deven98/flip_box_bar/blob/master/demo.gif)\n\n# Example Use\n```dart\n      // In Scaffold\n      int selectedIndex = 0;\n      \n      bottomNavigationBar: FlipBoxBar(\n              selectedIndex: index,\n              items: [\n                FlipBarItem(icon: Icon(Icons.map), text: Text(\"Map\"), frontColor: Colors.blue, backColor: Colors.blueAccent),\n                FlipBarItem(icon: Icon(Icons.add), text: Text(\"Add\"), frontColor: Colors.cyan, backColor: Colors.cyanAccent),\n                FlipBarItem(icon: Icon(Icons.chrome_reader_mode), text: Text(\"Read\"), frontColor: Colors.orange, backColor: Colors.orangeAccent),\n                FlipBarItem(icon: Icon(Icons.print), text: Text(\"Print\"), frontColor: Colors.purple, backColor: Colors.purpleAccent),\n                FlipBarItem(icon: Icon(Icons.print), text: Text(\"Print\"), frontColor: Colors.pink, backColor: Colors.pinkAccent),\n              ],\n              onIndexChanged: (newIndex) {\n                setState() {\n                    selectedIndex = newIndex;\n                }\n              },\n            ),\n```     \n\n# Properties\n\n### List\\\u003cFlipBarItem\\\u003e items;\n\nThe items to be displayed in the BottomNavBar.\n\n### Duration animationDuration;\n\nThe duration of the animation of the box flip.\n\n### ValueChanged\\\u003cint\\\u003e onIndexChanged;\n\nCallback for getting value of item selection.\n\n### int initialIndex;\n\nThe initial selected index of the BottomNavBar.\n\n### double navBarHeight;\n\nThe height of the BottomNavBar.\n\n# Note: Breaking change\n\nPrior to 0.9.0, only initialIndex was provided as a parameter. 0.9.0 onwards, user needs to\nmodify the selectedIndex property and rebuild to animate. The reason for this modification is that\nit allows programmatically changing the selected index whereas the earlier version did not.\n\n### A version of the code before 0.9.0 would look like this:\n```dart\n        // In Scaffold\n      \n      bottomNavigationBar: FlipBoxBar(\n              initialIndex: 0,\n              items: [\n                FlipBarItem(icon: Icon(Icons.map), text: Text(\"Map\"), frontColor: Colors.blue, backColor: Colors.blueAccent),\n                FlipBarItem(icon: Icon(Icons.add), text: Text(\"Add\"), frontColor: Colors.cyan, backColor: Colors.cyanAccent),\n                FlipBarItem(icon: Icon(Icons.chrome_reader_mode), text: Text(\"Read\"), frontColor: Colors.orange, backColor: Colors.orangeAccent),\n                FlipBarItem(icon: Icon(Icons.print), text: Text(\"Print\"), frontColor: Colors.purple, backColor: Colors.purpleAccent),\n                FlipBarItem(icon: Icon(Icons.print), text: Text(\"Print\"), frontColor: Colors.pink, backColor: Colors.pinkAccent),\n              ],\n              onIndexChanged: (newIndex) {\n                print(newIndex);\n              },\n            ),\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeven98%2Fflip_box_bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeven98%2Fflip_box_bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeven98%2Fflip_box_bar/lists"}