Comment créer une bordure en pointillé autour d'une boîte en scintillement?

Actuellement, il n'y a pas de support pour unebordure en pointillés dans Flutter , car il n'y a que deux styles:

Solid or None

Pour ajouter une bordure à votre widget, vous devez procéder comme suit:

• Ajouter une propriété BoxDecoration à votre widget

• Une partie des propriétés de BoxDecoration est la bordure

  decoration: new BoxDecoration(
   border: border.all(
      width: 1,
      style: BorderStyle.solid/none
    ),
  );
  

  J'ai également découvert cette question SO qui montre comment ajouter une bordure circulaire en pointillés.

ÉDITER

J'ai ajouté ceci en tant que package dans pub .

Maintenant, tout ce que tu as à faire c'est

import 'package:flutter/material.dart';
import 'dart:math' as math;

class DashedRect extends StatelessWidget {
  final Color color;
  final double strokeWidth;
  final double gap;

  DashedRect(
      {this.color = Colors.black, this.strokeWidth = 1.0, this.gap = 5.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: EdgeInsets.all(strokeWidth / 2),
        child: CustomPaint(
          painter:
              DashRectPainter(color: color, strokeWidth: strokeWidth, gap: gap),
        ),
      ),
    );
  }
}

class DashRectPainter extends CustomPainter {
  double strokeWidth;
  Color color;
  double gap;

  DashRectPainter(
      {this.strokeWidth = 5.0, this.color = Colors.red, this.gap = 5.0});

  @override
  void paint(Canvas canvas, Size size) {
    Paint dashedPaint = Paint()
      ..color = color
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    double x = size.width;
    double y = size.height;

    Path _topPath = getDashedPath(
      a: math.Point(0, 0),
      b: math.Point(x, 0),
      gap: gap,
    );

    Path _rightPath = getDashedPath(
      a: math.Point(x, 0),
      b: math.Point(x, y),
      gap: gap,
    );

    Path _bottomPath = getDashedPath(
      a: math.Point(0, y),
      b: math.Point(x, y),
      gap: gap,
    );

    Path _leftPath = getDashedPath(
      a: math.Point(0, 0),
      b: math.Point(0.001, y),
      gap: gap,
    );

    canvas.drawPath(_topPath, dashedPaint);
    canvas.drawPath(_rightPath, dashedPaint);
    canvas.drawPath(_bottomPath, dashedPaint);
    canvas.drawPath(_leftPath, dashedPaint);
  }

  Path getDashedPath({
    @required math.Point<double> a,
    @required math.Point<double> b,
    @required gap,
  }) {
    Size size = Size(b.x - a.x, b.y - a.y);
    Path path = Path();
    path.moveTo(a.x, a.y);
    bool shouldDraw = true;
    math.Point currentPoint = math.Point(a.x, a.y);

    num radians = math.atan(size.height / size.width);

    num dx = math.cos(radians) * gap < 0
        ? math.cos(radians) * gap * -1
        : math.cos(radians) * gap;

    num dy = math.sin(radians) * gap < 0
        ? math.sin(radians) * gap * -1
        : math.sin(radians) * gap;

    while (currentPoint.x <= b.x && currentPoint.y <= b.y) {
      shouldDraw
          ? path.lineTo(currentPoint.x, currentPoint.y)
          : path.moveTo(currentPoint.x, currentPoint.y);
      shouldDraw = !shouldDraw;
      currentPoint = math.Point(
        currentPoint.x + dx,
        currentPoint.y + dy,
      );
    }
    return path;
  }

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

Solution de travail [obsolète]

Comme Tomerpacific l'a dit dans cette réponse , Flutter n'a pas d'implémentation par défaut pour la bordure en pointillés pour le moment.

J'ai travaillé pendant un certain temps hier et j'ai pu trouver une solution en utilisant CustomPainter . J'espère que cela aide quelqu'un.

Ajoutez le DashedRect à votre conteneur, comme ceci

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: 400,
          width: 300,
          color: Colors.black12,
          child: DashedRect(color: Colors.red, strokeWidth: 2.0, gap: 3.0,),
        ),
      ),
    );
  }
}

DashedRect.dart

DottedBorder(
  color: Colors.black,
  gap: 3,
  strokeWidth: 1,
  child: FlutterLogo(size: 148),
)

Je ne m'attends pas à ce que cela corresponde à tous les cas d'utilisation et il y a beaucoup de place pour la personnalisation et l'amélioration. Commentez si vous trouvez des bogues.

BorderStyle.none peut être utile si vous souhaitez appliquer une animation ou supprimer \ ajouter une fonction de bordure sur un événement Tap (comme une bordure d'éclairage) ou similaire.

Récemment, Flutter a publié un plugin pour dessiner une bordure en pointillé autour des widgets

https://pub.dev/packages/dotted_border

En utilisant ce plugin, vous pouvez dessiner une bordure en pointillé ou en pointillé

DottedBorder(
color: Colors.black,
strokeWidth: 1,
child: FlutterLogo(size: 148),
)

Ajouter ci-dessous le code pour afficher la bordure

//1. Install the plugin by add dependencies in pubspace.yaml
dotted_border: ^1.0.6

Voici un package de flutter fdottedline pour ajouter facilement des bordures en pointillés autour des widgets. Cela utilise le moyen le plus simple de créer une vue en ligne pointillée et offre aux développeurs la possibilité de créer des lignes pointillées. Il prend également en charge la création d'une bordure en pointillés pour un [Widget]. Prise en charge du contrôle de l'épaisseur, de l'espacement et des coins de la bordure en pointillé.

1. Pour utiliser ce package, ajoutez fdottedline en tant que dépendance dans votre fichier pubspec.yaml .

2. Utilisation: Démo de forme pointillée

   FDottedLine(
     color: Colors.lightBlue[600],
     height: 100.0,
     width: 50,
     strokeWidth: 2.0,
     dottedLength: 10.0,
     space: 2.0,
   )