How to create a Typing Indicator in Flutter

Typing inputs are processed across all streams with the typing events feature turned on in all official SDKs straight out of the box. Flutter developers may display to channel participants who are now typing by using typing indicators. With the use of the CLI or straight from the Dashboard, this functionality may be turned on and off according to the channel.

To accomplish this, when you’re employing one of the standard SDK libraries, you must make sure specific typing indicators are turned on. However, if you plan on constructing your UI on the upper edge, you must take care of the following four issues:

• Send an event typing. start when the user starts typing
• Send an event typing. stop after the user stops typing

Switch the typing indication UI by handling the two events.

To show that typing is taking place in a thread, the expertise of Flutter can use the parent id property of the event.

How to submit typing the Start and Stop notifications?

To let the receiver know that the logged-in user has begun typing, use the startTyping() function. This data will be sent to the recipient in the MessageListener class’s onTypingStarted() function. You must employ the TypingIndicator classes to transmit the typing indication.

To let the recipient know that the logged-in individual has finished typing, one can use the endTyping() function. The MessageListener class’s onTypingEnded() function is where the recipient receives this data. It would be best to employ the TypingIndicator classes to transmit the typing indication. To prevent issues, developers should abide by basic recommended practices while delivering events in response to user input.

• Send only in writing
• Begin as soon as the user begins typing
• Text messaging
• Cease a few seconds after the final keystroke was made

What is quick typing indicators?

Or, to put it another way, how can I, as a receiver, know that someone is typing? The enrolled MessageListener class’s onTypingStarted() and onTypingEnded() methods are where Flutter programmers will find the typing indications.

Contemporary chat programmes display indicators while other people are actively composing answers. These cues assist you, along with the other person, avoid having impulsive or contradictory reactions. This tutorial shows you how to create a thought bubble typing indication that changes its visibility.

Also Read: Flutter Best Practices to Follow in 2022

How will you configure the widget for the typing indication?

The typing indication has a widget to implement the change everywhere in your programme. The typing indication must be a stateful widget, like any other widget that manages animations. The boolean answer in the Flutter widget takes control if the indicator is shown. This speech-bubble-typing indicator takes two colours for the bright and dark stages of the flicker circles inside the giant speech bubble, in addition to one for the bubbles themselves.

Create the TypingIndicator stateful widget.

class TypingIndicator extends StatefulWidget {
  const TypingIndicator({
    super.key,
    this.showIndicator = false,
    this.bubbleColor = const Color(0xFF646b7f),
    this.flashingCircleDarkColor = const Color(0xFF333333),
    this.flashingCircleBrightColor = const Color(0xFFaec1dd),
  });

  final bool showIndicator;
  final Color bubbleColor;
  final Color flashingCircleDarkColor;
  final Color flashingCircleBrightColor;

  @override
  State<TypingIndicator> createState() => _TypingIndicatorState();
}

class _TypingIndicatorState extends State<TypingIndicator> {
  @override
  Widget build(BuildContext context) {
    // TODO:
    return const SizedBox();
  }
}

How to place the type indication?

When hidden, the typing indication doesn’t take up any room. The indication must thus increase in height upon appearance and decrease in height upon disappearance.

The speech bubbles inside the typing indication may be the same height as the typing indicator. The speech bubbles, meanwhile, expand in a portion of the curve. If this flexibility swiftly pushed all the conversational messages up or down, it would be highly visually startling.

However, the typing indicator’s height activates on its own, increasing smoothly even before bubbles appear. The height steadily decreases to zero as the bubbles vanish. For this functionality, the elevation of the typing indication needs explicit visual effects.

Apply the animation variable to the SizedBox panel inside the typing indicator after creating an effect for the elevation of the typing indicator.

class _TypingIndicatorState extends State<TypingIndicator>
    with TickerProviderStateMixin {
  late AnimationController _appearanceController;
  late Animation<double> _indicatorSpaceAnimation;

  @override
  void initState() {
    super.initState();

    _appearanceController = AnimationController(
      vsync: this,
    );

    _indicatorSpaceAnimation = CurvedAnimation(
      parent: _appearanceController,
      curve: const Interval(0.0, 0.4, curve: Curves.easeOut),
      reverseCurve: const Interval(0.0, 1.0, curve: Curves.easeOut),
    ).drive(Tween<double>(
      begin: 0.0,
      end: 60.0,
    ));

    if (widget.showIndicator) {
      _showIndicator();
    }
  }

  @override
  void didUpdateWidget(TypingIndicator oldWidget) {
    super.didUpdateWidget(oldWidget);

    if (widget.showIndicator != oldWidget.showIndicator) {
      if (widget.showIndicator) {
        _showIndicator();
      } else {
        _hideIndicator();
      }
    }
  }

  @override
  void dispose() {
    _appearanceController.dispose();
    super.dispose();
  }

  void _showIndicator() {
    _appearanceController
      ..duration = const Duration(milliseconds: 750)
      ..forward();
  }

  void _hideIndicator() {
    _appearanceController
      ..duration = const Duration(milliseconds: 150)
      ..reverse();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _indicatorSpaceAnimation,
      builder: (context, child) {
        return SizedBox(
          height: _indicatorSpaceAnimation.value,
        );
      },
    );
  }
}

Depending if the entering showIndicator argument is real or false, the TypingIndicator moves graphics further or backwards.

The animation that regulates height employs a variable graphics curve based on its orientation. The voice bubbles must be rapidly accommodated as the animation advances. Because of this, the forward curve only uses the first ever 40% of the total appearance visual effects for the elevation visual effects.

The speech bubbles must have adequate time to vanish before the width is reduced in the animation’s reversal. An excellent technique to achieve this behaviour is via an ease-out gradient that uses all the scheduled space.

When the _indicatorSpaceAnimation evolves, the AnimatedBuilder widget restructures the SizedBox widget. Rather than employing AnimatedBuilder, Flutter engineers may rebuild the whole gadget tree within TypingIndicator by calling setState() each time the special effects changes. This method of calling setState() is OK, but reconstructing the entire widget branch to adjust the SizedBox widget’s height consumes CPU cycles as more widgets are contributed to the widget tree.

Also Read: FocusableActionDetector Widget in Flutter

How to create animated speech bubbles?

Three speech bubbles are shown on the typing indication. Round and tiny bubbles make up the first two. A rectangular bubble with a few flickering circles makes up the third one. The bottom left corner of the empty area has these bubbles spaced out in a random pattern.

It seems as though each bubble comes after the previous one by modulating its scaling from 0% to 100% at slightly different periods for each bubble. It’s referred to as staggered graphics.

Starting from the lower left, colour the three bubbles where you want them to be. After that, adjust the bubble scale, which varies with the showIndicator parameter, staggering the bubbles.

How to animate the circled lights?

The typing indicates three little circles that flash rapidly inside the big speech bubble. The timing of each circle’s flashing makes it appear as if a single illumination flows in front of each circle. These graphics of flashing lights never stops. To accomplish the circular flashing, add a recurring AnimationController, then feed it through the StatusBubble.

To create subtle colour changes at the lowest and highest points, each circle determines its colour using only a sine (sin) function. Each circle’s colour also uses a percentage of the total animation time to animate within a predetermined interval.
These spacing locations produce the illusion of a single source of illumination moving behind a trio of dots.

A typing indication that alerts users when somebody is typing is already available. The indicator fades in and out until the other data is transferred and repeats visuals.

Conclusion

This article taught you how to create the typing indicator in the Flutter app development project. If you still have any doubts or questions about Flutter app development services, then connect with the Bosc Tech Labs, who are ready to help you!

Frequently Asked Questions (FAQs)

1. How will the typing indicator work?

The push notifications as the typing indicator mean when the user begins typing a message, you will get the push notification on your device, which will alert you. These push notifications are helpful and effective in getting attention and making you engage with an application.

2. How do you integrate the typing indicators in Flutter?

To utilize the typing indicator feature, you must first build the channel and enable the chat service. Once a chat is enabled, a typing indicator feature will be allowed automatically via a setUseTypingIndicator() setter method of ChannelFragment.

3. Which pattern is excellent for Flutter development?

A repository pattern is valuable and helpful for all the Flutter programmers as they learn how to code and organize them in a better and more manageable way.

Book your appointment now