CODEWITHSUNDEEP
flutter
yavg
yavg

Reputation: 3051

how can I change the background color of the header using an alertDialog in flutter?

currently only the text is only painted with the following code

enter image description here

AlertDialog(
   shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.circular(20.0)),
   title: Text(
     'Error',
     style: TextStyle(backgroundColor: STYLES.styles["success"]),
   )
   .
   .
   .

I would like to paint the header of the alertDialog in one color, how can I do it?

Upvotes: 1

Views: 3516

Answers (4)

sss.a
sss.a

Reputation: 11

Sorry, I cannot add comment to the approved answer.

So, you need to add clipBehavior: Clip.hardEdge to make header curved.

AlertDialog(
  clipBehavior: Clip.hardEdge,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
  title: Container(
    color: Colors.red,
    child: Text('Error'),
  ),
  titlePadding: const EdgeInsets.all(0),
)

Upvotes: 1

Phakon Rujireksareekul
Phakon Rujireksareekul

Reputation: 21

Try with:

AlertDialog(
    title: Container(
      padding: EdgeInsets.all(15),
      decoration: const BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10.0),
          topRight: Radius.circular(10.0),
        ),
      ),
      child: const Text(
        "Error",
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    ),
    titlePadding: const EdgeInsets.all(0),
    content: const Text("Message"),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    actions: <Widget>[
      MaterialButton(
        child: const Text("Accept"),
        onPressed: () {},
      )
    ],
  ),
  barrierDismissible: false,
);

result

Upvotes: 2

srikanth7785
srikanth7785

Reputation: 1522

You can wrap the title inside a Container and align it with center.

Try something like this..

 AlertDialog(
  shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(20.0)),
  title: Container(
  color: Colors.orange,
  child: Center(
    child: Text("Error"),
 )),
 titlePadding: const EdgeInsets.all(0),
 )

Upvotes: 0

Federick Jonathan
Federick Jonathan

Reputation: 2864

You can use Container as the title.

There's a titlePadding property for AlertDialog. If title isn't null, the default value is 24. therefore you need to explicitly supply it with 0.

AlertDialog(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0)),
  title: Container(
    color: Colors.red,
    child: Text('Error'),
  ),
  titlePadding: const EdgeInsets.all(0),
)

Upvotes: 5

Related Questions