• Stars
    star
    141
  • Rank 259,971 (Top 6 %)
  • Language
    Dart
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Custom Floating Action Button (FAB) library like clapping effect on Medium

👏 MediumClapFlutter

Say Thanks! Twitter

A Custom Floating Action Button (FAB) library like clapping effect on Medium.

The source code is 100% Dart, and everything resides in the /lib folder.

Show some ❤️ and star the repo to support the project

GitHub stars GitHub forks GitHub watchers GitHub followers
Twitter Follow

Open Source Love License

YouTube Channel

MTechViral

Facebook Group

Let's Flutter

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:

  medium_clap_flutter: <latest_version>

Usage

ClapFAB for Icon

import 'package:medium_clap_flutter/medium_clap_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return Center(
    //Use this child anywhere in your app
      child: ClapFAB.icon(
        defaultIcon: FontAwesomeIcons.heart,
        filledIcon: FontAwesomeIcons.solidHeart,
        countCircleColor: Colors.green,
        defaultIconColor: Colors.green,
        hasShadow: true,
        sparkleColor: Colors.green,
        shadowColor: Colors.green,
        filledIconColor: Colors.green,
      ),
    );
  }
}

ClapFAB for Image

import 'package:medium_clap_flutter/medium_clap_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return Center(
    //Use this child anywhere in your app
      child: ClapFAB.image(
        defaultImage: "images/clap.png",
        filledImage: "images/clap.png",
        countCircleColor: Colors.red,
        hasShadow: true,
        sparkleColor: Colors.red,
        shadowColor: Colors.red,
        defaultImageColor: Colors.red,
        filledImageColor: Colors.red,
      ),
    );
  }
}

🎨 Customization and Attributes

All customizable attributes for ClapFab

Attribute Name Default Value Description
defaultIcon/defaultImage Icons.favorite_border/"images/clap.png" The default icon/image of the ClapFab button
filledIcon/filledImage Icons.favorite/"images.clap.png" The filled icon/image after clapping of the ClapFab button
defaultIconColor/defaultImageColor Colors.blue The color of default icon/image of the ClapFab button
filledIconColor/defaultImageColor Colors.blue The filled color of icon/image after clapping of the ClapFab button
hasShadow true Whether to have shadow or not around ClapFab button
countCircleColor Colors.blue The color of count's circle background
countTextColor Colors.white The color of count's circle text
sparkleColor Colors.blue The color of sparkels around the count
shadowColor Colors.blue The color of the shadow
floatingOutlineColor Colors.white The outline color/ border color of the ClabFab button
floatingBgColor Colors.white The Background color of the ClabFab button
initCounter 0 Initial counter value
maxCounter NOT_LIMIT_INCREMENT (-1) Maximum counter value

Clap Count

Use one of this properties clapFabCallback or clapUpCallback to get the clap count

ClapFAB.image(
        clapFabCallback: (int counter)=>print(counter),
      );
      

OR

ClapFAB.icon(
        clapFabCallback: (int counter)=>print(counter),
      );

OR

ClapFAB.icon(
        clapUpCallback: (int counter)=>print(counter),
      );

📃 Inspired from

💰 Donations

This project needs you! If you would like to support this project's further development, the creator of this project or the continuous maintenance of this project, feel free to donate. Your donation is highly appreciated (and I love food, coffee and beer). Thank you!

PayPal

  • Donate $5: Thank's for creating this project, here's a tea (or some juice) for you!
  • Donate $10: Wow, I am stunned. Let me take you to the movies!
  • Donate $15: I really appreciate your work, let's grab some lunch!
  • Donate $25: That's some awesome stuff you did right there, dinner is on me!
  • Donate $50: I really really want to support this project, great job!
  • Donate $100: You are the man! This project saved me hours (if not days) of struggle and hard work, simply awesome!
  • Donate $2799: Go buddy, buy Macbook Pro for yourself!

Of course, you can also choose what you want to donate, all donations are awesome!

👨 Developed By

Pawan Kumar

GDE (Google Developer Expert) for Flutter. Passionate #Flutter, #Android Developer. #Entrepreneur #YouTuber

👍 How to Contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

📃 License

Copyright (c) 2018 Pawan Kumar

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

More Repositories

1

FlutterExampleApps

[Example APPS] Basic Flutter apps, for flutter devs.
Dart
18,318
star
2

Flutter-UI-Kit

Flutter app for collection of UI in a UIKit
Dart
6,018
star
3

Flutter-Music-Player

Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.
Dart
1,557
star
4

FlutterWhatsAppClone

Building a WhatsApp Clone in Flutter.
Dart
1,507
star
5

VelocityX

A minimalist Flutter framework for rapidly building Flutter apps.
Dart
1,421
star
6

FlutterWithFirebase

A Flutter app with firebase libraries implementation
Dart
660
star
7

GDG-DevFest-App

An App Template For GDG DevFest
Dart
631
star
8

Flutter-Instagram-UI-Clone

Instagram Ui Clone made using Flutter.
Dart
528
star
9

30DaysOfFlutter

Learn Flutter in 30 Days
Dart
400
star
10

Flute-Music-Player

Flute Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.
Java
317
star
11

CryptoApp

Cryptocurrency App with MVP Design Pattern to track all the coins data in realtime for android & iOS . Written in dart using Flutter SDK.
Dart
294
star
12

PKSkeleton

A Facebook & Twitter Like Card Loading Shimmer Skeleton Library.
Dart
283
star
13

PokemonApp

Pokemon App with animations and beautiful UI
Dart
269
star
14

FlutterQRScanner-App

Ruby
253
star
15

FlutterStackOverflowApp

Flutter App using the stack overflow questions api which we made using django.
Dart
233
star
16

AI-Radio

This is a radio app where you can ask Alan AI to play some music.
C++
227
star
17

ChatGPT-Flutter-AIChatBot

A Chatbot chat app built using the Flutter framework and OpenAI's GPT-3 language model.
C++
204
star
18

PortfolioX

Responsive Portfolio App Made With Flutter With VelocityX
Dart
194
star
19

Flutter-Sqflite-MVP

An Login Page App in Flutter with MVP and SQFLITE ( SQLITE) Implementation.
Dart
180
star
20

myportfolio

Portfolio Page created using Flutter Web
Dart
161
star
21

FlutterWidgets

Collection of all the widgets with their tutorial
Dart
148
star
22

iampawan

Pawan Kumar Portfolio
138
star
23

IndiaBeatsCovid

A platform to share crowdsourced information of plasma donors, hospital beds and oxygen suppliers to help COVID patients
Dart
131
star
24

FlutterTicTacToe

Build Tic Tac Toe Game in Flutter
Dart
123
star
25

Flutter-Walkthrough

A new Flutter package which helps developers in creating walkthrough of their app.
Dart
120
star
26

FlutterLoginPageBloc

Dart
108
star
27

FlutterQuizApp

Dart
105
star
28

flutterlogin

Makefile
88
star
29

Coronavirus-Warrior

A Flutter project to track & help to fight from coronavirus.
Dart
83
star
30

fluttercalculator

Calculator App written in dart using Flutter
Dart
81
star
31

FlutterEssentialEnglish

Flutter Essential English Course For MTechViral School
Dart
79
star
32

fluttersignatureview

Dart
75
star
33

FlutterAuthFaceID-FingerPrint

Dart
73
star
34

FlutterPDFViewer

Dart
72
star
35

TFLite-Flutter

Dart
72
star
36

FlutterGoogleMaps

Dart
69
star
37

VelocityXApp

A flutter documentation app for VelocityX
Dart
64
star
38

Cocktail-App

Flutter beautiful cocktail app.
Dart
60
star
39

FlutterDownloadFilesWithProgress

Dart
60
star
40

FlutterAR

Dart
59
star
41

ReactChakraPortfolio

This project was bootstrapped with Chakra UI & Create React App
JavaScript
59
star
42

BMI-Calculator-App

BMI Calculator Flutter App with State Management
Dart
58
star
43

FlutterBackdrop

Demo of how to make a backdrop widget with a front and back panel.
Dart
57
star
44

PKNetflix

PkNetflix is a netflix clone built using Flutter & Appwrite
Dart
55
star
45

DevfestTutorialApp

Dart
53
star
46

FlutterUtilsCollection

Dart
52
star
47

FlutterGameOfThrones

Dart
52
star
48

FlutterChatApp

Flutter Chat App with localization - powered by Stream
Dart
52
star
49

flutter_websocket

WebSocket Demo In Flutter
Dart
51
star
50

FlutterShoppingCart

Dart
50
star
51

Redux-Tutorial-Flutter

A simple flutter app with demo implementation of redux.
Dart
46
star
52

Flutter-Dynamic-Theming

Flutter: Dynamic Theming | Change Theme At Runtime
Dart
45
star
53

MusicPlayer

Upcoming Material Design Music Player
Java
43
star
54

frenzychatapp

Frenzy Chat App is written in flutter.
Dart
42
star
55

VxState

Another state management solution
Dart
41
star
56

TrillApp

Dart
40
star
57

JetpackComposeLooks

Compose UI Samples
Kotlin
40
star
58

Flutter_Click_Pick_Crop_Compress

How to click, pick, crop and compress an image
Dart
39
star
59

FlutterBackgroundFetch

Dart
39
star
60

FlutterExpandableAndStickyHeaderList

Dart
38
star
61

FlutterBottomSheet

Dart
38
star
62

FlutterLooks

Dart
38
star
63

FlutterWithPython

Making flutter apps using Python
Python
36
star
64

DartSOLIDPrinciple

Demo of solid principle in Dart
Dart
36
star
65

FlutterGenderPredictor

Dart
33
star
66

flutter_connectivity

Dart
31
star
67

FlutterEssentialHindi

Flutter Essential Hindi Course For MTechViral School
Dart
30
star
68

Learning-RxDart

Dart
29
star
69

GOT_FLUTTER_PWA

Dart
28
star
70

FlutterForWebDemoApp

Dart
27
star
71

BreathingFlutter

A breathing Appbar and widget library in Flutter.
Dart
27
star
72

FunnyBones

An app for jokes which follows clean architecture principles, well structured and tested.
Dart
27
star
73

FlutterFlare-Basic

Flare 2D Dimension.
Dart
25
star
74

PokemonAppAngularDartFirebase

Dart
25
star
75

GifSearchEngine

Dart
25
star
76

VelocityXAndroidCompose

A minimalist framework for rapidly building Jetpack compose apps.
Kotlin
24
star
77

Flutter-Best-Packages

Dart
24
star
78

FlutterAnimatedAgeCalculatorApp

An age calculator app with animation.
Dart
24
star
79

AnimationSeries

Dart
24
star
80

FUI01-NikeWebFlutter

Dart
24
star
81

FlutterChristmasTree

Ruby
24
star
82

FlutterForms

Dart
23
star
83

flutter_pull_to_refresh

Dart
23
star
84

FlutterBuilder

Dart
23
star
85

DartAdvanced

Collection of Dart Advanced
Dart
22
star
86

Flutter-Routes

Tutorial about routes, push and pushNamed
Dart
22
star
87

FlutterToastPlugin

A new Flutter plugin for showing toast in android and ios.
Ruby
21
star
88

FlutterAutoJSONModel

Dart
21
star
89

AddFlutter2ExistingAndroidApp

Tutorial for integrating flutter to your new or existing android app.
Java
21
star
90

MultiX

Provide an easy way to make responsive and adaptive Flutter multi-platform applications.
Dart
21
star
91

ProjectFPL

Flutter Practice Live Series
C++
19
star
92

DartQuizApi

In this tutorial, we'll create a Quiz application using AQUEDUCT FRAMEWORK.
Dart
19
star
93

FlutterCollapsingToolbar

Dart
19
star
94

Click2Analyze-AndroidDevChallenge

An app to analyze the text and fixing the anomaly of the message that deviates from what is standard, normal, or expected. #AndroidDevChallenge
19
star
95

GOT2019

Dart
17
star
96

JetpackExample

Kotlin
16
star
97

FlipperWidget

Dart
16
star
98

VxFluentUI

Based on Microsoft Fluent Design System and made using the help of Flutter VelocityX.
Dart
16
star
99

MusicPlayer2018

Android Music Player App 2018 written in Kotlin using Anko with the help of MPlay Finder library.
Kotlin
16
star
100

FlutterAngel

A Flutter App with Angel backend.
Dart
15
star