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 *