Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Low Level Raw Animation using canvas and scene
import 'dart:ui';
import 'package:flutter/painting.dart';
void main() {
window.onBeginFrame = beginFrame;
window.scheduleFrame();
}
///
/// See more details on https://fiddle.skia.org/c/@shapes
///
void beginFrame(Duration timeStamp) {
final double devicePixelRatio = window.devicePixelRatio;
final Size logicalSize = window.physicalSize / devicePixelRatio;
final Rect physicalBounds = Offset.zero & (logicalSize * devicePixelRatio);
final PictureRecorder recorder = PictureRecorder();
final Canvas canvas = Canvas(recorder, physicalBounds)
..scale(devicePixelRatio, devicePixelRatio);
final paint = Paint()
..style = PaintingStyle.fill
..isAntiAlias = true
..strokeWidth = 4
..color = const Color(0xff4285F4);
Rect rect = Rect.fromLTWH(10, 10, 100, 160);
canvas.drawRect(rect, paint);
Rect oval = rect.shift(Offset(40, 80));
paint.color = Color(0xffDB4437);
canvas.drawOval(oval, paint);
paint.color = Color(0xff0F9D58);
canvas.drawCircle(Offset(180, 50), 25, paint);
rect = rect.shift(Offset(80, 50));
paint
..color = Color(0xffF4B400)
..style = PaintingStyle.stroke;
canvas.drawRRect(RRect.fromRectXY(rect, 10, 10), paint);
final Picture picture = recorder.endRecording();
final SceneBuilder sceneBuilder = SceneBuilder()
..pushOffset(250, 250)
..pushOpacity(0x50)
..addPicture(Offset.zero, picture)
..pop()
..pushOffset(50, 50)
..pushOpacity(0x80)
..addPicture(Offset.zero, picture)
..pop()
..pushOffset(50, 50)
..pushOpacity(0xDD)
..addPicture(Offset.zero, picture)
..pop()
..pushOffset(50, 50)
..pushOpacity(0xFF)
..addPicture(Offset.zero, picture)
..pop();
window.render(sceneBuilder.build());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment