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 469 forks source link

Blur, Shadows not working #203

Closed nikitattt closed 4 years ago

nikitattt commented 4 years ago

Tried recently added Blur, Inner, Drop Shadows and found that they are not rendered in Flutter. Plugin version: 1.8.1, stable channel.

luigi-rosso commented 4 years ago

Hi @nikitattt, can you send a link to your file on https://rive.app?

nikitattt commented 4 years ago

Hi @luigi-rosso, here you go: https://rive.app/a/nikita.nvgames/files/flare/nixie-lamp

luigi-rosso commented 4 years ago

Thanks @nikitattt, could you post a screenshot of what you see in Flutter? I do see the effects, but some of them look wrong. I need to do a little more investigation but I'm still traveling for the next two days so it may take a little more time to get to the bottom of this. Here's what I see in Flutter, do you see the same thing?

image

One thing I did want to mention is that it looks like you're using a lot of effects on individual shapes, you can apply the effects to nodes too by grouping shapes together. This will be more performant at runtime.

Effizjens commented 4 years ago

Hey, I guess this is kind of the same problem. By adding an inner shadow there is also a blur effect. This is my rive file https://rive.app/a/Effizjens/files/flare/new-file .

This is what I see in Flutter. Screenshot_20191216-175851

And here is my code using flare_flutter: ^1.8.2 and flutter v1.12.13+hotfix.5.

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.amberAccent,
        body: FlareActor(
          "assets/File.flr",
          alignment: Alignment.center,
          fit: BoxFit.contain,
        ),
      ),
    );
  }
}

I saw that there is an blur value in the JSON file but for my understanding, this isn`t for the blur effect of the shape itself but for the innershadow to define how hard the shadow is.

nikitattt commented 4 years ago

@luigi-rosso yes, I see absolutely the same thing as in your example.

P.S. Thanks. I'll try to achieve the same effects with nodes. One more point I wanted to mention(not really related to this issue), when working with files that have many elements(example: https://rive.app/a/nikita.nvgames/files/flare/nixie) I notice a significant slowdown in client interface. I don't know if this is an issue and is it related to rive client rendering speeds. Maybe you have advice on how to organize many elements for fast work?

Chaitanyabsprip commented 4 years ago

I have the same issue what is the fix?

nikitattt commented 4 years ago

Hi @luigi-rosso! How this issue is going? Planned to use elements with shadows and blur in Flutter Clock Challenge which deadline is on 20 January...

avinath1998 commented 4 years ago

Yep same, still facing this shadow issue.

kingcla commented 4 years ago

Hi @luigi-rosso I am also facing the same problem (for the flutter clock challenge as well BTW). There is a shadow in my model and it appears blurred in Flutter. In Rive: image In Flutter: image

Can you please help us?

luigi-rosso commented 4 years ago

Apologies for the delay on this. Could everyone who is facing the issue please make sure to update your posts to include a link to your file (or please email the .flr2d files to luigi@rive.app)? Hoping to get this fixed in the next couple of days.

Chaitanyabsprip commented 4 years ago

https://rive.app/a/chaitanyabsprip/files/flare/neu-circle @luigi-rosso

luigi-rosso commented 4 years ago

Thanks! Please try version flare_flutter: ^2.0.1, where it should be fixed.

kingcla commented 4 years ago

@luigi-rosso I just tried, it works!! Thanks ;)