crdzbird / floaty_chathead

Flutter Plugin to create your own floating chathead

Floaty_chathead

One thing that i always love was the simplicity that messenger had using Chatheads.

And for that reason this plugin was created with all the love that us the developers have 💓

null-safety version

dependencies:
  floaty_head: ^1.1.0

If you don't wanna use the null-safety, please use the version: 1.1.0

dependencies:
  floaty_head: ^1.1.0

also if you need to add interaction between your code and any button, please add this to your Kotlin/Java class.

override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
        Application().onCreate()
    }

Application.kt

class Application : FlutterApplication(), PluginRegistry.PluginRegistrantCallback {
      override fun onCreate() {
          super.onCreate()
          FloatyHeadPlugin().setPluginRegistrant(this)
          Managment.pluginRegistrantC = this
      }

     override fun registerWith(registry: PluginRegistry) {
        FloatyHeadPlugin().registerWith(registry.registrarFor(this.packageName))
     }
  }

for any doubt please check the example folder.

Examples

To set a header with any text or button that you desire the only thing that you need to add is the following code. Like any other CustomWidget!! :D

final header = FloatyHeadHeader(
    title: FloatyHeadText(
        text: "Outgoing Call", fontSize: 10, textColor: Colors.black45),
    padding: FloatyHeadPadding.setSymmetricPadding(12, 12),
    subTitle: FloatyHeadText(
        text: "8989898989",
        fontSize: 14,
        fontWeight: FontWeight.bold,
        textColor: Colors.black87),
    decoration: FloatyHeadDecoration(startColor: Colors.grey[100]),
    button: FloatyHeadButton(
        text: FloatyHeadText(
            text: "Personal", fontSize: 10, textColor: Colors.black45),
        tag: "personal_btn"),
  );

You can also setup your body.

final body = FloatyHeadBody(
    rows: [
      EachRow(
        columns: [
          EachColumn(
            text: FloatyHeadText(
                text: "Updated body", fontSize: 12, textColor: Colors.black45),
          ),
        ],
        gravity: ContentGravity.center,
      ),
      EachRow(columns: [
        EachColumn(
          text: FloatyHeadText(
              text: "Updated long data of the body",
              fontSize: 12,
              textColor: Colors.black87,
              fontWeight: FontWeight.bold),
          padding: FloatyHeadPadding.setSymmetricPadding(6, 8),
          decoration: FloatyHeadDecoration(
              startColor: Colors.black12, borderRadius: 25.0),
          margin: FloatyHeadMargin(top: 4),
        ),
      ], gravity: ContentGravity.center),
      EachRow(
        columns: [
          EachColumn(
            text: FloatyHeadText(
                text: "Notes", fontSize: 10, textColor: Colors.black45),
          ),
        ],
        gravity: ContentGravity.left,
        margin: FloatyHeadMargin(top: 8),
      ),
      EachRow(
        columns: [
          EachColumn(
            text: FloatyHeadText(
                text: "Updated random notes.",
                fontSize: 13,
                textColor: Colors.black54,
                fontWeight: FontWeight.bold),
          ),
        ],
        gravity: ContentGravity.left,
      ),
    ],
    padding: FloatyHeadPadding(left: 16, right: 16, bottom: 12, top: 12),
  );

and even the footer!!!

final footer = FloatyHeadFooter(
    buttons: [
      FloatyHeadButton(
        text: FloatyHeadText(
            text: "Simple button",
            fontSize: 12,
            textColor: Color.fromRGBO(250, 139, 97, 1)),
        tag: "simple_button",
        padding: FloatyHeadPadding(left: 10, right: 10, bottom: 10, top: 10),
        width: 0,
        height: FloatyHeadButton.WRAP_CONTENT,
        decoration: FloatyHeadDecoration(
            startColor: Colors.white,
            endColor: Colors.white,
            borderWidth: 0,
            borderRadius: 0.0),
      ),
      FloatyHeadButton(
        text: FloatyHeadText(
            text: "Focus button", fontSize: 12, textColor: Colors.white),
        tag: "focus_button",
        width: 0,
        padding: FloatyHeadPadding(left: 10, right: 10, bottom: 10, top: 10),
        height: FloatyHeadButton.WRAP_CONTENT,
        decoration: FloatyHeadDecoration(
            startColor: Color.fromRGBO(250, 139, 97, 1),
            endColor: Color.fromRGBO(247, 28, 88, 1),
            borderWidth: 0,
            borderRadius: 30.0),
      )
    ],
    padding: FloatyHeadPadding(left: 16, right: 16, bottom: 12),
    decoration: FloatyHeadDecoration(startColor: Colors.white),
    buttonsPosition: ButtonPosition.center,
  );

DONE:

• PERMISSIONS ON FIRST RUN.
• issue with button clicked to retrieve the tag of the button pressed from android into flutter.
• Custom Views for Header, Body, Footer.
• Customization of Notification Text.
• Customization of Notification Icon.
• Customization of Bubble Icon.
• Customization of Close Icon.
• Customization of Close Background Icon.
• FloatyHead runs even when the app is killed.
• Added documentation to all the classes used in DART and KOTLIN.

Contributing

All contributions are welcome!

If you like this project then please click on the 🌟 it'll be appreciated or if you wanna add more epic stuff you can submite your pull request and it'll be gladly accepted 🙆‍♂️

or if you have an idea please let me know to my email: [email protected].

floaty_chathead's Issues

Running in background

Hi!
this lib is great!!

Is it possible to open the chathead when closing / kill the app, and close the chathead when reopening the app?

PASSING A FUNCTION TO FLOATY HEAD BUTTON

Hello
How do we pass a function to the floaty head button, as there is no 'onPressed' or 'onTap' function.

How to launch application from chathead?

How can we launch our application (if it is not running already, but chathead is open) from the chathead?
I have created chathead with headers and added a FloatyHeadButton, click on this button app should open with its main activity.

crash when open

When calling floatyHead.openBubble(); , app crash

E/AndroidRuntime(24658): java.lang.AssertionError: Assertion failed
E/AndroidRuntime(24658): 	at ni.devotion.floaty_head.services.FloatyContentJobService.onStartCommand(FloatyContentJobService.kt:44)
E/AndroidRuntime(24658): 	at android.app.ActivityThread.handleServiceArgs(ActivityThread.java:4087)
E/AndroidRuntime(24658): 	at android.app.ActivityThread.access$1800(ActivityThread.java:219)
E/AndroidRuntime(24658): 	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1891)
E/AndroidRuntime(24658): 	at android.os.Handler.dispatchMessage(Handler.java:107)
E/AndroidRuntime(24658): 	at android.os.Looper.loop(Looper.java:214)
E/AndroidRuntime(24658): 	at android.app.ActivityThread.main(ActivityThread.java:7356)
E/AndroidRuntime(24658): 	at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime(24658): 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
E/AndroidRuntime(24658): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
I/Process (24658): Sending signal. PID: 24658 SIG: 9

How do you show and control multiple chatheads

i am actually trying to build a chat app and can't seem to get multiple chatheads working.
The first chathead works as expected but the one after don't

// i have a list of floatyHeads
final List<FloatyHead> allHeads = [];


 if (allHeads.length <= 2) {
              var f = FloatyHead();

              /// the method [updateFloatyHeadContent] comes from floatyHead itself.
              /// it allows customization of the Floating View at runtime.
              await f.updateFloatyHeadContent(
            // This is a custom implementation of header arguments. it works as expected
                header: HeaderWithButtons([
                  HeaderButton('${allHeads.length} ' + 'Open App', 'click'),
                  HeaderButton('${allHeads.length} ' + "I\'ll get back to you in 5", 'new'),
                  HeaderButton('${allHeads.length} ' + 'Close icon', 'close'),
                ],
        ),
              );
              f.setIcon('assets/${allHeads.length + 1}.jpeg');
              // opens the Floating View/Bubble also asks for permission on first execution.
              f.openBubble();
              allHeads.add(f);
}

Add functionality when app is destroyed or finished, chathead remains open

Currently the app works fine when everything is on the background, however when the app is destroyed so does the chathead, The error that sends saids that currently that chathead isn't registered into any service. So the solution to that issue maybe related with that.

Cast Error

Was having a cast-error when setting an icon, notification-icon and notification title.

_CastError (type 'Future' is not a subtype of type 'FutureOr' in type cast)

Modifying package source to FutureOr<dynamic> worked but should be ported to package update.

Update

Come on man its been 11 months now

can't assign text to variable type string

i can't use txtMsg variable that type string. not error but not show any txt, i can log txtMsg after update body when openbubble it's blank.

  EachRow(columns: [
    EachColumn(
      text: FloatyHeadText(
          text: txtMsg,
          fontSize: 12,
          textColor: Colors.black87,
          fontWeight: FontWeight.bold),
      padding: FloatyHeadPadding.setSymmetricPadding(6, 8),
      decoration: FloatyHeadDecoration(
          startColor: Colors.black12, borderRadius: 25.0),
      margin: FloatyHeadMargin(top: 4),
    ),
  ]

Doesn't display chat bubble

... I tried to implement this plugin into my app, but without any success. I see an "ongoing" notification, but nothing similar to chat bubbles.

Then I cloned the repository and tried to run the example as it is, but the same result. All I can see is the notification, but nothing else.

Flutter 2.2.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b22742018b (5 weeks ago) • 2021-05-14 19:12:57 -0700
Engine • revision a9d88a4d18
Tools • Dart 2.13.0

Also - plugin generates a lot of exceptions, even the example:

E/flutter ( 9710): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: type 'Future<dynamic>' is not a subtype of type 'FutureOr<int>' in type cast
E/flutter ( 9710): #0      FloatyHead.setCloseIcon (package:floaty_head/floaty_head.dart:179:9)
E/flutter ( 9710): #1      _Home.setCloseIcon (package:floaty_head_example/main.dart:300:24)
E/flutter ( 9710): #2      _Home.build.<anonymous closure> (package:floaty_head_example/main.dart:227:36)
E/flutter ( 9710): #3      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:989:21)

callback does not called

Non Android Platforms: While app is running overlay support

Feature request to have this work for other platforms by using a simple in app overlay if not running on Android.

how to remove notification

not working on high gradle

not working on high gradle. Example: classpath 'com.android.tools.build:gradle:4.1.0'

Update the package

its been 9months comeon ..do something