Dimitris Konstantinou
Dimitris Konstantinou

Reputation: 119

Everything is showing except the images Flutter

So i added the files in flutter and also correctly added them under assets in the pubspec.yaml file, the names are also correct and it does not give me any errors but the images still don't show. I added some other images in other screens and they seem to work just fine. The logo.png is also shown in another screen with no issue but not on this screen. Essentially the code creates two input fields and a button for a register screen and below that 3 bubbles with the facebook icon, google icon and twitter icon. It should also have the app logo above the input fields but nothing is showing.

Another question i wanted to ask is how would i change the background colour to black in a screen like this? Do i wrap the container with a scaffold?


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: () {},
          ),
        ],
      )
    ]);
  }
}

Upvotes: 0

Views: 171

Answers (2)

Prabhanshu Tiwari
Prabhanshu Tiwari

Reputation: 302

  1. To load image

Stop debugging app -> run flutter clean -> run flutter pub get -> uninstall app -> Start debug again

  1. Add following line to you scaffod widget-

    backgroundColor: Colors.red,

Upvotes: 1

Kavindu_Katuwandeniya
Kavindu_Katuwandeniya

Reputation: 31

Prabanshu's answer is correct on your problem. But for the latter part of your problem, in which you asked how to change the color of the background to black, try to wrap the column of your custom body widget in a scaffold. Then you will be able to change the background color. This will work

  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,
        )
      }
    }

Upvotes: 1

Related Questions