So I write some code by using CodePainter in Flutter. Here's my code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class BackgroundShape extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint();
paint.color = Colors.black;
var smallRect = Alignment.bottomCenter.inscribe(Size(100, 50), Rect.fromLTWH(size.width/2 -35, size.height-40, 40, 30));
var path = Path();
path.fillType = PathFillType.evenOdd;
path.addRRect(RRect.fromRectAndCorners(Rect.fromLTWH(0, 0, size.width, size.height), bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)));
path.addRRect(RRect.fromRectAndCorners(smallRect, topLeft: Radius.circular(10), topRight: Radius.circular(10)));
path.lineTo(0, size.height);
path.lineTo(size.width/2 - 35, size.height);
path.lineTo(size.width/2 - 35, size.height-40);
path.lineTo(size.width/2 + 35, size.height-40);
path.lineTo(size.width/2 + 35, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
How to add border radius? please help me:D thanks!
For some reason, I'm not able to run completely the code you've provided, but taking consideration your current requirements and from the comments. I've created the following samples for your references:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Container(
width: 200,
height: 200,
child: CustomPaint(
painter: PainterTwo(),
),
),
),
);
}
}
class PainterOne extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
double w = size.width;
double h = size.height;
double r = 15;
var paint1 = Paint()
..color = Color(0xff888888)
..style = PaintingStyle.fill;
RRect fullRect = RRect.fromRectAndRadius(
Rect.fromCenter(center: Offset(w / 2, h / 2), width: w, height: h),
Radius.circular(r),
);
canvas.drawRRect(fullRect, paint1);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
class PainterTwo extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeWidth = 8.0;
Path path = Path();
path.addRRect(RRect.fromRectAndRadius(
Rect.fromLTWH(
size.width / 2, size.height / 2, size.width / 4, size.height / 4),
Radius.circular(15)));
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
Output of PainterOne():
Output of PainterTwo():
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.