Flutter App：背景不会从黑色变为蓝绿色

Posted 2023-03-10

【中文标题】Flutter App：背景不会从黑色变为蓝绿色

【英文标题】：Flutter App: Background doesn't change from black to teal

【发布时间】：2021-04-27 01:54:08

【问题描述】：

我用两个骰子创建了一个小应用程序。它完全像我想做的那样工作。第一次，我在更改此页面的背景颜色时遇到问题。正如您在下面的代码中看到的那样，我选择了背景色“青色”。我不知道，为什么这个背景不会变成“蓝绿色”。在我的应用程序的所有其他页面上，Backgroundcolor 是“青色”

谁能帮我解决这个问题。

这是该页面的完整代码：

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'),
              ),
            ),
          ),
        ],
      ),
    );
  

【参考方案1】：

在您的MaterialApp 中有一个方法名称ThemeData。您可以通过此设置应用程序的主题。您可以按照以下代码进行操作

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

【参考方案2】：

如果您为所有屏幕使用相同的背景颜色，请考虑通过主题更改它：

 MaterialApp(
      theme:ThemeData(scaffoldBackgroundColor: Colors.teal),
      home: Scaffold(...

【参考方案3】：

我运行了您的代码，但图像部分和背景颜色显示正确。我认为您可以检查您的图像，但不能检查代码。