androidflutterdivider

how i can give dashed divider between to the two container in flutter with out using any external package


I want to give a divider between two container I generally use a divider or Container border i can try it but using divider i can not give a dashed dashed border in flutter.

Divider( height: 1, color: Colors.grey.shade200, thickness: 1, indent : 1, endIndent : 1, );


Solution

  • Try to use below class for divider line

     class SeparatorLine extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            final boxWidth = constraints.constrainWidth();
            const dashWidth = 10.0;
            final dashCount = (boxWidth / (2 * dashWidth)).floor();
            return Flex(
              children: List.generate(dashCount, (_) {
                return SizedBox(
                  width: dashWidth,
                  height: 1,
                  child: DecoratedBox(
                    decoration: BoxDecoration(color: Colors.grey),
                  ),
                );
              }),
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              direction: Axis.horizontal,
            );
          },
        );
      }
    }
    

    and use it as SeparatorLine()