如何在顶部容器上打孔？

Question

I am trying to build a dial plate in Flutter. The bottom plate is just a stateless plate with numbers on top of it. The top plate should be Stateful and have a few holes in it so that you can see the numbers underneath it, just like a real dial plate.

Some tips on how to accomplish this would be appreciated. I don't want complete solutions, because I want to do it by myself, but rather some helpful tips that makes it a little bit easier. I've been searching a couple of days but haven't found anything that helps me. Please no answers which are too complicated for me as I am an absolute beginner, now 3 months into programming and flutter.

Answer 1

You can use Path.combine mixed with ' difference ' operation to cut holes in top container.

Path combine (
PathOperation operation,
Path path1,
Path path2
)

Combines the two paths according to the manner specified by the given operation.

The resulting path will be constructed from non-overlapping contours. The curve order is reduced where possible so that cubics may be turned into quadratics, and quadratics maybe turned into lines.

===========

difference → const PathOperation

Subtract the second path from the first path.

For example, if the two paths are overlapping circles of equal diameter but differing centers, the result would be a crescent portion of the first circle that was not overlapped by the second circle.

Please see the code below.

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: CutHoleDemo(),
    );
  }
}

class CutHoleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cut Hole in Top Container Demo.'),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.blueGrey,
          child: Stack(
            children: [
              Center(
                child: Text(
                  "Bottom\nContainer\nText",
                  style: TextStyle(color: Colors.white),
                  textAlign: TextAlign.center,
                ),
              ),
              CustomPaint(
                painter: CustomContainerWithHole(),
                child: Center(
                  child: Container(
                    height: 200,
                    width: 200,
                    color: Colors.transparent,
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Text(
                        "Top Container Text",
                        style: TextStyle(color: Colors.black),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class CustomContainerWithHole extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.grey;
    canvas.drawPath(
      Path.combine(
        PathOperation.difference,
        Path()
          ..addRRect(RRect.fromLTRBR(50, 50, 250, 250, Radius.circular(10))),
        Path()
          ..addOval(Rect.fromCircle(center: Offset(150, 150), radius: 50))
          ..close(),
      ),
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}