Merge pull request #20 from IsmailAlamKhan/null-safety

Migrated the examples to null-safety

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.0.0-nullsafety.0]
+- initial migration to null-safety
+- fix non-working examples.
+- fix a bug with GText layout.
+
 ## [0.9.9]
 - major fix for `GTween` when running lots of SceneControllers instances.
 - fix stage dispose exception with keyboard/pointer.

README.md

@@ -20,12 +20,21 @@ To get some extended, boring explanations, and eventually some sample codes, che
 
 ---
 
-[Try Graphx on Dart Pad](https://dartpad.dev/21b6670a42d32e37440192e19279e71b?)
+[Try Graphx (0.0.9) on Dart Pad](https://dartpad.dev/21b6670a42d32e37440192e19279e71b?)
+
+#### news!
+
+- WIP Support for [null-safety](https://github.com/roipeker/graphx/tree/null-safety)
+
+- Support for HotReload
 
 #### prototyping
 
 GraphX is all about visuals, here you have some screen captures of random prototypes I've been doing, while developing and testing graphx.
 
+For your GraphX scene to support **Hot Reload**, you should initialize your variables and DisplayObjects inside `addedToStage`, and optionally clean them in `dispose`.
+
+
 [![artificial horizon](https://media.giphy.com/media/NMG8gfpJxFiu1eALZo/giphy.gif)](https://media.giphy.com/media/NMG8gfpJxFiu1eALZo/source.mp4)
 [![parallax game](https://media.giphy.com/media/RIrvhfZoDtal41Tb4e/giphy-downsized.gif)](https://media.giphy.com/media/RIrvhfZoDtal41Tb4e/source.mp4)
 [![charts pie color 2](https://media.giphy.com/media/pQdeurUOAqWdZuxxUK/giphy.gif)](https://media.giphy.com/media/pQdeurUOAqWdZuxxUK/source.mp4)

example/lib/demos/altitude_indicator/scene.dart

@@ -16,17 +16,17 @@ class AltitudIndicatorScene extends GSprite {
 
   /// inner circle.
   GSprite rotatorCircle = GSprite();
-  GSprite movable;
+  GSprite? movable;
 
   double innerCircSeparation = 50.0;
   double outlineThickness1 = 18.0;
   double outlineThickness2 = 10.0;
-  double meterSize;
+  late double meterSize;
   final redColor = const Color(0xffDA5537);
   double valueMeterGap = 34.0;
-  double innerCircleSize;
+  late double innerCircleSize;
 
-  double get minStageSize => Math.min(stage.stageWidth, stage.stageHeight);
+  double get minStageSize => Math.min(stage!.stageWidth, stage!.stageHeight);
 
   @override
   void addedToStage() {
@@ -43,12 +43,14 @@ class AltitudIndicatorScene extends GSprite {
         .endFill();
     addChild(mainMask);
     mainContainer.mask = mainMask;
+
     /// center pivot in the current bounding box of scene.
     alignPivot();
 
-    stage.onResized.add(() {
+    stage!.onResized.add(() {
       /// position the scene in the middle of screen.
-      setPosition(stage.stageWidth / 2, stage.stageHeight / 2);
+      setPosition(stage!.stageWidth / 2, stage!.stageHeight / 2);
+
       /// scale % accordingly.
       scale = minStageSize / meterSize;
     });
@@ -85,10 +87,10 @@ class AltitudIndicatorScene extends GSprite {
     createOutsideLines();
 
     /// create some movement for the airplane!
-    stage.onEnterFrame.add(onEnterFrame);
+    stage!.onEnterFrame.add(onEnterFrame);
   }
 
-  bool isPressed(LogicalKeyboardKey key) => stage.keyboard.isPressed(key);
+  bool isPressed(LogicalKeyboardKey key) => stage!.keyboard!.isPressed(key);
 
   int getDirY() {
     if (isPressed(LogicalKeyboardKey.arrowDown)) {
@@ -113,9 +115,9 @@ class AltitudIndicatorScene extends GSprite {
     var dirX = getDirX();
 
     if (dirY != 0) {
-      movable.y += 1.2 * dirY;
+      movable!.y += 1.2 * dirY;
     } else {
-      movable.y += (-movable.y) / 20;
+      movable!.y += (-movable!.y) / 20;
     }
 
     if (dirX != 0) {
@@ -126,16 +128,16 @@ class AltitudIndicatorScene extends GSprite {
     }
 
     var maxRangeY = valueMeterGap * 2;
-    if (movable.y > maxRangeY) {
-      movable.y = maxRangeY;
-    } else if (movable.y < -maxRangeY) {
-      movable.y = -maxRangeY;
+    if (movable!.y > maxRangeY) {
+      movable!.y = maxRangeY;
+    } else if (movable!.y < -maxRangeY) {
+      movable!.y = -maxRangeY;
     }
 
 //    rotatorCircle.rotation += .01;
   }
 
-  GSprite drawRotator() {
+  GSprite? drawRotator() {
     /// background first.
     movable = GSprite();
 
@@ -150,9 +152,9 @@ class AltitudIndicatorScene extends GSprite {
     ground.alignPivot(Alignment.topCenter);
     line.alignPivot(Alignment.center);
 
-    movable.addChild(sky);
-    movable.addChild(ground);
-    movable.addChild(line);
+    movable!.addChild(sky);
+    movable!.addChild(ground);
+    movable!.addChild(line);
 
     /// another option to draw background.
 //    var rotatorBackground = GShape();
@@ -173,12 +175,12 @@ class AltitudIndicatorScene extends GSprite {
 //    movable.addChild(rotatorBackground);
 
     var elements = buildRotatorElements();
-    movable.addChild(elements);
-    rotatorCircle.addChild(movable);
+    movable!.addChild(elements);
+    rotatorCircle.addChild(movable!);
 
     /// the red arrow should always stay in the same position...
     /// re-parent the element to the rotator circle.
-    var arrow = elements.getChildByName('arrow');
+    var arrow = elements.getChildByName('arrow')!;
     rotatorCircle.addChild(arrow);
     return movable;
   }
@@ -329,15 +331,15 @@ class AltitudIndicatorScene extends GSprite {
 
     GShape _buildLine({
       double thickness = 3.0,
-      double rotationDegrees,
+      required double rotationDegrees,
     }) {
       var line = GShape();
       line.graphics.lineStyle(thickness, kColorWhite);
       line.graphics.moveTo(0, 0);
       line.graphics.lineTo((innerCircleSize + innerCircSeparation) / 2, 0);
       line.pivotX = line.width;
       line.rotation = deg2rad(rotationDegrees);
-      linesContainer?.addChild(line);
+      linesContainer.addChild(line);
       return line;
     }
 

example/lib/demos/ball_line_collision/scene/ball.dart

@@ -3,20 +3,20 @@ import 'package:graphx/graphx.dart';
 
 class Ball extends GShape {
   double radius, vx, vy;
-  Color color;
+  Color? color;
 
   Ball({
-    double x,
-    double y,
-    this.radius,
-    this.vx,
-    this.vy,
+    double? x,
+    double? y,
+    required this.radius,
+    required this.vx,
+    required this.vy,
     this.color,
   }) {
     this.x = x;
     this.y = y;
     graphics
-        .beginFill(color.withOpacity(.8))
+        .beginFill(color!.withOpacity(.8))
         .lineStyle(6, kColorBlack)
         .drawCircle(0, 0, radius)
         .endFill()

example/lib/demos/ball_line_collision/scene/scene.dart

@@ -4,17 +4,15 @@
 ///
 /// web demo: https://roi-graphx-balls-collision.surge.sh/#/
 
-
 import 'package:flutter/material.dart';
 import 'package:graphx/graphx.dart';
 
 import 'ball.dart';
 
 class CollisionScene extends GSprite {
+  double get sw => stage!.stageWidth;
 
-  double get sw => stage.stageWidth;
-
-  double get sh => stage.stageHeight;
+  double get sh => stage!.stageHeight;
 
   /// lazy with the types :P
   var lines = [];
@@ -37,12 +35,12 @@ class CollisionScene extends GSprite {
       addChild(ball);
       balls.add(ball);
     });
-    stage.onMouseDown.add(_onMouseDown);
+    stage!.onMouseDown.add(_onMouseDown);
   }
 
   void _onMouseDown(input) {
-    stage.onMouseUp.addOnce((input) => stage.onMouseMove.removeAll());
-    stage.onMouseMove.add((input) => points.add([mouseX, mouseY, 0.0]));
+    stage!.onMouseUp.addOnce((input) => stage!.onMouseMove.removeAll());
+    stage!.onMouseMove.add((input) => points.add([mouseX, mouseY, 0.0]));
     points = <List<double>>[
       [mouseX, mouseY, 0.0]
     ];
@@ -133,4 +131,4 @@ class CollisionScene extends GSprite {
       }
     }
   }
-}
+}

example/lib/demos/bookmark_button/scene.dart

@@ -7,15 +7,15 @@ import 'package:flutter/material.dart';
 import 'package:graphx/graphx.dart';
 
 class BookmarkButton extends GSprite {
-  double get sw => stage.stageWidth;
+  double get sw => stage!.stageWidth;
 
-  double get sh => stage.stageHeight;
-  GShape bg;
-  GText label;
+  double get sh => stage!.stageHeight;
+  late GShape bg;
+  late GText label;
   bool isOn = false;
-  static List<GTexture> _gifFrames;
-  GMovieClip bookmarkIco;
-  GDropShadowFilter shadow;
+  static List<GTexture>? _gifFrames;
+  late GMovieClip bookmarkIco;
+  GDropShadowFilter? shadow;
 
   /// remove if not in debug? (hot reload).
   @override
@@ -27,7 +27,7 @@ class BookmarkButton extends GSprite {
 
   @override
   void addedToStage() {
-    stage.color = Color(0xffEDEFFB);
+    stage!.color = Color(0xffEDEFFB);
     bg = addChild(GShape()) as GShape;
     shadow = GDropShadowFilter(
       6,
@@ -37,7 +37,7 @@ class BookmarkButton extends GSprite {
       Color(0xffA4AADB).withOpacity(.43),
     );
     bg.$useSaveLayerBounds = false;
-    bg.filters = [shadow];
+    bg.filters = [shadow!];
     label = GText.build(
       text: 'Bookmark',
       color: Colors.black.withOpacity(.7),
@@ -49,10 +49,10 @@ class BookmarkButton extends GSprite {
     label.setPosition(sw - label.textWidth - 32, (sh - label.textHeight) / 2);
     _loadTexture();
     onMouseDown.add((e) {
-      shadow.tween(duration: .3, blurX: 2, blurY: 2, distance: 1);
+      shadow!.tween(duration: .3, blurX: 2, blurY: 2, distance: 1);
       bg.tween(duration: .3, scale: .95);
-      stage.onMouseUp.addOnce((e) {
-        shadow.tween(duration: .5, blurX: 6, blurY: 6, distance: 6);
+      stage!.onMouseUp.addOnce((e) {
+        shadow!.tween(duration: .5, blurX: 6, blurY: 6, distance: 6);
         bg.tween(duration: .5, scale: 1);
       });
     });
@@ -69,14 +69,14 @@ class BookmarkButton extends GSprite {
 
   Future<void> _loadTexture() async {
     if (_gifFrames == null) {
-      var atlas = await ResourceLoader.loadGif(
+      var atlas = await (ResourceLoader.loadGif(
           'assets/bookmark_button/bookmark.gif',
           resolution: 2,
-          cacheId: 'bookmark');
+          cacheId: 'bookmark') as Future<GifAtlas>);
       _gifFrames = atlas.textureFrames;
     }
     bookmarkIco =
-        addChild(GMovieClip(frames: _gifFrames, fps: 50)) as GMovieClip;
+        addChild(GMovieClip(frames: _gifFrames!, fps: 50)) as GMovieClip;
     bookmarkIco.repeatable = false;
     bookmarkIco.alignPivot();
     bookmarkIco.setPosition(label.x / 2 + 2, sh / 2);