rive-app / rive-app/rive-flutter
Shaders not working on web
Nobody has claimed this yet.
- Dominant language
- Dart
- Stars
- 1.5k
- Forks
- 240
- PR merge metrics
- No merged PRs in 30d
Description
Submission checklist
- I have confirmed the issue is present in the latest version of the
riveFlutter package - I have searched the documentation and forums and could not find an answer
- I have searched existing issues and this is not a duplicate
Description
I flagged this on discord but doing so again here with all repro files. trying the basic shader example from the site this works in flutter (3.41.8) on macos but on web I get the following runtime error:
:: context:gpuCanvas() requires a RenderContext — call setRenderContext() first
There does not appear to be an exposed way to call this manually in the flutter API or luau scripting
Reproduction steps / code
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart' as rive;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await rive.RiveNative.init();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Rive Painter Template',
home: Scaffold(
body: Stack(
children: [
GamePainterWidget(),
],
),
),
);
}
}
///-----------------------------------------------------------------------------
///-----------------------------------------------------------------------------
class GamePainterWidget extends StatefulWidget {
const GamePainterWidget({super.key});
@override
GamePainterWidgetState createState() => GamePainterWidgetState();
}
class GamePainterWidgetState extends State<GamePainterWidget> {
rive.RenderTexture renderTexture = rive.RiveNative.instance.makeRenderTexture();
GamePainter? _gamePainter;
@override
void initState() {
loadFile();
super.initState();
}
Future<void> loadFile() async {
final bytes = await rootBundle.load("assets/basic_shader.riv");
var riveFile = await rive.File.decode(bytes.buffer.asUint8List(),
riveFactory: rive.Factory.rive);
if (riveFile != null) {
setState(() {
_gamePainter = GamePainter(riveFile);
});
}
}
@override
Widget build(BuildContext context) {
if (_gamePainter == null) return Container();
return renderTexture.widget(painter: _gamePainter!);
}
}
///-----------------------------------------------------------------------------
///-----------------------------------------------------------------------------
final class GamePainter extends rive.RenderTexturePainter {
late rive.Artboard ab;
late rive.StateMachine sm;
bool hasMade = false;
GamePainter(rive.File file) {
ab = file.defaultArtboard()!;
sm = ab.stateMachine('State Machine 1')!;
}
@override
bool paint(rive.RenderTexture texture, double devicePixelRatio, Size size, double elapsedSeconds) {
final renderer = texture.renderer;
renderer.save();
renderer.scale(devicePixelRatio);
//scale to fill:
double scaleX = (size.width / devicePixelRatio) / ab.width;
double scaleY = (size.height / devicePixelRatio) / ab.height;
double scale = math.min(scaleX, scaleY);//maintain aspect
renderer.scale(scale);
sm.advanceAndApply(elapsedSeconds);
ab.draw(renderer);
renderer.restore();
return true;
}
@override
Color get background => Colors.transparent;
}
Upload your reproduction files / stack trace
No response
Source .riv / .rev file
Screenshots / video
No response
Rive Flutter package version
0.15.0-dev.1
Flutter version
Flutter 3.41.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 02085feb3f (5 months ago) • 2026-04-24 13:54:45 -0700
Engine • hash 7a53c052bc4b472cf780b199087e1368e4a9aa8c (revision 59aa584fdf) (4
months ago) • 2026-04-16 02:32:16.000Z
Tools • Dart 3.11.5 • DevTools 2.54.2
Device
m1 macbook pro
OS version
mac tahoe 26.5, latest macos chrome 151.0.7922.174 with draft gl flags enabled
Additional context
No response
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the web path from RiveNative.init and RenderTexture.widget through RenderTexturePainter, focusing on the renderer setup behind the reported gpuCanvas() error. Compare the web behavior with the working macOS path and investigate how setRenderContext is expected to be exposed. Done means the supplied basic_shader.riv example runs on web without the runtime error and the required setup is available through the Flutter API or documented alternative.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100