SingleChildScrollView height to max height with image background in flutter

Question

In the Login screen, there is a background image and all stuff will be scrollable but SingleChildScrollView is not showing macth_parent height. My aim is to design like here

 class MyLoginOne extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
         body: new Container(
           decoration: new BoxDecoration(
               image: new DecorationImage(
                   fit: BoxFit.cover,
                   image:new NetworkImage('https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg')
               )
           ),
           child: new BackdropFilter(
             filter:new ImageFilter.blur(sigmaX: 1.1,sigmaY:1.1),
             child: new Container(
               decoration: new BoxDecoration(color: Colors.black45.withOpacity(0.5)),
               child: new SingleChildScrollView(
                 child: new Container(
                   child: new Column(
                 children: <Widget>[
                 new Container(
                     height: 200.0,
                     child: new Stack(
                       children: <Widget>[
                         new Align(
                             alignment: AlignmentDirectional.center,
                             child:new Container(
                               height: 120.0,
                               width: 120.0,
                               decoration: new BoxDecoration(
                                   shape: BoxShape.circle,
                                   color: Colors.white30
                               ),
                             )
                         ),
                         new Align(
                           alignment: AlignmentDirectional.center,
                           child: new Container(
                             child: new Text("Farha",style: new TextStyle(
                                 color: Colors.white,
                                 fontSize: 14.0,
                                 fontFamily: "WorkSansLight"
                             ),),
                       ),),],))],),),)),), ));}}

my circle container height is about 200.0 but SingleChildScrollView is not showing full height.

score 36 · Accepted Answer · answered Jan 17 '19 at 15:54

Code of the required layout - its not 100% but get the job Done. You can Complete it as required.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: new BoxDecoration(
                image: new DecorationImage(
                    fit: BoxFit.cover,
                    image: new NetworkImage(
                        'https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg'))),
          ),
          Center(
            child: SingleChildScrollView(
              padding: EdgeInsets.all(30.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  CircleAvatar(
                    radius: 58.0,
                    child: Text('Travel'),
                  ),
                  SizedBox(
                    height: 20.0,
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        prefixIcon: Icon(
                          Icons.person,
                          color: Colors.white,
                        ),
                        hintStyle: TextStyle(color: Colors.white),
                        filled: true,
                        fillColor: Colors.black45,
                        hintText: 'Username'),
                  ),
                  SizedBox(
                    height: 10.0,
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        filled: true,
                        prefixIcon: Icon(Icons.lock, color: Colors.white),
                        hintStyle: TextStyle(color: Colors.white),
                        fillColor: Colors.black45,
                        hintText: 'Password'),
                  ),
                  SizedBox(
                    height: 15.0,
                  ),
                  FlatButton(
                      onPressed: () {},
                      child: Text(
                        'Forgot your Password?',
                        style: TextStyle(color: Colors.white),
                      )),
                  SizedBox(
                    height: 15.0,
                  ),
                  RaisedButton(
                    onPressed: () {},
                    child: Padding(
                        padding: EdgeInsets.all(15.0),
                        child: Text('LOGIN')),
                    color: Colors.redAccent,
                    textColor: Colors.white,
                  ),
                  SizedBox(
                    height: 10.0,
                  ),
                  RaisedButton(
                    onPressed: () {},
                    child: Padding(
                        padding: EdgeInsets.all(15.0),
                        child: Text('REGISTER')),
                    color: Colors.grey,
                    textColor: Colors.white,
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Divider(
                          color: Colors.white,
                          height: 8.0,
                        ),
                      ),
                      SizedBox(
                        width: 8.0,
                      ),
                      Text(
                        'OR',
                        style: TextStyle(color: Colors.white),
                      ),
                      SizedBox(
                        width: 8.0,
                      ),
                      Expanded(
                        child: Divider(
                          color: Colors.white,
                          height: 8.0,
                        ),
                      )
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      // TODO Social Icons
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

OutPut:

great job, I'm doing extra effort to make this UI but you did it in fewer widgets. — Farhana Naaz Ansari, Jan 18 '19 at 04:41
As you drag up and down, don't you get the 'scroll bounds' visual effect in the middle of the image? — aaronvargas, May 07 '19 at 19:12
Sorry but this is very wrong, yes it will work but you'll face this issue https://stackoverflow.com/q/64109444/10494346 — Mark Dionnie, Jul 20 '22 at 09:53

score 16 · Answer 2 · answered Jan 17 '19 at 14:22

16

A Container widget will size themselves to its child, unless specified. In your case:

...
Container(
    height: double.infinity, // <-----
    decoration: new BoxDecoration(
        image: new DecorationImage(
            fit: BoxFit.cover,
            image: new NetworkImage(
                'https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg')))
...

answered Jan 17 '19 at 14:22

Zroq

8,002
3
26
37

1

Container(height: double.infinity,) does not work correctly in case of having singlechildscroll view in horizontal phone mode and container's container does not fit in height. any other solution? – Kamlesh Feb 13 '21 at 07:15

SingleChildScrollView height to max height with image background in flutter

2 Answers2