4 Ways To Set Background Color Of A Screen In Flutter

UI/UX has an importance in your app’s success. A likable user interface can win customers’ trust and love. Therefore sometimes you need to change the default look of the app. So in this post, as a first step, you will learn how to set background color in Flutter.

In Flutter, you can achieve a simple thing in different ways. setting background color too.

Let’s check it out, then.

• How To Set Container Background Color?
• How To Set Row Background Color In Flutter?
• How To Set Background Image In Flutter?

1. How To Set Background Color Using scaffoldBackgroundcolor property

Scaffold widget provides backgroundColor property to change the background color. By default, it uses Theme.scaffoldBackgroundColor.

• You can use Colors class values or hex code values.
• Use hex code like this: 0xff+Hex Code

Scaffold(
         backgroundColor: Color(0xfff57d7c),
         //backgroundColor: Colors.red,

...)

Complete source code is given below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xfff57d7c),
        // backgroundColor: Colors.red,
        body: Center(
          child: Text(
            'Set Background Color Example',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

• Remove Debug Banner In Flutter

2. Set Background Color Using MaterialApp property

In this example, we will use scaffoldBackgroundColor to change background color. It affects all scaffolds in your app.

MaterialApp(
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.orange,
      ),
      home: MyApp(),
    )

The complete source code is given below.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.orange,
      ),
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Set Background Color Example 2'),
      ),
      body: Center(
        child: Text(
            'Set Background Color Using \n\nscaffoldBackgroundColor Property'),
      ),
    );
  }
}

• Flutter Text Line Break Example

3. Change Background Color Using Theme class

In this example, You will use Theme class. Using Theme class, You can change background color using scaffoldBackgroundColor property.

• copyWith() method takes properties which need to change and return new object.

Theme(
        data: Theme.of(context).copyWith(
          scaffoldBackgroundColor: Colors.indigo,
        )
....

Complete Source code is given below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Theme(
        data: Theme.of(context).copyWith(
          scaffoldBackgroundColor: Colors.indigo,
        ),
        child: Scaffold(
          body: Center(
            child: Text(
              'Set Background Color Using Theme Class',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4.1 Set Background Color Using Container

In this example, we will use Container widget to set background color. Container uses complete height and width of the screen.

Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.yellow,
          child: Center(child: Text('Set Background Color Using Container')),
        ),
      ),

Complete Source code is given below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.yellow,
          child: Center(child: Text('Set Background Color Using Container2')),
        ),
      ),
    );
  }
}

4.2 Set Background Color Using Container and SizedBox

• SizedBox.expand() become large as parent allows.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SizedBox.expand(
          child: Container(
            color: Colors.yellow,
            child: Center(
              child: Text('Set Background Color Using Container & SizedBox'),
            ),
          ),
        ),
      ),
    );
  }
}

That’s all for now. If you like this post, please share it with your family and friends.
Thank you.

• Scaffold’s backgroundColor property