How to place content inside custompaint widget? - flutter

Question

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: CustomPaint(
painter: RPSCustomPainter(),
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.width * 0.73.toDouble(),
child: Text('Hi Nithya'))));
}
}
class RPSCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint0 = Paint()
..color = const Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.stroke
..strokeWidth = 1;
Path path0 = Path();
path0.moveTo(size.width * 0.3147368, size.height * 0.1385714);
path0.lineTo(size.width * 0.3145895, size.height * 0.4253429);
path0.quadraticBezierTo(size.width * 0.3334211, size.height * 0.4532571,
size.width * 0.3331895, size.height * 0.4633429);
path0.quadraticBezierTo(size.width * 0.3334526, size.height * 0.4708429,
size.width * 0.3147368, size.height * 0.4957143);
path0.lineTo(size.width * 0.3136842, size.height * 0.7828571);
path0.lineTo(size.width * 0.7378947, size.height * 0.7842857);
path0.lineTo(size.width * 0.7368421, size.height * 0.4985714);
path0.quadraticBezierTo(size.width * 0.7134000, size.height * 0.4737143,
size.width * 0.7131368, size.height * 0.4655000);
path0.quadraticBezierTo(size.width * 0.7134000, size.height * 0.4558571,
size.width * 0.7368421, size.height * 0.4271429);
path0.lineTo(size.width * 0.7357895, size.height * 0.1428571);
path0.lineTo(size.width * 0.3147368, size.height * 0.1385714);
path0.close();
canvas.drawPath(path0, paint0);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
I want the text to print inside the shape . But it is printing outside. How to increase or decrease the size of the shape based on content's width and height? I want the content to print only inside the custom shape. The shape should adjust to content's width and height automatically. How to achieve it?.

Answer 1

Wrapping your child Widget by Center Widget will solve the issue...
below code for your reference
CustomPaint(
painter: RPSCustomPainter(),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.width * 0.73.toDouble(),
child: const Center(child: Text('Hi Hari'))
),
);
have a good day!!!