Dynamic widget height for Stack child widget

Question

Stack has 3 child properties, first child (red background) is partially visible because last child (black background) is on top. I need the last child to be directly below the other two and it should not overlap as it is doing now. Last child contains dynamic text - more than one line of text causes the text block to shift up instead of down - trying adding a few lines to the last child.

return new Scaffold(
            body: NestedScrollView(
              controller:_scrollController ,
              headerSliverBuilder:
                  (BuildContext contrxt, bool innerBoxIsScrolled) {
                    print('scrolled $innerBoxIsScrolled');
                return <Widget>[
                  SliverAppBar(
                    backgroundColor: Colors.transparent,
                    automaticallyImplyLeading: false,
                    expandedHeight: 195.0,
                    pinned: true,
                    floating: true,
                    forceElevated: innerBoxIsScrolled,
                    flexibleSpace: FlexibleSpaceBar(
                      background: new Stack(children: <Widget>[
                         Positioned(
                           right: 0.0,
                           left: 0,
                           bottom: -1,
                           child: Container(
                             color: Colors.redAccent,
                             height: 50.0,
                             child: Text("Container 1 Text", textAlign: TextAlign.center,),
                           ),
                         ),
                         Container(
                            color: Colors.blue,
                           height: MediaQuery.of(context).size.height / 6,
                            width: MediaQuery.of(context).size.width,
                          child: Text("Container 2 Text", textAlign: TextAlign.center,),
                          ),
                        Positioned(
                          bottom: 0,
                          left: 0,
                          right: 0,
                          child: Container(
                            //margin: EdgeInsets.only(top: 49.0),
                            color: Colors.black,
                            //height: 20.0,
                            width: MediaQuery.of(context).size.width,
                            //padding: EdgeInsets.only(top: 5.0, left: 20.0, bottom: 5.0, right: 20.0),
                            child: Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: new Text("Container 3",
                                style: TextStyle(fontSize: 12.0, color: Colors.grey[800]),
                              ),
                            ),
                          ),
                        )
                      ]),
                    ),
                  ),
                ];
              },
              body: Container(),

Answer 1

Well, I am going to give an answer for the "expanding upward" problem. At the Positioned widget which holds the "Container 3 Text", you have set the parameters like this;

Positioned(
     bottom: 0,
     left: 0,
     right: 0,
     //codes continue.. )

The problem here is, when you set the bottom property as "0", then it is going to be a fixed position for this widget in the bottom side and when this widget is expanding, it will not change the fixed bottom position and that is why it is going to expand to upward. So, instead of this, use top property to position this widget vertically. Once you set top property, then the top position of this widget will be fixed and you are going to see that it is expanding downward. For example;

Positioned(
     top: 130,
     left: 0,
     right: 0,
     //codes continue.. )

Addition: You must be considering that, even thought your widget is going to expand downward after this, it will never cross the borders of its parent widget. The parent widget SliverAppBar has the expandedHeight property, and you set is as "195.0". Anything goes beyond of this height scope, will not be displayed. From the documentation about expandedHeight property;

If a [flexibleSpace] widget is specified this height should be big enough to accommodate whatever that widget contains.

Since your Text widgets are flexible, you must be setting enough space for the expandedHeight property.