Codelabs

Flutter Chat and Rive Animation

by
Gordon

Gordon

2 months ago

  • 01

    Introduction

  • 02

    Stream App

  • 03

    Chat Initialisation

  • 04

    User Connection Page

  • 05

    Channels List Page

  • 06

    Channel Page

  • 07

    Animated Reactions

  • 08

    Animated Stickers

Codelabs

Flutter Chat and Rive Animation

by
Gordon

Gordon

2 months ago

Overview

Welcome fellow Viking! The year is 2022 and just like the rest of the world, Vikings are also working remotely. To achieve maximum efficiency in the office battlefield all Vikings need the right tools to communicate. In this codelab, we'll show you how you can create your own chat application, and also delight your Viking friends with animated stickers and reactions!

Don't be afraid, we'll walk you through each step on your journey to Valhalla - no prior Viking experience needed.

A big thanks to Rive for creating these animations and making this codelab possible 🥳.

Build Vikings

Get a chance to win one of two Bose Noise Cancelling Headphones.

All you have to do for a chance to enter is complete this codelab and follow the instructions at the very end. Good luck!

Prerequisites

Before starting this codelab, please ensure you have the following:

  • Flutter setup and installed
  • flutter doctor command does not give any errors
  • Android or iOS device/emulator
  • The Rive animation files, which you can download here

Project Setup

Create a new Flutter project in a directory of your choosing. You can name your project whatever you like, but for this codelab we are going to call our project stream_rive:

flutter create stream_rive

Open the project in your preferred IDE, and go to the pubspec.yaml file and add the following dependencies:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  stream_chat_flutter: ^3.3.2 # To add chat functionality
  rive: ^0.8.1 # To add animations

To download the dependencies, run:

flutter pub get

Create an assets folder at the top level of your Flutter project and add the animation files. Then in pubspec.yaml include the Rive animation files:

flutter:
  uses-material-design: true
  assets:
    - assets/rive_stickers.riv
    - assets/stream_reactions.riv

That's it! The first step is done!

⚠️ Note! Make sure to use the versions shown above to easily follow along with this codelab. Future versions of Rive and Stream Chat Flutter may have breaking changes.

2022 © Stream.io, Inc. All Right Reserved.