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:

Answer 1

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'),
);

Answer 2

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,
        ),
      );
    }
}

Hope this helps 😊.

Answer 3

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:

Answer 4

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

1. Using backgroundColor

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

2. Using Container in SizedBox.expand

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

3. Using Theme

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

Answer 5

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

      )
)

Answer 6

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!"));
    );
  }
}

Answer 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,),);
    }
}

Answer 8

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.
    );
}

Answer 9

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'),
    );
  }
}

Answer 10

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

and done :)

Answer 11

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

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

Answer 12

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
      ),
    ),
  );
}

Answer 13

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),
    ...
);

Answer 14

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(),
    );
  }
}

Answer 15

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
      ),
    );
  }
}