CODEWITHSUNDEEP
dartflutterflutter-layout
Vipin Dubey
Vipin Dubey

Reputation: 409

How to change background color of Scaffold widget programatically for whole application

I am new to the flutter application development and got stuck in a problem.My application contains near about 5-6 screens and all the screens contains the scaffold widget like this.

  @override
      Widget build(BuildContext context) {

return Scaffold(
 backgroundColor: const Color(0xFF332F43)
);
}

Now on all the screens i have the same concept and design like this and all the screens will share same backGround color.Now i have a button in all screens i.e. Change Theme button and on the button click of that Change Theme button i want to change all the screens Scaffold widget to be changed.Now how can i achieve this ? Please help me in my problem.

Upvotes: 3

Views: 14656

Answers (2)

Rahul Dange
Rahul Dange

Reputation: 2671

Flutter has predefined way to change background color of scaffold across app.

Just change it in MaterialApp Widget inside of your main.dart (main file).

MaterialApp(
      title: 'Flutter',
      theme: ThemeData(
          scaffoldBackgroundColor: const Color(0xFF332F43),
           ),
      );

Upvotes: 6

CopsOnRoad
CopsOnRoad

Reputation: 267584

enter image description here

Color color = Colors.blue; // make it at root level

void main() {
  runApp(MaterialApp(home: Page1()));
}

In your page1 class, import above file. 

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: color,
      appBar: AppBar(title: Text("Page 1")),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (c) => Page2())),
              child: Text("Go to Page 2"),
            ),
            RaisedButton(
              child: Text("Change color"),
              onPressed: () => setState(() => color = Colors.red),
            ),
          ],
        ),
      ),
    );
  }
}

In your page2 class, import first file. 

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: color,
      appBar: AppBar(title: Text("Page 2")),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Back"),
            ),
            RaisedButton(
              child: Text("Change color"),
              onPressed: () => setState(() => color = Colors.green),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 6

Related Questions