Flutter component concept created with Flutter using Dart programming language, inspired by Gooey Rab Bar.

Overview

Gooey Tab Bar Flutter

Flutter component concept created with Flutter using Dart programming language, inspired by Gooey Tab Bar.

About

This component was created inspired by the GIF at the end of this page. The component is using Animations, Clip Path, Transform and Stream's with RxDart proprieties to better simulate the inspiration GIF.

The Constructor Data Fields

final Widget child; // Hidden menu
final Color colorMenuIconDefault; // Main icon color when not pressed
final Color colorMenuIconActivated; // Main icon color when activated
final Color backgroundMenuIconDefault; // Main background icon when not pressed
final Color backgroundMenuIconActivated;// Main background icon when activated
final Color background; // Background color
final List<IconButton> iconButtons; //Tab bar icons

The Inspiration

The GIF below shows the inspiration component.

App Running

The App

The GIF below shows this current component running.

App Running

You might also like...

A simple yet elegant tip calculator created using flutter framework and dart language.

CAL- TIP, A TIP CALCULATOR APPLICATION A simple yet elegant tip calculator created using flutter framework and dart language. As the name suggests, th

Dec 26, 2021

This application was created using the Dart language and it is an application that contains a set of different questions and at the end shows you the number of correct answers you have answered , made by flutter

exams_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Dec 28, 2021

Simple and fast Entity-Component-System (ECS) library written in Dart.

Simple and fast Entity-Component-System (ECS) library written in Dart.

Fast ECS Simple and fast Entity-Component-System (ECS) library written in Dart. CPU Flame Chart Demonstration of performance for rotation of 1024 enti

Nov 16, 2022

FIDL(Flutter Interface Definition Language) is a language for transfer objects cross platforms.

FIDL(Flutter Interface Definition Language) is a language for transfer objects cross platforms.

Flutter Interface Definition Language (FIDL) README in English(TODO) FIDL 即 Flutter 接口定义语言,类似于AIDL(Android Interface Definition Language)。您可以利用它定义不同平台

Oct 27, 2021

Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter Bottom Navigation Bar Tutorial A tutorial with various Flutter bottom na

Oct 25, 2022

Eflashcard - Ready to learn a new language? Try this flashcards app that will help you learn the different writing systems of each language

Eflashcard - Ready to learn a new language? Try this flashcards app that will help you learn the different writing systems of each language

Language Flashcards Mobile App Ready to learn a new language? Try this mobile fl

Jan 8, 2022

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

Nov 11, 2022

Starlight search bar - Starlight search bar with flutter

Starlight search bar - Starlight search bar with flutter

starlight_search_bar If you find the easiest way to search your item, this is fo

Apr 20, 2022

Animation nav bar - Flutter Animated Navigation Bar

Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Nov 22, 2022
Comments
  • Error occurs when pressing the + button instead of dragging after page build (at the very first time)

    Error occurs when pressing the + button instead of dragging after page build (at the very first time)

    When i press the + button, error occur as follow, any help?:

    flutter: #3 AnimationController._tick package:flutter/…/animation/animation_controller.dart:765 flutter: #4 Ticker._tick package:flutter/…/scheduler/ticker.dart:228 flutter: #5 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback package:flutter/…/scheduler/binding.dart:1012 flutter: #6 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleBeginFrame. package:flutter/…/scheduler/binding.dart:928 flutter: #7 __InternalLinkedHashMap&_HashVMBase&MapMixin&_LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:367:8) flutter: #8 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleBeginFrame package:flutter/…/scheduler/binding.dart:926 flutter: #9 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleBeginFrame package:flutter/…/scheduler/binding.dart:856 flutter: #13 _invoke1 (dart:ui/hooks.dart:250:10) flutter: #14 _beginFrame (dart:ui/hooks.dart:177:3) flutter: (elided 3 frames from package dart:async) flutter: flutter: The AnimationController notifying listeners was: flutter: AnimationController#b667e(▶ 0.000) flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════ flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. flutter: Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null. [VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: NoSuchMethodError: The method 'addListener' was called on null. Receiver: null Tried calling: addListener(Closure: () => Null) #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5) #1 _MenuTabBar._moveButtonDown. package:menu_tabbar/components/menu_tab_bar.dart:137 #2 _rootRun (dart:async/zone.dart:1120:38) #3 _CustomZone.run (dart:async/zone.dart:1021:19) #4 _FutureListener.handleWhenComplete (dart:async/future_impl.dart:150:18) #5 Future._propagateToListeners.handleWhenCompleteCallback (dart:async/future_impl.dart:609:39) #6 Future._propagateToListeners (dart:async/future_impl.dart:665:37) #7 Future._completeWithValue (dart:async/future_impl.dart:483:5) #8 Future._asyncComplete. (dart:async/future_impl.dart:513:7) #9 _rootRun (dart:async/zone.dart:1124:13) #10 _CustomZone.run (dart:async/zone.dart:1021:19) #11 _CustomZone.runGuarded (d<…> [VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: NoSuchMethodError: The method 'addListener' was called on null. Receiver: null Tried calling: addListener(Closure: () => Null) #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5) #1 _MenuTabBar._moveButtonUp. package:menu_tabbar/components/menu_tab_bar.dart:148 #2 _rootRun (dart:async/zone.dart:1120:38) #3 _CustomZone.run (dart:async/zone.dart:1021:19) #4 _FutureListener.handleWhenComplete (dart:async/future_impl.dart:150:18) #5 Future._propagateToListeners.handleWhenCompleteCallback (dart:async/future_impl.dart:609:39) #6 Future._propagateToListeners (dart:async/future_impl.dart:665:37) #7 Future._completeWithValue (dart:async/future_impl.dart:483:5) #8 Future._asyncComplete. (dart:async/future_impl.dart:513:7) #9 _rootRun (dart:async/zone.dart:1124:13) #10 _CustomZone.run (dart:async/zone.dart:1021:19) #11 _CustomZone.runGuarded (dar<…>

    opened by dvlj 5
  • fix: fix animation error when first click + button

    fix: fix animation error when first click + button

    _animationUp and _animationDown is not initialized until we move the + button, which is the cause of issue #1 .

    As they are initialized in _updateButtonPosition(), so i just pass 0 to initialize them when click.

    issue #1

    opened by thundertrick 0
Owner
Wilton Neto
Software Engineer. Front-end Developer, and living in love with Vue, Flutter and Go.
Wilton Neto
App concept created with Flutter using Dart programming language, inspired by Groceries Shopping App Interaction.

Grocery Shop Flutter App concept created with Flutter using Dart programming language, inspired by Groceries Shopping App Interaction. About The app w

Wilton Neto 486 Nov 17, 2022
This repository was created to provide the basics of the Dart programming language and Its use cases.

dart-exercises A collection of source code of the Dart Programming language. How does this repository works? Clone / Fork this repository to make your

Technosoft Labs 2 Oct 28, 2021
App concept created with Flutter inspired by Tasty Burger.

Hamburger Flutter App concept created with Flutter inspired by Tasty Burger. About The app was created to simulate all the system behind the inspirati

Wilton Neto 144 Sep 28, 2022
Docker images for the Dart programming language (https://dart.dev)

dart-docker This is the Git repo of the Docker "Official Images" for the Dart programming language. See the Docker Hub page for a full description on

Dart 48 Nov 21, 2022
Intel Corporation 231 Nov 18, 2022
Repo for Teach Yourself mastering dart programming language

mastering-dart Repo for Teach Yourself mastering dart programming language Chapter Membuat Aplikasi Pertama Menggunakan Dart Percabangan Perulangan Fu

Feri Lukmansyah 50 Nov 10, 2022
Implementation of data structures and algorithms in Dart programming language.

Algorithms in Dart Implementation of several algorithms with Dart programming language. Use dartdoc to generate documentation. Lists List data structu

Mafinar Khan 195 Oct 23, 2022
🇮🇪 A generic programming language interpreter, linter, formatter, and all that jazz, written in Dart.

Irishman ???? A generic programming language interpreter, linter, formatter, and all that jazz, written in Dart. Installation To install this package

Fairfield Programming Association 2 Oct 8, 2022
Hotel Booking Concept is a promo sample application inspired by

hotel-booking-concept-flutter Hotel Booking Concept is a promo sample application inspired by https://dribbble.com/shots/6821188-Hotel-Booking-App-Con

null 97 Nov 16, 2022
Flutter language pickers2 - Language pickers package for Dart and Flutter

language_pickers2 Notes: Original repository from github.com/gomgom, unfortunate

Charles Dyason 0 Feb 6, 2022