How to Change Background Color of a Screen in Flutter

Making a mobile app user interface beautiful has many aspects. Sometimes, you may want to change the plain white background color of screens to make your app looks cool. In this blog post, let’s see how to change the background color of a screen in Flutter.

Making Scaffold widget as the root of your screen will help you to change the background color. Using Scaffold class basic material design layout can be applied. It has a property named backgroundColor to change the background color of the Scaffold widget.

Following is a Flutter example where the background color of the screen is defined.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        backgroundColor: Color(0xff00BCD1),
        appBar: AppBar(
          title: Text('Flutter Screen Background Color Example'),
        ),
        body: Center(child: Body()),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('How Are You?');
  }
}

Following is the output screenshot of the Flutter Example.

1 thought on “How to Change Background Color of a Screen in Flutter”

  1. Pingback: Day 37: Flutter – Keyless Websites

Leave a Comment

Your email address will not be published. Required fields are marked *