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

Just use the same RichText in the title property of AppBar, it will work. Also consider using Text.rich instead — Dhafin Rayhan
– Dhafin Rayhan, Commented Jan 14, 2024 at 18:07

Eric Martin · Accepted Answer · 2024-01-14 17:51:31Z

0

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

answered Jan 14, 2024 at 17:51

Eric Martin

5504 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OltreXR4 Over a year ago

Thanks, easy, it works, as you understand I am a beginner. thanks for the patience

Aizan Sagheer · Accepted Answer · 2024-01-15 06:19:25Z

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

Collectives™ on Stack Overflow

flutter: one String Text with multiple colors inside the AppBar

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest