Is it possible to create a similar outline in Flutter

Question

Dart / Flutter

Jetoshi B.

Is it possible to create a similar outline in Flutter

with those unique corners? I'm not sure what these specific corners are called. ^^

#dart #english #programming

0

19.10.2023

3 ответов

30 просмотров

Alex Wow

border: Border (topLeft:)

0

20.10.2023

Jetoshi B. Автор вопроса

TabacoterpZ
Yes, it's possible to create a similar outline wit...

for sure i used manytimes chatgpt but its poop for this, and what you have made too. did you test it before posting it ? its printing fishes, and when i make clockwise true i get a dog bone 😘

0

20.10.2023

TabacoterpZ · Accepted Answer

Yes, it's possible to create a similar outline with unique corners in Flutter. The corners you're referring to appear to be a combination of concave and convex corners. To achieve this in Flutter, you might need to make use of the CustomPainter class. Here's a simple example to get you started: dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Unique Corners')), body: Center( child: CustomPaint( painter: UniqueCornersPainter(), child: Container( width: 200, height: 200, ), ), ), ), ); } } class UniqueCornersPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final paint = Paint() ..color = Colors.blue ..style = PaintingStyle.stroke ..strokeWidth = 4; final path = Path() ..moveTo(size.width * 0.25, 0) ..lineTo(size.width * 0.75, 0) ..arcToPoint( Offset(size.width, size.height * 0.25), radius: Radius.circular(25), clockwise: false, ) ..lineTo(size.width, size.height * 0.75) ..arcToPoint( Offset(size.width * 0.75, size.height), radius: Radius.circular(25), clockwise: false, ) ..lineTo(size.width * 0.25, size.height) ..arcToPoint( Offset(0, size.height * 0.75), radius: Radius.circular(25), clockwise: false, ) ..lineTo(0, size.height * 0.25) ..arcToPoint( Offset(size.width * 0.25, 0), radius: Radius.circular(25), clockwise: false, ); canvas.drawPath(path, paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } } In the above code, the UniqueCornersPainter class creates a shape with the special corners using the CustomPainter class. You can adjust the arcToPoint and lineTo values to modify the curve and corner positions to match your needs more closely.

169 похожих чатов

Is it possible to create a similar outline in Flutter

3 ответов

Похожие вопросы