Question

所以我在 flutter 中添加了文件，并在 pubspec.yaml 文件中的资产下正确添加了它们，名称也是正确的，它没有给我任何错误，但图像仍然没有显示。我在其他屏幕上添加了一些其他图像，它们似乎工作得很好。 logo.png 也显示在另一个屏幕上，没有问题，但不在此屏幕上。本质上，该代码为注册屏幕创建了两个输入字段和一个按钮，并在该 3 个气泡下方带有 facebook 图标、google 图标和 twitter 图标。它还应该在输入字段上方有应用徽标，但没有显示任何内容。

我想问的另一个问题是，如何在这样的屏幕中将背景颜色更改为黑色？我是否用脚手架包裹容器？


class RegisterScreenMain extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scaffold(
        body: Body(),
      ),
    );
  }
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Column(children: <Widget>[
      Text(
        "Sign Up",
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
      ),
      Image.asset(
        "lib/assets/images/logo.png",
        height: size.height * 0.35,
      ),
      RoundedInputField(
        hintText: "Your Email",
        onChanged: (value) {},
      ),
      RoundedPasswordField(
        onChanged: (value) {},
      ),
      roundedButton(
        text: "Register",
        press: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) {
              return UserRegisterPreferences();
            }),
          );
        },
      ),
      AlreadyHaveAnAccountCheck(
        login: false,
        press: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) {
              return LoginScreenMain();
            }),
          );
        },
      ),
      OrDivider(),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SocialIcon(
            iconSrc: "lib/assets/images/facebook.png",
            press: () {},
          ),
          SocialIcon(
            iconSrc: "lib/assets/images/twittter.png",
            press: () {},
          ),
          SocialIcon(
            iconSrc: "lib/assets/images/google.png",
            press: () {},
          ),
        ],
      )
    ]);
  }
}

Answer 1

Prabanshu 的回答对您的问题是正确的。但是对于问题的后半部分，您询问如何将背景颜色更改为黑色，请尝试将自定义主体小部件的列包裹在脚手架中。然后您将能够更改背景颜色。这会起作用

  class RegisterScreenMain extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Scaffold(
            body: Body(),
          ),
        );
      }
    }
    
    class Body extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        Size size = MediaQuery.of(context).size;
        return Scaffold(
          body: Column(children: <Widget>[
          Text(
            "Sign Up",
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
          ),
          Image.asset(
            "lib/assets/images/logo.png",
            height: size.height * 0.35,
          ),
          RoundedInputField(
            hintText: "Your Email",
            onChanged: (value) {},
          ),
          RoundedPasswordField(
            onChanged: (value) {},
          ),
          roundedButton(
            text: "Register",
            press: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) {
                  return UserRegisterPreferences();
                }),
              );
            },
          ),
          AlreadyHaveAnAccountCheck(
            login: false,
            press: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) {
                  return LoginScreenMain();
                }),
              );
            },
          ),
          OrDivider(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SocialIcon(
                iconSrc: "lib/assets/images/facebook.png",
                press: () {},
              ),
              SocialIcon(
                iconSrc: "lib/assets/images/twittter.png",
                press: () {},
              ),
              SocialIcon(
                iconSrc: "lib/assets/images/google.png",
                press: () {},
              ),
            ],
          )
        ]);
      backgroundColor: Colors.black,
        )
      }
    }

Answer 2

加载图片

<块引用>

停止调试应用程序 -> 运行 flutter clean -> 运行 flutter pub get -> 卸载应用程序 -> 再次开始调试

向您的脚手架小部件添加以下行-

backgroundColor: Colors.red,

除了图像颤振外，一切都在显示

2 个答案: