flutter 分割线_Flutter绘制虚线

欢迎去看原文：http://tryenough.com/flutter-dotline

效果

实现方案

方案一：

如果你用canvas画，可以参考这个库来绘制虚线：

https://pub.dartlang.org/packages/path_drawing#-installing-tab-

欢迎去看原文：http://tryenough.com/flutter-dotline

方案二：

定义分割线

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, ); }, ); }}

使用 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), ], ), ), ), ), ), ); }}

欢迎去看原文：http://tryenough.com/flutter-dotline