So I am trying to have an image at the top followed by a list below it. Intially, the list is contracted. When the list expands, I want it to overlap the image.

Initial Position - here I want the image to be at the top

Final Position - this is correct

The Problem is - If I position the image to the top, the list also moves to the top (in the initial position) which is not what I want. Also, if I use a column to position the image at the top (and the list below it) then the list does not expand all the way up to the top; it stays (and expands) below the image.

@override
Widget build(BuildContext context) {
double maxHeight = MediaQuery.of(context).size.height;
return Scaffold(
  //resizeToAvoidBottomInset: false,
  //backgroundColor: Color(0xFFd8e3e3),
  body: Align(
    child: SingleChildScrollView(
      //to avoid bottom overflow error
      child: Padding(
        padding: const EdgeInsets.fromLTRB(5, 20, 5, 0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              //fit: StackFit.loose,
              //alignment: Alignment.center,
              children: [
                // Positioned(
                //   top: 0,
                //   left: 0,
                //   right: 0,
                Align(
                  alignment: Alignment(0, -1),
                  child: Hero(
                    tag: "imageHero",
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(30),
                        bottomRight: Radius.circular(30),
                      ),
                      child: Image.asset(
                        'assets/images/punjabi_egg_curry1.jpeg',
                        //height: screenHeight * 0.3,
                        //width: double.infinity,
                        alignment: Alignment.topCenter,
                      ),
                    ),
                  ),
                ),
                // ),
                Center(
                  child: new ClipRect(
                    child: new BackdropFilter(
                      filter:
                          new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                      child: new Card(
                        color: Colors.transparent,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0),
                        ),
                        child: new Center(
                          //child: GestureDetector(
                          //onTap: _updateSize,
                          child: Padding(
                            padding: const EdgeInsets.only(bottom: 10),
                            child: Column(
                              children: [
                                AnimatedContainer(
                                  constraints: BoxConstraints(
                                      maxHeight: maxHeight * 0.85),
                                  height: _height,
                                  duration: Duration(milliseconds: 300),
                                  decoration: new BoxDecoration(
                                    color: Colors.transparent,
                                    borderRadius: BorderRadius.circular(20),
                                    //border: Border.all(color: Colors.black),
                                  ),
                                  child: Steps(),
                                ),
                                //),
                                ElevatedButton(
                                  onPressed: _updateSize,
                                  child: Text(buttonText),
                                  style: ElevatedButton.styleFrom(
                                    padding: EdgeInsets.symmetric(
                                      vertical: 10,
                                      horizontal: 20,
                                    ),
                                    primary: kSilver,
                                    shape: RoundedRectangleBorder(
                                      borderRadius:
                                          BorderRadius.circular(20),
                                    ),
                                    onPrimary: Colors.black,
                                    textStyle: TextStyle(
                                      color: Colors.black,
                                      fontSize: 22,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                // ),
              ],
            ),
          ],
        ),
      ),
    ),
  ),
  //),
);
}
}

CodePudding user response：

Wrap that widget with Positioned(top:5, child: // your widget ),

CodePudding user response：

Try below code hope its help to you change your image on your need

      Container(
              height: 500,
              child: Stack(
                children: [
                  Container(
                    width: 150,
                    height: 150,
                    margin: EdgeInsets.symmetric(horizontal: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage(
                          'assets/images/cycle.png',
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    top: 120,
                    left: 0,
                    right: 0,
                    child: Container(
                      height: 100,
                      child: ListView.builder(
                        itemCount: 20,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(
                            title: Text("List - $index"),
                          );
                        },
                      ),
                    ),
                  ),
                ],
              ),
            ),

Your Result Screen ->