Flutter alignement and wrap of different texts

Question

This is the model of what i want to do !

I'm contacting you because I'm trying to copy the Libération newspaper application but I'm stuck (already!) on the question of the title.

I have attached a visual and I will try to be clear. I would like the first part of the title to be in red and then the title to continue in black and line up again, aligned to the left, under the red title. I have tried many methods to no avail. Expanded, Wrap... either the text sticks out or, when I manage to make the line break of the black text, it is positioned under the black text, not under the red text, considering that the block starts on the right of the red block.

I tried Wrap, Row, Expanded.

Thank you :-)

Answer 1

this is just an example , If it's dynamic you might want to use: a separator; to split the title or the text or another symbol

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  final String title =
      "Chez Pol; Et si on mesurait le bruit à l'Assemblée pour la santé des députés?";

  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: SafeArea(
        child: Scaffold(
          body: RichText(
            text: TextSpan(
              text: title.split(';')[0].toString(),
              style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
              children: <TextSpan>[
                TextSpan(
                  text: title.split(';')[1].toString(),
                  style: const TextStyle(color: Colors.black),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}