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 doctorcommand 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_riveOpen 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 animationsTo download the dependencies, run:
flutter pub getCreate 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.rivThat'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.
