Flutter App: Background doesn't change from black to teal

1.2k views Asked by At

I created a small application with two dice. It works perfectly like I wanted to do it. For the first time, I have a problem with changing the background color of this page. As you can see in my Code below, I chose the backgroundcolor "teal". I have no idea, why this Background doesn't change to "teal". On all the other pages of my App, the Backgroundcolor is "teal"

Can someone help me with this problem.

Here's the complete code of this page:

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: DicePage(),
      ),
    ),
  );
}

class DicePage extends StatefulWidget {
  @override
  _DicePageState createState() => _DicePageState();
}
class _DicePageState extends State<DicePage> {
  int leftDiceNumber = 1;
  int rightDiceNumber = 1;

  void changeDiceFace() {
    setState(() {
      leftDiceNumber = Random().nextInt(6) + 1;
      rightDiceNumber = Random().nextInt(6) + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(

        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(40.0),
              child: FlatButton(
                onPressed: () {
                  setState(() {
                    leftDiceNumber = Random().nextInt(6) + 1;
                  });
                },
                child: Image.asset('images/dice$leftDiceNumber.png'),
              ),
            ),
          ),

          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(40.0),
              child: FlatButton(
                onPressed: () {
                  changeDiceFace();
                },
                child: Image.asset('images/dice$rightDiceNumber.png'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
3

There are 3 answers

0
Shubham Narkhede On

In your MaterialApp there is one method name ThemeData. You can set theme of your app through this. You can follow below code

void main() {
  return runApp(
    MaterialApp(
    theme: ThemeData(
          primarySwatch: Colors.teal,
        ),
      home: Scaffold(
        body: DicePage(),
      ),
    ),
  );
}
0
Adelina On

If you are using same background color for all screens would consider changing it via theme:

 MaterialApp(
      theme:ThemeData(scaffoldBackgroundColor: Colors.teal),
      home: Scaffold(...
0
Victor Cheng On

I ran your codes except the images part and the background color shows correctly. I think you can check your images but not the codes.