Сделать часть площади прозрачной - флаттер

Question

Я хочу получить представление о сканере, как показано на рисунке. Я использовал BoxDecoration для создания квадрата с закругленными углами.

            Center(
                  child: Container(
                    width: BarReaderSize.width,
                    height: BarReaderSize.height,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(color: Colors.white, width: 3)),
                  ),
                )

Может кто-нибудь помочь?

Answer 1

Вы можете попробовать использовать CustomPaint с некоторыми отсечениями с путями.

Пожалуйста, найдите полный пример здесь, в DartPad.

Сложно определить, как обрезать скругленные границы белого прямоугольника. Я просто использовал собственный путь для этого. Я создал собственные Rects и создал из них Path:

final path = Path()
      ..addRect(clippingRect0)
      ..addRect(clippingRect1)
      ..addRect(clippingRect2)
      ..addRect(clippingRect3);

Это может быть не самый эффективный подход, но иногда быстрее что-то нарисовать с помощью CustomPainter, чем экспериментировать с некоторыми уже предоставленными виджетами. Таким образом, вы всегда будете выглядеть одинаково независимо от того, как изменяется API виджета материала.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey,
        child: Stack(
          children: [
            Center(
              child: FlutterLogo(
                size: 800,
              ),
            ),
            Container(
              child: Center(
                child: CustomPaint(
                  painter: BorderPainter(),
                  child: Container(
                    width: BarReaderSize.width,
                    height: BarReaderSize.height,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class BorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final width = 3.0;
    final radius = 20.0;
    final tRadius = 2 * radius;
    final rect = Rect.fromLTWH(
      width,
      width,
      size.width - 2 * width,
      size.height - 2 * width,
    );
    final rrect = RRect.fromRectAndRadius(rect, Radius.circular(radius));
    final clippingRect0 = Rect.fromLTWH(
      0,
      0,
      tRadius,
      tRadius,
    );
    final clippingRect1 = Rect.fromLTWH(
      size.width - tRadius,
      0,
      tRadius,
      tRadius,
    );
    final clippingRect2 = Rect.fromLTWH(
      0,
      size.height - tRadius,
      tRadius,
      tRadius,
    );
    final clippingRect3 = Rect.fromLTWH(
      size.width - tRadius,
      size.height - tRadius,
      tRadius,
      tRadius,
    );

    final path = Path()
      ..addRect(clippingRect0)
      ..addRect(clippingRect1)
      ..addRect(clippingRect2)
      ..addRect(clippingRect3);

    canvas.clipPath(path);
    canvas.drawRRect(
      rrect,
      Paint()
        ..color = Colors.white
        ..style = PaintingStyle.stroke
        ..strokeWidth = width,
    );
  }

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

class BarReaderSize {
  static double width = 200;
  static double height = 200;
}