Skip to content

Shaders not working on web #657

Description

@naychrist

Submission checklist

  • I have confirmed the issue is present in the latest version of the rive Flutter 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

basic_shader.riv.zip

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions