Skip to content

Instantly share code, notes, and snippets.

@JasperEssien2
Created November 30, 2023 06:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JasperEssien2/4556fde49e0e3ae2d1b23f94a28e8776 to your computer and use it in GitHub Desktop.
Save JasperEssien2/4556fde49e0e3ae2d1b23f94a28e8776 to your computer and use it in GitHub Desktop.
Curved Hexagon Shaped Painter
import 'package:flutter/material.dart';
//import 'dart:math' as math;
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
// Outer white container with padding
body: Container(
color: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 80),
// Inner yellow container
child: Container(
padding: EdgeInsets.all(15),
// pass double.infinity to prevent shrinking of the painter area to 0.
width: 130,
height: 150,
color: Colors.yellow,
child: CustomPaint(painter: CurvedHexagonPainter()),
),
),
),
);
}
}
class CurvedHexagonPainter extends CustomPainter {
void paint(Canvas canvas, Size size) {
Path path = Path();
path
..moveTo(size.width * .6, size.height * .05)
// moving to topCenter 1st, then draw the path
..lineTo(size.width * .95, size.height * .20)
..quadraticBezierTo(
size.width, size.height * .25, size.width, size.height * .30,)
..lineTo(size.width, size.height * .70)
..quadraticBezierTo(
size.width, size.height * .75, size.width * .95, size.height * .80)
..lineTo(size.width * .6, size.height * .95)
//Bottom Curve
..quadraticBezierTo(
size.width * .5, size.height, size.width * .4, size.height * .95)
..lineTo(size.width * 0.05, size.height * .80)
..quadraticBezierTo(0, size.height * .75, 0, size.height * .70)
..lineTo(0, size.height * .30)
..quadraticBezierTo(
0, size.height * .25, size.width * 0.05, size.height * .20)
..lineTo(size.width * .4, size.height * .05)
..quadraticBezierTo(
size.width * .5, 0, size.width * .6, size.height * .05)
..close();
canvas.drawPath(path, Paint()..color = Colors.red);
}
@override
bool shouldRepaint(CurvedHexagonPainter oldDelegate) => false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment