How can I create a custom widget like this in Flutter? [closed] - flutter

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
This is the required widget
I have tried using Stack. But didn't got correct solution

Answer 1

You can achieve this first you need to calculate the Text widget to draw that blue underline with that same width of the text using TextPainter and LayoutBuilder:
class TextPainterWidget extends StatelessWidget {
final TextPainter textPainter;
const TextPainterWidget({
Key? key,
required this.textPainter,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return CustomPaint(
painter: _TextPainterWidget(textPainter),
);
}
}
class _TextPainterWidget extends CustomPainter {
final TextPainter textPainter;
_TextPainterWidget(this.textPainter);
#override
void paint(Canvas canvas, Size size) {
textPainter.layout();
textPainter.paint(canvas, Offset.zero);
}
#override
bool shouldRepaint(_TextPainterWidget oldDelegate) {
return oldDelegate.textPainter.text != textPainter.text ||
oldDelegate.textPainter.text?.style != textPainter.text?.style;
}
}
Then Your main widget should be like that:
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final TextPainter textPainter = TextPainter(
text: const TextSpan(
text: 'Grab The Best Deal On ',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
children: <TextSpan>[
TextSpan(
text: 'Smartphones',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
],
),
textDirection: TextDirection.ltr,
)..layout(maxWidth: constraints.maxWidth);
final double textWidth = textPainter.width;
return Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
TextPainterWidget(textPainter: textPainter),
Row(
children: <Widget>[
const Text('View All'),
const SizedBox(width: 8),
InkWell(
onTap: () {},
child: const Icon(
Icons.arrow_forward_ios,
size: 15,
color: Colors.blue,
),
),
],
),
],
),
Row(
children: <Widget>[
SizedBox(
width: textWidth,
child: const Divider(
color: Colors.blue,
thickness: 2,
),
),
const Expanded(
child: Divider(
color: Colors.grey,
thickness: 1,
),
),
],
),
],
);
},
),
Here's the code on Zapp