Flutter Question posted in
The official Flutter documentation can be found here.

flutter: one String Text with multiple colors inside the AppBar

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

2

Answers


  1. 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)),
  ])),
    Login or Signup to reply.
  2. 0

    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),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search