Integrating Flare into a Flutter app

As you have seen, Flare is a great tool to build animations, but it would be completely useless for our purposes if we couldn't use them in a Flutter app. These are a few easy steps to help us do so:

  1. Adding the flare_flutter package
  2. Exporting the Flare animation as a file
  3. Including the exported file into the app assets
  4. Declaring the assets into the pubspec.yaml file

Once the setup is complete, we'll also need to integrate Flare in our Dart code so that we can interact with our users and show them the relevant animation. Let's begin, as follows: 

  1. Create a new Flutter project, calling it 'Dice', and update the main.dart file so that it contains the following code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dice',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: Scaffold(),
    );
  }
}
  1. Create a new folder in the root of your app, called assets.
  2. We need to get back briefly to our Flare files, only to export the files that we will add to the assets folder. Let's go to the rive.app website, and from the dice file, press the Export button at the top right of the screen, and select the Export menu, choosing the Binary option.
  3. Depending on your system, the file that should be called dice.flr will be downloaded locally. Move the downloaded file to the assets folder that you created in Step 2.
  4. Open the pubspec.yaml file and add the flare_flutter dependency (please check the right version in the library page), as follows:
dependencies:
flutter:
sdk: flutter
flare_flutter: ^1.8.0
  1. Still in the pubspec.yaml file, also add the animation in the assets section, like this:
assets:
- assets/dice.flr

Now, the setup is complete. Let's add the animations to our code next!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.12.50