How to add line dash in Flutter

Question

How to make a line dash in Flutter like this?

Answer 1

As a workaround, in your case, you can do something like this

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

and use it const MySeparator()

class App extends StatelessWidget {   const App();    @override   Widget build(BuildContext context) {     return MaterialApp(       home: Material(         child: Container(           color: Colors.blue,           child: Center(             child: Container(               height: 600, width: 350,               decoration: BoxDecoration(                 color: Colors.white,                 borderRadius: BorderRadius.all(Radius.circular(16.0)),               ),               child: Flex(                 direction: Axis.vertical,                 children: [                   Expanded(child: Container()),                   const MySeparator(color: Colors.grey),                   Container(height: 200),                 ],               ),             ),           ),         ),       ),     );   } } 

Answer 2

class DashedLinePainter extends CustomPainter {   @override   void paint(Canvas canvas, Size size) {     double dashWidth = 9, dashSpace = 5, startX = 0;     final paint = Paint()       ..color = Colors.grey       ..strokeWidth = 1;     while (startX < size.width) {       canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);       startX += dashWidth + dashSpace;     }   }    @override   bool shouldRepaint(CustomPainter oldDelegate) => false; }