How to set background colour to the width containing text in flutter

user_10866639 0
Viewed 6382

I have a text which is basically a title in a box and I want to provide a background color to the space behind that text .


        Padding(
          padding: EdgeInsets.all(15.0),
          child: Text(
            'Your Profile',
            style: TextStyle(
              color: Colors.blue,
              fontSize: 26.0,                
              background: Paint()..color = Colors.blue,

            ),

This is what I tried but it seems not working.

Expected:Here "Your profile" text has a background color, I need to achieve this.

enter image description here

dart flutter background text
3 Answers

You can wrap it with a Container() but, most probably you have to define the width with something like double.maxFinite

Check this 

Container(
width: double.maxFinite,
color: Colors.red, //define the background color
child: Text("My Text"),
)
user_106608230

Short answer: 

Text(
  "Hello World",
  style: TextStyle(backgroundColor: Colors.blue), // give any color here
)

Full answer

enter image description here

You can use this in your showDialog call, Here is the full widget you were looking for. 

Dialog(
  elevation: 12,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        color: Colors.blue[800],
        width: double.maxFinite,
        alignment: Alignment.center,
        padding: EdgeInsets.symmetric(vertical: 16),
        child: Text(
          "Your Profile...",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 32),
        child: Column(
          children: <Widget>[
            SizedBox(height: 12),
            TextField(decoration: InputDecoration(hintText: "Select a Photo")),
            TextField(decoration: InputDecoration(hintText: "Take a Photo...")),
            TextField(decoration: InputDecoration(hintText: "Choose form Library")),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(vertical: 12),
        child: RaisedButton(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
          child: Text("Back"),
          onPressed: () {},
          color: Colors.red,
          textColor: Colors.white,
        ),
      )
    ],
  ),
user_66186220

I agree with Saeb Nabil's answer, the easiest way is to use a container. That way you can also control the padding around the text. You can also use .withOpacity() to add transparency if you wish:

Container(
   width: 100,
   padding: EdgeInsets.symmetric(horizontal: 0, vertical: 10),
   color: Colors.grey[900].withOpacity(0.6),
   child: Text(
      "Hello world!",
      style: TextStyle(
         fontSize: 14,
         color: Colors.white),
   ), // Text
), // Container
user_17956940
Related