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

How can I give my text a background color? – Flutter

I want to give color to the text background like the picture below:

enter image description here

while mine is still like this:

enter image description here

And the code that I have written is like this:

Text(
                'Last Activity',
                style: TextStyle(
                  fontSize: 16,
                  color: ColorName.whitePrimary,
                ),
              ),
Tags:

5

Answers


  1. 0

    Set the style parameter in your Text widget:

     Text(
      'Hello, World!',
      style: TextStyle(fontSize: 32, backgroundColor: Colors.green),
    );

    Result

    See also

    Login or Signup to reply.
  2. 0

    Try the following code:

    Text(
  'Last Activity',
  style: TextStyle(
    fontSize: 16,
    color: ColorName.whitePrimary,
  ),
),
    Login or Signup to reply.
  3. 0 
    body: Center(
        child: TextButton.icon(
          style: TextButton.styleFrom(
            textStyle: TextStyle(color: Colors.blue),
            backgroundColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(6.0),
            ),
          ),
          onPressed: () => {},
          icon: Text('Last Activity'),
          label: Icon(Icons.chevron_right),
        ),
      ),

    enter image description here

    Login or Signup to reply.
  4. 0

    Try the following code:

    Text(
  'Last Activity',
  style: TextStyle(
    fontSize: 16,
    color: ColorName.whitePrimary,
    backgroundColor: Colors.indigo[400],
  ),
),
    Login or Signup to reply.
  5. 0

    Refer below code hope its help to you, I have try 2 ways TextButton.icon and Row

    1. Using TextButton Widget

       TextButton.icon(
        style: TextButton.styleFrom(
          foregroundColor: Colors.white,
          backgroundColor: const Color.fromRGBO(60, 75, 175, 1),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(6.0),
          ),
        ),
        onPressed: () => {},
        icon: const Text('Last Activity'),
        label: const Icon(Icons.chevron_right),
      ),

    Result Using TextButton.icon-> image

    2. Using Row

       GestureDetector(
            onTap: () {},
            child: Container(
              height: 30,//change on your need
              width: 120,//change on your need
              padding: const EdgeInsets.all(5),
              alignment: Alignment.center,
              color: const Color.fromRGBO(60, 75, 175, 1),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: const [
                    Text(
                    'Last Activity',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                    Icon(
                    Icons.chevron_right,
                    color: Colors.white,
                  ),
                ],
              ),
            ),
          ),

    Result Using Row-> image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search