web-dev-qa-db-fra.com

Comment ajouter un trait de ligne dans Flutter

Comment faire un trait de ligne dans Flutter comme ça?

Image

flutterflutter-layout
12
Badai Ardiat
// garis putus putus
Row(
children: List.generate(150~/10, (index) => Expanded(
 child: Container(
  color: index%2==0?Colors.transparent
  :Colors.grey,
  height: 2,
 ),
 )),
),
0
malik kurosaki

enter image description here

Créez cette classe:

class DotWidget extends StatelessWidget {
  final double totalWidth, dashWidth, emptyWidth, dashHeight;

  final Color dashColor;

  const DotWidget({
    this.totalWidth = 300,
    this.dashWidth = 10,
    this.emptyWidth = 5,
    this.dashHeight = 2,
    this.dashColor = Colors.black,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: List.generate(
        totalWidth ~/ (dashWidth + emptyWidth),
            (_) => Container(
          width: dashWidth,
          height: dashHeight,
          color: dashColor,
          margin: EdgeInsets.only(left: emptyWidth / 2, right: emptyWidth / 2),
        ),
      ),
    );
  }
}

Utilisation:

Utilisez-le comme n'importe quel autre widget

 child: DotWidget(
   dashColor: Colors.black,
   dashHeight: 2,
   dashWidth: 100,
 )
0
CopsOnRoad

Voici le code de la ligne pointillée horizontale, comme votre image. CustomPaint est fortement recommandé par l'équipe de flutter pour des trucs comme ça. Il est également rapide et efficace pour le rendu. Vous pouvez jouer avec Offset pour changer la direction.

 class MyClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        Painter: MyLinePainter(),
      ),
    );
  }
}

class MyLinePainter extends CustomPainter {
  @override
  void Paint(Canvas canvas, Size size) {
    var max = 100;
    var dashWidth, dashSpace = 5;
    double startX = 0;
    final Paint = Paint()..color = Colors.grey;
    while (max >= 0) {
      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), Paint..strokeWidth = 1);
      final space = (dashSpace + dashWidth);
      startX += space;
      max -= space;
    }
  }
0
Simran Singh

Essaye ça,

class DotDivider extends StatelessWidget {
  final double width;
  final double height;
  final double gap;
  final Color color;
  final double lineHeight;

  const DotDivider(
      {this.height = 1.0,
      this.color = Colors.black,
      this.width = 2.0,
      this.gap = 2.0,
      this.lineHeight = 10.0});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final boxWidth = constraints.constrainWidth();
        final dashWidth = width;
        final dashHeight = height;
        final dashCount = (boxWidth / dashWidth).floor();
        return Container(
          height: (lineHeight * 2) + height,
          child: ListView.builder(
            physics: NeverScrollableScrollPhysics(),
            scrollDirection: Axis.horizontal,
            itemCount: dashCount,
            itemBuilder: (BuildContext context, int index) => Center(
              child: Container(
                width: dashWidth,
                height: dashHeight,
                margin:
                    EdgeInsets.symmetric(vertical: lineHeight, horizontal: gap),
                decoration: BoxDecoration(color: color),
              ),
            ),
          ),
        );
      },
    );
  }
}
0
Raj Yadav