Screenshot :

Dashed Rectangle In Flutter
main.dart
import 'package:flutter/material.dart'; import 'dashed_rect.dart'; import 'heading.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override State<StatefulWidget> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('DottedBorder or dashed rectangle border flutter')), body: Heading( text: Text( "Flutter Tutorial", style: TextStyle(fontSize: 32, fontWeight: FontWeight.w600), ), button: DottedBorder( borderType: BorderType.RRect, radius: Radius.circular(8), color: Colors.grey, child: Center( child: Icon( Icons.navigate_next, size: 28, color: Colors.orange, ), ), strokeWidth: 1, dashPattern: [3, 4]), ))); } }
dashed_rect.dart
import 'package:flutter/material.dart'; import 'package:path_drawing/src/dash_path.dart'; class DottedBorder extends StatelessWidget { final Widget child; final EdgeInsets padding; final double strokeWidth; final Color color; final List<double> dashPattern; final BorderType borderType; final Radius radius; final Path customPath; DottedBorder({ @required this.child, this.color = Colors.black, this.strokeWidth = 1, this.borderType = BorderType.Rect, this.dashPattern = const <double>[3, 1], this.padding = const EdgeInsets.all(2), this.radius = const Radius.circular(0), this.customPath, }) { assert(child != null); } @override Widget build(BuildContext context) { return Stack( children: <Widget>[ Positioned.fill( child: CustomPaint( painter: _DashPainter( strokeWidth: strokeWidth, radius: radius, color: color, borderType: borderType, dashPattern: dashPattern, customPath: customPath, ), ), ), Padding( padding: padding, child: child, ), ], ); } } enum BorderType { Circle, RRect, Rect, Oval } class _DashPainter extends CustomPainter { final double strokeWidth; final List<double> dashPattern; final Color color; final BorderType borderType; final Radius radius; final Path customPath; _DashPainter({ this.strokeWidth = 2, this.dashPattern = const <double>[3, 1], this.color = Colors.black, this.borderType = BorderType.Rect, this.radius = const Radius.circular(0), this.customPath, }) { assert(dashPattern.isNotEmpty, 'Dash Pattern cannot be empty'); } @override void paint(Canvas canvas, Size size) { Paint paint = Paint() ..strokeWidth = strokeWidth ..color = color ..style = PaintingStyle.stroke; Path _path; if (customPath != null) { _path = dashPath(customPath, dashArray: CircularIntervalList(dashPattern)); } else { _path = _getPath(size); } canvas.drawPath(_path, paint); } Path _getPath(Size size) { Path path; switch (borderType) { case BorderType.Circle: path = _getCirclePath(size); break; case BorderType.RRect: path = _getRRectPath(size, radius); break; case BorderType.Rect: path = _getRectPath(size); break; case BorderType.Oval: path = _getOvalPath(size); break; } return dashPath(path, dashArray: CircularIntervalList(dashPattern)); } Path _getCirclePath(Size size) { double w = size.width; double h = size.height; double s = size.shortestSide; return Path() ..addRRect( RRect.fromRectAndRadius( Rect.fromLTWH( w > s ? (w - s) / 2 : 0, h > s ? (h - s / 2) : 0, s, s, ), Radius.circular(s / 2), ), ); } Path _getRRectPath(Size size, Radius radius) { return Path() ..addRRect( RRect.fromRectAndRadius( Rect.fromLTWH( 0, 0, size.width, size.height, ), radius, ), ); } Path _getRectPath(Size size) { return Path() ..addRect( Rect.fromLTWH( 0, 0, size.width, size.height, ), ); } Path _getOvalPath(Size size) { return Path() ..addOval( Rect.fromLTWH( 0, 0, size.width, size.height, ), ); } @override bool shouldRepaint(_DashPainter oldDelegate) { return oldDelegate.strokeWidth != this.strokeWidth || oldDelegate.color != this.color || oldDelegate.dashPattern != this.dashPattern || oldDelegate.borderType != this.borderType; } }
heading.dart
import 'package:flutter/material.dart'; class Heading extends StatelessWidget { final Text text; final button; Heading({Key key, @required this.button, @required this.text}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: ListTile( leading: text, trailing: Container( height: 50, width: 55, child: button, ), ), ); } }
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in