Dotted Line In Flutter

Dotted Line In Flutter :

Dotted Line In Flutter

CustomTextStyle.dart

import 'package:flutter/material.dart';

class CustomTextStyle {
  static var regularTextStyle = TextStyle(
      fontSize: 14, fontFamily: "Roboto", fontWeight: FontWeight.w400);
  static var mediumTextStyle = TextStyle(
      fontSize: 14, fontFamily: "Roboto", fontWeight: FontWeight.w500);
  static var boldTextStyle = TextStyle(
      fontSize: 14, fontFamily: "Roboto", fontWeight: FontWeight.w700);
  static var blackTextStyle = TextStyle(
      fontSize: 14, fontFamily: "Roboto", fontWeight: FontWeight.w900);
}

DottedLine.dart

import 'package:flutter/material.dart';

import 'CustomTextStyle.dart';

class DottedLine extends StatelessWidget {
  double leftMargin = 16.0;
  double rightMargin = 16.0;
  double topMargin = 4.0;

  DottedLine(this.leftMargin, this.rightMargin, this.topMargin);

  @override
  Widget build(BuildContext context) {
    return createDottedLine();
  }

  createDottedLine() {
    return Container(
      margin:
          EdgeInsets.only(right: rightMargin, left: leftMargin, top: topMargin),
      child: LayoutBuilder(builder: (context, constraints) {
        final boxWidth = constraints.constrainWidth();
        final dottedWidth = 4.0;
        final dashCount = (boxWidth / dottedWidth).floor();
        return Flex(
          direction: Axis.horizontal,
          children: List.generate(dashCount, (_) {
            return Text(
              "-",
              style:
                  CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey),
            );
          }),
        );
      }),
    );
  }
}