要实现这一点，首先需要使用TextPainter和LayoutBuilder计算Text小部件，以绘制与文本宽度相同的蓝色下划线：

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;
  }
}

那么你的主窗口部件应该是这样的：

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,
                          ),
                        ),
                      ],
                    ),
                  ],
                );
              },
            ),

这是code on Zapp