如何在Flutter Web应用程序中动态更改图像和字体？

如何解决如何在Flutter Web应用程序中动态更改图像和字体？

我想在单击按钮时动态更改背景图像和按钮的颜色。有3个不同的按钮，每个按钮对应一个网站主题（一组背景图片和按钮颜色）。 问题是，当我单击按钮更改网站主题时，什么也没发生。仅当我更改网站比例（'ctrl'+'+/-'）时，网站主题才会更改。

//HERE IS MY CODE THAT STANDS FOR THE BUTTON WIDGET

class ButtonWidget extends StatefulWidget {
  final List listOfThemes;
  final int itemIndex;
  ButtonWidget(this.listOfThemes,this.itemIndex);

  @override
  _ButtonWidgetState createState() => _ButtonWidgetState();
}

class _ButtonWidgetState extends State<ButtonWidget> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 170,height: 50,child: RaisedButton(
        onPressed: () {
          setState(() {
//themesList is a list of objects,each object from the list represents one theme (contains theme images,fonts,colors etc)
          backgroundPath = themesList[widget.itemIndex].backgroundImage;
          changedTextColor = themesList[widget.itemIndex].textColor;
          changedButtonColor = themesList[widget.itemIndex].buttonColor;
          changedButtonTextColor = themesList[widget.itemIndex].buttonTextColor;
          String name = themesList[widget.itemIndex].name;
          print(name);
          });
        },color: themesList[widget.itemIndex].buttonColor,child: Row(
          mainAxisAlignment: MainAxisAlignment.center,children: [
            Text(
              themesList[widget.itemIndex].name,style: TextStyle(
                color: themesList[widget.itemIndex].textColor,),],shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5),);
  }
}

您能否为我提供有关如何在单击按钮时更改网站内容（图像，颜色，字体）的建议，而无需为用户执行任何其他操作？

查看网站屏幕：

before changing scale

after changing website scale

解决方法

查看源代码，您有一个名为itemIndex的属性

此属性在任何地方都不会更改。您正在调用onPressed函数并基于不变的值更改下面的属性。您需要确保在按下任何更改主题的按钮时，它们将依次更改此公共索引的值。我的建议是使用可以在各个小部件之间轻松共享的静态索引。

您也可以执行此操作，以允许主题在彼此之间切换，假设您有3个主题（也不要在SetState（）内做任何工作。此函数仅用于重建小部件） ，这可能会阻塞线程：

  if(widget.itemIndex < 2){
     widget.itemIndex++;
  }
  else {
     widget.itemIndex = 0;
  }

  backgroundPath = themesList[widget.itemIndex].backgroundImage;
  changedTextColor = themesList[widget.itemIndex].textColor;
  changedButtonColor = themesList[widget.itemIndex].buttonColor;
  changedButtonTextColor = themesList[widget.itemIndex].buttonTextColor;
  String name = themesList[widget.itemIndex].name;
  print(name);
                
  setState(() {}); //Rebuild the widget