Enhance Your User Experience: Building Typing Indicators in Flutter

‍Uncovering the Purpose of Typing Indicators in Modern Applications

Typing indicators aren't just fun animations in our chat applications; they serve as a communication tool within the messaging feature, enhancing our interaction with other users. The concept of a typing awareness indicator is relatively simple, and you can observe it practically in popular messaging apps such as Facebook Messenger.

‍

The Role and Importance of Typing Indicators in Communication

Imagine a conversation you are having on Facebook Messenger. You see those tiny bubbles, right? Yes, those are the typing indicators. They aren't there just for aesthetics; they offer both a useful tool and a functional purpose.

Here's how a typing indicator works: When a user starts typing a message into the text field, an event, often referred to as a "typing event," is triggered. This typing event promptly activates the typing indicators, making them appear in your chat box.

Copy
1
2
3
4
5
     // Assume this is a simplified portion of code within a 'ChatPage' Flutter code
    if (_userIsTyping) {
      showTypingIndicator();
    }
     

While simple, having this typing awareness indicator is vital at both ends of the conversation. For example, when we see someone actively typing, we anticipate their response and may decide to wait before typing our own text. It is both a useful tool for pacing the conversation and improving the user experience. That's why, in this guide, we will walk you through the process of implementing typing indicators in your Flutter chat applications.

‍

Flutter's Building Blocks for a Typing Indicator

To fully appreciate the process of designing a typing indicator in Flutter, it's vital to understand the core concepts and components: Widget, State, and Animation.

‍

Understanding Widget, State, and Animation Concepts

In the context of a Flutter app, everything you build is a Widget, including the typing indicator. Widgets are the building blocks of a Flutter application, and they "paint" the visuals seen by a user on a device. They essentially describe what their view should look like given their current configuration and state.

State is information that can be read synchronously when the widget gets built and might change during the lifetime of the widget. For instance, if an indicator was visible when we started typing in a text box and swapped to hidden when we stopped typing, the visibility of the indicator is the state in this case. It's this state we need to manage when implementing a typing indicator.

To create a typing indicator, we need an understanding of how animations work in Flutter. Animations add fluidity to applications and elevate user interfaces. A simple, static typing indicator could just be a piece of text that says 'Typing...'. However, with animations, we can make a lively and dynamic indicator that involves moving bubbles or dots, further enhancing the user experience.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
     // Here is a simple implementation of a TypingIndicator that utilizes Widget, State, and Animation in Flutter
    
    class TypingIndicator extends StatefulWidget {
      final bool isVisible;
    
      TypingIndicator({ this.isVisible });
    
      @override
      TypingIndicatorState createState() => TypingIndicatorState();
    }
    
    class TypingIndicatorState extends State<TypingIndicator> with SingleTickerProviderStateMixin {
      AnimationController controller;
    
      @override
      initState() {
        super.initState();
        controller = AnimationController(vsync: this)... ;
      }
    
      @override
      dispose() {
        controller.dispose();
        super.dispose();
      }
    
      @override
      Widget build(context) {
        return (widget.isVisible) ? AnimatedBuilder(
          builder: ...,
          animation: controller,
        ) : Container();
      }
    }
     

‍

Developing the Typing Indicator Widget Structure

To provide an authentic real-time communication feel in our chat application, we need to create a customized typing indicator. Let's dive into the widget structure and see how we can embody the traditional mobile messaging look in our chat application.

‍

Initiating the Typing Indicator Stateful Widget

As previously mentioned, everything in Flutter is a widget. In this step, we will define a new stateful widget named TypingIndicator which will be in charge of our typing awareness indicator. To give it the desired look and feel, we'll customize it to accept properties such as the color of the bubble, the flashing circles' light, and dark colors, and of course, a boolean to keep track of whether the indicator should show.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
     // This is the code for our TypingIndicator StatefulWidget
    class TypingIndicator extends StatefulWidget {
      final bool showIndicator;
      final Color bubbleColor;
      final Color flashingCircleDarkColor;
      final Color flashingCircleBrightColor;
    
      TypingIndicator({
        this.showIndicator = false,
        this.bubbleColor = const Color(0xFF646b7f),
        this.flashingCircleDarkColor = const Color(0xFF333333),
        this.flashingCircleBrightColor = const Color(0xFFaec1dd),
      });
    
      @override
      State<TypingIndicator> createState() => _TypingIndicatorState();
    }
     

‍

Customizing Visual Elements of the Typing Indicator

With the widget in place, we'll need to customize the visuals to mimic a traditional typing indicator's look and feel. Think of Apple's iPhone messaging feature, where three animated dots mimic someone typing at the other end. We will be taking a similar approach by customizing our indicators with flashing circles or 'bubbles'.

Consider using different colors for your bubbles and circles, paired with Flutter animation capabilities, and create engaging, expressive, and appealing interactions that will captivate users, relieving the stress of waiting for a response!

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
     // Let's define the circle bubble as a StatelessWidget
    class CircleBubble extends StatelessWidget {
      final double size;
      final Color bubbleColor;
    
      CircleBubble({required this.size, required this.bubbleColor});
    
      @override
      Widget build(BuildContext context) {
        return Container(
          width: size,
          height: size,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: bubbleColor,
          ),
        );
      }
    }
    
    // We can then use multiple CircleBubble to create a set of bubbles in our typing indicator.
     

‍

Building the Space for the Typing Indicator

When we think about space usage within a chat application for typing indicators, two things come to mind. Firstly, indicators must be noticeable and should not transfer visual discomfort to the user. Secondly, we need to consider how, when a user stops typing, the indicator disappears gracefully, reducing the space it took before.

‍

Dilemmas of Space Allocation

An example of such implementation can be seen in Facebook Messenger. Deciding where to place the typing indicator and how to allocate space for it brings up intriguing dynamics in user interface discussion. The typing indicator doesn’t occupy any space when it isn’t displayed. Therefore, the indicator needs to grow in height when it appears and shrink in height when it disappears.

Copy
1
2
3
4
5
     // A TextField Widget which expands as one types and shrinks as text is deleted in Flutter
    TextField(
      maxLines: null,
    )
     

‍

Implementing Animated Space for Smooth Appearance

Our goal is to ensure that the appearance and disappearance of the typing indicator are seamless and smooth. We can achieve this by animating the height of the typing indicator's space. The height of the typing indicator could be the natural height of the speech bubbles within the typing indicator.

Copy
1
2
3
4
5
6
7
8
9
10
11
     // Implementation of an AnimatedBuilder which is displaying the indicator dynamically using SizedBox
    
    Widget build(BuildContext context) {
      return AnimatedBuilder(
        animation: _indicatorSpaceAnimation,
        builder: (context, child) {
          return SizedBox(height: _indicatorSpaceAnimation.value,);
        },
      );
    }
     

‍

Animating the Chat Bubbles

Having our structure ready for the typing bubble animation, let's dive into the intricate world of animation to bring our typing indicators to life. Animation is imperative to keep users engaged, and Flutter provides great tools to implement exciting animations for chat bubbles!

‍

Concept of Staggered Animations

To make our typing indicators engaging and give them a human-like nuance of typing, we'll use staggered animations. A staggered animation includes sequential, overlapping animations. It begins when the previous animation segment concludes, creating a sequence or overlapping effect. The example of typing animations in Apple's iPhone messaging system is a perfect real-world example of staggered animations!

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
     // This could represent a staggered animation in Flutter
    final AnimationController controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    
    // Drive a Tween, shifting the starting point to 15% and ending point to 60% of the controller's duration
    final Animation<double> animation = Tween(begin: 0, end: 1).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(
          0.15,
          0.60,
          curve: Curves.ease,
        ),
      ),
    );
     

‍

Steps to Implement Staggered Animations in Chat Bubbles

To implement staggered animations, we need to define separate animations for each bubble in our typing indicator. Using Flutter, we have the tools to easily animate the scale of the bubbles so that the bubbles are staggered whenever the showIndicator property changes.

In our typing indicator, the smallest bubble might start to scale up first, followed shortly after by the second bubble, and lastly, the large speech bubble.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
     // Displaying multiple CircleBubbles with different animations in the TypingIndicator
    Stack(
      children: [
        AnimatedBubble(
          animation: _smallBubbleAnimation,
          left: 8,
          bottom: 8,
          bubble: CircleBubble(size: 8, bubbleColor: widget.bubbleColor),
        ),
        AnimatedBubble(
          animation: _mediumBubbleAnimation,
          left: 10,
          bottom: 10,
          bubble: CircleBubble(size: 16, bubbleColor: widget.bubbleColor),
        ),
        AnimatedBubble(
          animation: _largeBubbleAnimation,
          left: 12,
          bottom: 12,
          bubble: StatusBubble(bubbleColor: widget.bubbleColor),
        ),
      ],
    );
     

‍

Incorporating Flashing Circles in the Typing Indicator

We've animated our chat bubbles, but the bubbles alone aren't enough to denote someone actively typing. To make the typing indicator more lively and informative, we introduce an additional element - flashing circles. For instance, in Apple's iPhone messaging system, the typing indicator displays three small circles that flash repeatedly, which we'll replicate in our Flutter app.

‍

Understanding the Concept of Flashing Circles

The sequence of flashing circles not only adds an appealing visual element but also simulates the rhythm of someone actively typing. Each circle flashes at a slightly different time, giving the impression of motion and rhythm, like a wave or the bouncing ball in a song's lyrics video.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
     // A simplified representation of how to use AnimatedBuilder for flashing circles
    AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Transform.scale(
          scale: animation.value,
          alignment: Alignment.center,
          child: child,
        );
      },
      child: buildCircle(),
    );
     

‍

Implementing Repeating Animation for Flashing Circles

To keep the circles flashing as long as the user is typing, we introduce a repeating AnimationController. This creates an indefinitely repeating animation that we can control to start when the user begins typing and to stop when the user finishes typing.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
     // Implementation of a repeating AnimationController in our TypingIndicator widget for flashing circles
    _repeatingController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1500),
    );
    
    // Overriding the _showIndicator and _hideIndicator methods to include the repeatingController
    void _showIndicator() {
      _appearanceController
        ..duration = const Duration(milliseconds: 750)
        ..forward();
      _repeatingController.repeat();
    }
    
    void _hideIndicator() {
      _appearanceController
        ..duration = const Duration(milliseconds: 150)
        ..reverse();
      _repeatingController.stop();
    }
     

Each circle calculates its color using a sine function, so the color changes gradually at the minimum and maximum points. We animate each circle's color within a specified interval within the overall animation time.

‍

Animate Your Creativity With Typing Indicators!

Wrapping up, it's clear that adding a small feature like a typing indicator to your Flutter chat application can drastically boost user engagement and transform the overall user experience. Implementing this attractive and efficient feature requires a blend of Flutter's core concepts such as Widget, State, and Animation, and may also involve dealing with more advanced topics like Staggered Animations, Flashing Circles, and Stateful Widgets. Despite being a seemingly simple feature, the typing indicator itself is a powerful testament to the magic one can infuse into a Flutter application with a deep understanding and masterful use of these core features. Flutter provides us with all the tools to animate our creativity, let's keep exploring and enhancing our apps, making them more intuitive, dynamic, and delightful for users!