How to Change Background Color of a Screen in Flutter

In most cases we use Scaffold as root of an app’s home. There are 2 ways we can modify it

Use ThemeData

We can background color via scaffoldBackgroundColor. This approach affects background color of all screens if there is no overriding.

return MaterialApp(
  title: 'App Name',
  theme: ThemeData(
    primarySwatch: Colors.pink,
    visualDensity: VisualDensity.adaptivePlatformDensity,
    backgroundColor: Color(0xffffecff),
    scaffoldBackgroundColor: Color(0xffffecff)
  ),
  home: LoginPage(),
);

Scaffold’s backgroundColor

This affects the screen where you use this Scaffold

return Scaffold(
  backgroundColor: Colors.blue,
  body: Text(''),
);

Leave a Comment

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close