I am doing a LogIn page in flutter and I don't know how to put a image to cover the full screen as a background. My problem is that nothing appears.

And this is my code:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Astronomy Picture of the Day',
      theme: ThemeData(
        primarySwatch: Colors.blue,

********//Here I put the transparent color************** 
        backgroundColor: Color.fromRGBO(24,233, 111, 0.6),
      ),
      // home: const MyHomePage(title: 'Flutter Demo Home Page'),
      home: const LoginPage(),
    );
  }
}

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: Center(

**********    //here is where I put the Box Decoration**************************
              child:Container(
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("images/image.jpg"),
                    fit: BoxFit.cover,
                  ),
                ),
                  child: SizedBox(
                      width: 400,
                      child: Form(
                          child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                TextFormField(
                                    decoration: const InputDecoration(
                                      hintText: 'Username',
                                    )),
                                TextFormField(
                                    decoration: const InputDecoration(
                                      hintText: 'Password',
                                    )),
                                Padding(
                                    padding: const EdgeInsets.symmetric(vertical: 16.0),
                                    child: ElevatedButton(
                                        child: const Text("Login"), onPressed: () {}))
                              ])))),));
  }
}

The most relevant zones are marked with '*'.

I try to put the Box Decoration on the top of the Center().

I expect to see the image as a background.

CodePudding user response：

Just swap your Container and Scaffold widget.

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("images/image.jpg"),
          fit: BoxFit.cover,
        ),
      ),
      child: Scaffold(
          body: Center(
        child: SizedBox(
            width: 400,
            child: Form(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  TextFormField(
                      decoration: const InputDecoration(
                    hintText: 'Username',
                  )),
                  TextFormField(
                      decoration: const InputDecoration(
                    hintText: 'Password',
                  )),
                  Padding(
                      padding: const EdgeInsets.symmetric(vertical: 16.0),
                      child: ElevatedButton(
                          child: const Text("Login"), onPressed: () {}))
                ]))),
      )),
    );
  }
}

This works because Scaffold, by default takes entire space available. Container gets as big as its child. In our case it is scaffold.

Happy coding:)

CodePudding user response：

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: Container(
            decoration:  BoxDecoration(
              image: DecorationImage(
                image: Image.asset("images/image.jpg",
                
                  height: double.infinity,
                width: double.infinity).image,
              

                
              ),
            ),
              child: SizedBox(
                  width: 400,
                  child: Form(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            TextFormField(
                                decoration: const InputDecoration(
                                  hintText: 'Username',
                                )),
                            TextFormField(
                                decoration: const InputDecoration(
                                  hintText: 'Password',
                                )),
                            Padding(
                                padding: const EdgeInsets.symmetric(vertical: 16.0),
                                child: ElevatedButton(
                                    child: const Text("Login"), onPressed: () {}))
                          ])))));
  }
}

I removed the Center widget and add height and width to the image.