How to set Background Color of a Screen in Flutter

Hello guys how are you all? Hope you all are fine. Sometimes, we need to change the plain white background color of screens to make your app looks cool. So in this tutorial we are going to learn How to set Background Color of a Screen in Flutter ? without wasting your time lets start this tutorial.

How to set Background Color of a Screen in Flutter

There are two ways to set Background Color of a Screen in Flutter. You can directly add backgroundColor to Scaffold widget. this will set your entire screen. It has a property named backgroundColor to change the background color of the Scaffold widget. Here is My Example.

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.yellow,
      appBar: new AppBar(
        title: new Text('Set Background Colour- FlutterCorner'),
        backgroundColor: Colors.green,
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Center(
          
        ),
      ),
    );
  }

Output Is as given below.

If you dont want to give Scaffold backgroundColour then you can also set backgroundcolour to body by this way.

First of all use Container as body and Container has color property or if you are using decoration to container then simply give color in decoration. Here is my Example.

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.yellow,
      appBar: new AppBar(
        title: new Text('Set Background Colour- FlutterCorner'),
        backgroundColor: Colors.green,
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
        padding: const EdgeInsets.all(20),
        child: Center(),
      ),
    );
  }

Faq

Summery

So, It’s All About this tutorial. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• How to make a blur Background Image effect in Flutter using BackdropFilter.
• Create Rounded Corners Image in Flutter.
• set Background Image to Scaffold in Flutter.
• How To Select multiple images with Flutter
• How to Set Network Image In Circular Avatar In Flutter?