2d-inc / Flare-Flutter

Load and get full control of your Rive files in a Flutter project using this library.
https://rive.app/
MIT License
2.55k stars 470 forks source link

GPU exceeding 25ms frames while having a background image #239

Open DiogoTheCoder opened 4 years ago

DiogoTheCoder commented 4 years ago

I've created a Flare animation and have tried to use FlareActor to display it, however, I am experiencing lagginess when loading and running the animation. I have added an AssetImage to a BoxDecoration so it can appear in the background of my app. I then added a Column which includes the FlareActor.

import 'package:auto_size_text/auto_size_text.dart';
import 'package:bfit_tracker/theme.dart';
import 'package:bfit_tracker/ui/custom.dart';
import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/material.dart';

class OnboardingScreenOne extends StatelessWidget {
  const OnboardingScreenOne({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: EmptyAppBar(),
      backgroundColor: mainTheme.primaryColor,
      body: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/onboarding-background.png'),
            fit: BoxFit.none,
            alignment: Alignment.center
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              height: 200,
              child: FlareActor(
                'assets/animations/tonded_courses.flr',
                alignment: Alignment.center,
                animation: 'active',
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 24),
              child: AutoSizeText(
                'Welcome to BFit!',
                minFontSize: 22,
                maxLines: 1,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            SizedBox(height: 6),
            Padding(
              padding: EdgeInsets.only(left: 32),
              child: AutoSizeText(
                'Your personalised health buddy...',
                minFontSize: 18,
                maxLines: 1,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),

              ),
            ),
          ],
        ),
      ),
    );
  }
}

tonded_courses.flr.zip https://streamable.com/wlmgm