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 🥳.
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!
Before starting this codelab, please ensure you have the following:
flutter doctorcommand does not give any errors
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.