How do I set the background color of my main screen in Flutter?

Question

I'm learning Flutter, and I'm starting from the very basics. I'm not using MaterialApp. What's a good way to set the background color of the whole screen?

Here's what I have so far:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Center(child: new Text("Hello, World!"));
  }
}

Some of my questions are:

What's a basic way to set the background color?
What exactly am I looking at, on the screen? Which code "is" the background? Is there a thing to set the background color on? If not, what's a simple and appropriate "simple background" (in order to paint a background color).

Thanks for the help!

The code above generates a black screen with white text:

Scaffold backgroundColor property is the most used way I think. But there are many other ways depends on your scenario. check this out.. [4 Ways To Set Background Color In Flutter](http://androidride.com/set-background-color-in-flutter/) — c49, Jun 30 '21 at 00:46

score 207 · Answer 1 · edited Mar 07 '22 at 18:30

207

You can set background color to All Scaffolds in application at once.

Just set scaffoldBackgroundColor: in ThemeData:

MaterialApp(
    title: 'Flutter Demo',
    theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFEFEFEF)),
    home: new MyHomePage(title: 'Flutter Demo Home Page'),
);

edited Mar 07 '22 at 18:30

Tyler2P

2,324
26
22
31

answered Apr 08 '19 at 21:04

Sirelon

6,446
5
26
30

4

This is what is required to have the same background color across all pages (scaffolds mostly). Thanks. – iCrus Oct 20 '19 at 05:19
2

Great answer, especially if you use routing and navigation (much better than creating a higher-order widget from Skaffold and use it on all top-level widgets). – Nader Ghanbari Jan 04 '21 at 01:51
1

A perfect answer for me, thanks! – Olek Oct 13 '21 at 21:34
1

Thanks for your answer. I am using the same implementation but the `scaffoldBackgroundColor` seems to be missing from child screen. – Chetan Goyal Apr 28 '22 at 13:52

score 123 · Answer 2 · edited Dec 24 '22 at 02:10

123

I think you can also use a scaffold to do the white background. Here's some piece of code that may help.

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
 
      return new MaterialApp(
        title: 'Testing',
        home: new Scaffold(
        //Here you can set what ever background color you need.
          backgroundColor: Colors.white,
        ),
      );
    }
}

edited Dec 24 '22 at 02:10

starball

20,030
7
43
238

answered Apr 08 '18 at 19:48

DURGA_PRASAD

1,239
1
8
7

i want to give blue color for border and amber for container background color, how can i do? – Kamlesh Jan 05 '20 at 10:53

score 57 · Answer 3 · answered May 06 '17 at 20:07

57

Here's one way that I found to do it. I don't know if there are better ways, or what the trade-offs are.

Container "tries to be as big as possible", according to https://flutter.io/layout/. Also, Container can take a decoration, which can be a BoxDecoration, which can have a color (which, is the background color).

Here's a sample that does indeed fill the screen with red, and puts "Hello, World!" into the center:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(color: Colors.red),
      child: new Center(
        child: new Text("Hello, World!"),
      ),
    );
  }
}

Note, the Container is returned by the MyApp build(). The Container has a decoration and a child, which is the centered text.

See it in action here:

answered May 06 '17 at 20:07

Seth Ladd

112,095
66
196
279

3

Container is a good choice if you're building a simple app or an app that isn't using Material design. If you're building a Material app, consider using ThemeData.dark() if you want a dark background on all your canvases and cards. You can also get fine-grained control over card and canvas background colors using the cardColor and canvasColor arguments to the ThemeData constructor. https://docs.flutter.io/flutter/material/ThemeData/ThemeData.html – Collin Jackson May 07 '17 at 15:46
1

what about setting custom RGB? – Nirav Madariya Apr 01 '18 at 17:00
i want to give blue color for border and amber for container background color, how can i do? – Kamlesh Jan 05 '20 at 10:54
I am not using Scaffold and this solution is incredible. Thanks. – Edgar Froes Dec 09 '20 at 03:47
@CollinJackson What if you are using Material but don't have a Scaffold for every page? Would you still suggest a container or something else? – claudekennilol Jul 25 '22 at 16:53

score 42 · Answer 4 · answered Jul 27 '19 at 11:46

There are many ways of doing it, I am listing few here.

Using backgroundColor

Scaffold(
  backgroundColor: Colors.black,
  body: Center(...),
)

Using Container in SizedBox.expand

Scaffold(
  body: SizedBox.expand(
    child: Container(
      color: Colors.black,
      child: Center(...)
    ),
  ),
)

Using Theme

Theme(
  data: Theme.of(context).copyWith(scaffoldBackgroundColor: Colors.black),
  child: Scaffold(
    body: Center(...),
  ),
)

score 9 · Answer 5 · edited Jun 30 '22 at 10:31

You should return Scaffold widget and add your widget inside Scaffold

Such as this code:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          backgroundColor: Colors.white,
          body: Center(child: new Text("Hello, World!"));
    );
  }
}

score 7 · Answer 6 · edited Mar 07 '22 at 18:33

7

It's another approach to change the color of background:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(home: Scaffold(backgroundColor: Colors.pink,),);
    }
}

edited Mar 07 '22 at 18:33

Tyler2P

2,324
26
22
31

answered Jan 22 '19 at 17:59

sadegh

71
1
3

score 7 · Answer 7 · answered Aug 02 '19 at 21:32

7

Scaffold(
      backgroundColor: Constants.defaulBackground,
      body: new Container(
      child: Center(yourtext)

      )
)

answered Aug 02 '19 at 21:32

Hunnain Pasha

87
1
7

Whilst this code may solve the issue, you should always explain why/how your code works. – JaffaKetchup Mar 02 '21 at 11:59

score 6 · Answer 8 · answered Nov 22 '22 at 12:31

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.black, 
      ),
      home HomeScreen(),
    );
  }
}

score 5 · Answer 9 · edited Mar 07 '22 at 18:32

On the basic example of Flutter you can set with backgroundColor: Colors.X of Scaffold

@override
Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
        backgroundColor: Colors.blue,
        body: Center(
            // Center is a layout widget. It takes a single child and positions it
            // in the middle of the parent.
            child: Column(
                // Column is also layout widget. It takes a list of children and
                // arranges them vertically. By default, it sizes itself to fit its
                // children horizontally, and tries to be as tall as its parent.
                //
                // Invoke "debug painting" (press "p" in the console, choose the
                // "Toggle Debug Paint" action from the Flutter Inspector in Android
                // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
                // to see the wireframe for each widget.
                //
                // Column has various properties to control how it sizes itself and
                // how it positions its children. Here we use mainAxisAlignment to
                // center the children vertically; the main axis here is the vertical
                // axis because Columns are vertical (the cross axis would be
                // horizontal).
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Text(
                        'You have pushed the button this many times:',
                    ),
                    Text(
                        '$_counter',
                        style: Theme.of(context).textTheme.display1,
                    ),
                ],
            ),
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add_circle),
        ), // This trailing comma makes auto-formatting nicer for build methods.
    );
}

score 4 · Answer 10 · answered Nov 17 '17 at 11:35

I think you need to use MaterialApp widget and use theme and set primarySwatch with color that you want. look like below code,

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

score 4 · Answer 11 · edited Mar 22 '21 at 21:26

4

home: Scaffold(
            backgroundColor:  Color(
                0xBF453F3F),

and done :)

edited Mar 22 '21 at 21:26

dbc

104,963
20
228
340

answered Mar 22 '21 at 17:30

nafashmn.ir

111
2
2
9

score 3 · Answer 12 · answered Oct 05 '21 at 07:08

3

You can just put the six digit hexa after (0xFF**......**):

return Scaffold( 
    backgroundColor: const Color(0xFFE9ECEF),
.....) } )

answered Oct 05 '21 at 07:08

Basil Shaikh

41
2

score 2 · Answer 13 · answered Apr 11 '21 at 16:03

Sample code:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sample App'),
          backgroundColor: Colors.amber,  // changing Appbar back color
        ),
        backgroundColor: Colors.blue,     // changing body back color
      ),
    ),
  );
}

score 2 · Answer 14 · answered Dec 30 '21 at 15:32

2

As sirelon suggested, add scaffold color in the theme like this,

theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFEFEFEF)),

or can give color to individual scaffold like this

Scaffold(
    backgroundColor: Color(0xFFF1F1F1),
    ...
);

answered Dec 30 '21 at 15:32

Ali Yar Khan

1,231
2
11
33

score 0 · Answer 15 · answered Nov 22 '22 at 12:23

Try the following code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white, // Change the background color of all Scaffold widgets of your app here
      ),
      home: const Scaffold(
        body: Center(child: Text("Hello, World!")),
        backgroundColor: Colors.white, // Change the background color of this Scaffold widget here
      ),
    );
  }
}

How do I set the background color of my main screen in Flutter?

15 Answers15

Linked