feat:custom render box

Author: LiuL0703

lib/main.dart

@@ -23,6 +23,7 @@ import 'view/persist_key_value.dart';
 import 'view/tips_calculator.dart';
 import 'view/whats_app.dart';
 import 'view/animation_demo.dart';
+import 'view/custom_render_box.dart';
 // import 'package:flutter_examples_code/view/navigation_drawer/screens/home.dart';
 import 'package:flutter_examples_code/view/navigation_drawer/screens/account.dart';
 import 'package:flutter_examples_code/view/navigation_drawer/screens/setting.dart';
@@ -72,6 +73,7 @@ class MyApp extends StatelessWidget {
         // "navigation_draw": (context)=> new HomeScreen(),
         "whats_app": (context)=> new WhatsAppScreen(),
         "animation_demo": (context)=> new AnimationDemo(),
+        "custom_render_box": (context)=> new CustomRenderBox(),
       },
       home: MyHomePage(title: '首页'),
     );
@@ -328,7 +330,14 @@ class _MyHomePageState extends State<MyHomePage> {
                 onPressed: (){
                   Navigator.pushNamed(context, "animation_demo");
                 },
-              )
+              ),
+              FlatButton(
+                child: Text('Custom Render Box',style: textStyle),
+                textColor: Colors.blue,
+                onPressed: (){
+                  Navigator.pushNamed(context, "custom_render_box");
+                },
+              ),
             ],
           ),
         ),

lib/view/custom_render_box.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+
+class RenderDots extends RenderConstrainedBox{
+  RenderDots() : super(additionalConstraints:const BoxConstraints.expand());
+
+  @override
+  bool hitTestSelf(Offset position) => true;
+
+  final Map<int, Offset> _dots = <int, Offset>{};
+
+  @override
+  void handleEvent(PointerEvent event, BoxHitTestEntry entry){
+    if(event is PointerDownEvent || event is PointerMoveEvent){
+      _dots[event.pointer] = event.position;
+      markNeedsPaint();
+    } else if(event is PointerUpEvent || event is PointerCancelEvent){
+      _dots.remove(event.pointer);
+      markNeedsLayout();
+    }
+  }
+
+  @override
+  void paint(PaintingContext context, Offset offset){
+    final Canvas canvas = context.canvas;
+    canvas.drawRect(offset & size, Paint()..color = const Color(0xFF0000FF));
+
+    final Paint paint = Paint()..color = const Color(0xFF00FF00);
+    for(Offset point in _dots.values){
+      canvas.drawCircle(point, 50.0, paint);
+    }
+    super.paint(context, offset);
+  }
+}
+
+class Dots extends SingleChildRenderObjectWidget{
+  const Dots({Key key, Widget child}): super(key:key,child: child);
+
+  @override
+  RenderDots createRenderObject(BuildContext context) => RenderDots();
+}
+
+class CustomRenderBox extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return new Scaffold(
+      appBar: new AppBar(
+        title: new Text('Custom Render Box'),
+      ),
+      body:SafeArea(
+        child: const Directionality(
+          textDirection: TextDirection.ltr,
+          child: Dots(
+            child: Center(
+              child: Text('TOUCH ME!'),
+            )
+          )
+        ),
+      ) 
+    );
+  }
+}