Last active
January 18, 2020 11:16
-
-
Save tarek360/994551c27a84ce19e44fd8aa83fe14ec to your computer and use it in GitHub Desktop.
CustomDecoration
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
home: Scaffold( | |
body: Center( | |
child: Container( | |
width: 264, | |
height: 360, | |
decoration: CustomDecoration(24.0), | |
child: Icon(Icons.wb_sunny, size: 90, color: Colors.orange)), | |
), | |
), | |
); | |
} | |
} | |
class CustomDecoration extends Decoration { | |
CustomDecoration(this._patternLength); | |
final double _patternLength; | |
@override | |
BoxPainter createBoxPainter([onChanged]) { | |
return _CustomDecorationPainter(_patternLength); | |
} | |
} | |
class _CustomDecorationPainter extends BoxPainter { | |
_CustomDecorationPainter(this._patternLength); | |
final double _patternLength; | |
@override | |
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) { | |
final Rect bounds = offset & configuration.size; | |
_drawDecoration(canvas, bounds); | |
} | |
void _drawDecoration(Canvas canvas, Rect bounds) { | |
Paint innerPaint = Paint()..color = Colors.lightBlue; | |
Paint outerPaint = Paint() | |
..color = Colors.blue | |
..style = PaintingStyle.stroke | |
..strokeWidth = 1.5; | |
Path innerPath = Path(); | |
Path outerPath = Path(); | |
_addVerticalSides(bounds, innerPath, outerPath); | |
_addHorizontalSides(bounds, innerPath, outerPath); | |
canvas.drawPath(innerPath, innerPaint); | |
canvas.drawPath(outerPath, outerPaint); | |
} | |
void _addVerticalSides(Rect bounds, Path innerPath, Path outerPath) { | |
int patternsCount = bounds.height ~/ _patternLength; | |
double _accurateLength = bounds.height / patternsCount; | |
for (var i = 0; i < patternsCount; ++i) { | |
Rect leftSidePatternRect = Rect.fromLTWH( | |
bounds.left, | |
bounds.top + (i * _accurateLength), | |
_accurateLength, | |
_accurateLength, | |
); | |
Rect rightSidePatternRect = Rect.fromLTWH( | |
bounds.right - _accurateLength, | |
bounds.top + (i * _accurateLength), | |
_accurateLength, | |
_accurateLength, | |
); | |
innerPath.addRotatedRect(leftSidePatternRect); | |
outerPath.addRect(leftSidePatternRect); | |
innerPath.addRotatedRect(rightSidePatternRect); | |
outerPath.addRect(rightSidePatternRect); | |
} | |
} | |
void _addHorizontalSides(Rect bounds, Path innerPath, Path outerPath) { | |
int patternsCount = bounds.width ~/ _patternLength; | |
double _accurateLength = (bounds.width / patternsCount); | |
for (var i = 0; i < patternsCount; ++i) { | |
Rect topSidePatternRect = Rect.fromLTWH( | |
bounds.left + (i * _accurateLength), | |
bounds.top, | |
_accurateLength, | |
_accurateLength, | |
); | |
Rect bottomSidePatternRect = Rect.fromLTWH( | |
bounds.left + (i * _accurateLength), | |
bounds.bottom - _accurateLength, | |
_accurateLength, | |
_accurateLength, | |
); | |
innerPath.addRotatedRect(topSidePatternRect); | |
outerPath.addRect(topSidePatternRect); | |
innerPath.addRotatedRect(bottomSidePatternRect); | |
outerPath.addRect(bottomSidePatternRect); | |
} | |
} | |
} | |
extension on Path { | |
void addRotatedRect(Rect bounds) { | |
moveTo(bounds.left, bounds.center.dy); | |
lineTo(bounds.center.dx, bounds.top); | |
lineTo(bounds.right, bounds.center.dy); | |
lineTo(bounds.center.dx, bounds.bottom); | |
close(); | |
} | |
} |
Author
tarek360
commented
Jan 18, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment