Search code examples
flutternestedscrollview

Body size & margins not being respected inside NestedScrollView


I'm trying to understand why on the code bellow "Containers" in this case as an example, fills in the entire space, even though the have constraints or sizes.

return Scaffold(
      
      body: SafeArea(
        child: NestedScrollView(
          physics: BouncingScrollPhysics(),
          headerSliverBuilder: (context, innerBoxIsScrolled) {
            return <Widget>[];
          },
          body: Container(
            constraints: BoxConstraints(
              maxHeight: 100,
              minWidth: 100,
            ),
            color: Colors.red,
            height: 100,
            width: 100,
            child: Container(
              constraints: BoxConstraints(
                maxHeight: 50,
                minWidth: 50,
              ),
              color: Colors.yellow,
              height: 50,
              width: 50,
              child: Text('a'),
            ),
          ),
        ),
      ),
    );

Solution

  • You can add a Column over the entire page to control the size of each Container

    You can try this:

     return Scaffold(
    
      body: SafeArea(
        child: NestedScrollView(
          physics: BouncingScrollPhysics(),
          headerSliverBuilder: (context, innerBoxIsScrolled) {
            return <Widget>[];
          },
          body: Column(
            children: [
              Container(
    
                color: Colors.red,
                height: 100,
                width: 100,
                child: Container(
                  
                  margin: EdgeInsets.all(25.0),
                  color: Colors.yellow,
                  height: 50,
                  width: 50,
                  child: Text('a'),
                ),
              ),
            ],
          ),
        ),
      ),
    );