flutter: one String Text with multiple colors inside the AppBar

Question

I would like to write the company name with the original colors inside the AppBar of the application. For example the word "WhiteRed" with the "White" text in white color and "Red" text in red color. At the moment I am using this method to do it inside the home page but I am not able to reproduce it inside the AppBar.

There is a method for it?

Thanks for your answer

  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 200, top: 200),
          child: Container(
            child: RichText(
              text: const TextSpan(
                children: <TextSpan>[
                  TextSpan(
                      text: 'White',
                      style: TextStyle(color:Colors.white, fontSize: 40, fontWeight: FontWeight.bold)),
                  TextSpan(
                      text: 'Red',
                      style: TextStyle(color: Colors.red, fontSize: 40, fontWeight: FontWeight.bold)),
                ],
              ),
            ),
          ),
        ),

Answer 1

You can use Text Widget inside a Row :

  appBar: AppBar(
      title: const Row(children: [
    Text('White', style: TextStyle(color: Colors.white)),
    Text('Red', style: TextStyle(color: Colors.red)),
  ])),

Answer 2

You can achieve this by using RichText. Here is the code

Scaffold(
        appBar: AppBar(
          title: RichText(
            text: TextSpan(
              children: [
                TextSpan(
                  text: 'White',
                  style: TextStyle(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold),
                ),
                TextSpan(
                  text: 'Red',
                  style: TextStyle(color: Colors.red, fontSize: 24, fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.only(bottom: 200, top: 200),
                child: Container(
                  child: RichText(
                    text: const TextSpan(
                      children: [
                        TextSpan(
                          text: 'White',
                          style: TextStyle(color: Colors.white, fontSize: 40, fontWeight: FontWeight.bold),
                        ),
                        TextSpan(
                          text: 'Red',
                          style: TextStyle(color: Colors.red, fontSize: 40, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),