如何在 flutter 中显示 ListTile

Question

I want to do my interface like the image I show. I want to display the image the put a container to over the image. Now I have a problem with the ListTile I want to show did not come out.

Here is my code:

Scaffold(
      appBar: AppBar(
        title: Text('Detail'),
      ),
      body: Column(children: <Widget>[
      Expanded(
        child: 
          Stack(children: <Widget>[
            Container(
            decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(topLeft: Radius.circular(40), topRight: Radius.circular(40)),), 
            child: Image.assets('images/photo.png'),
          ),
          Container(
            margin: EdgeInsets.only(top: 170),
            child: Stack(alignment: Alignment.topCenter, children: <Widget>[
            Container(
            decoration: BoxDecoration(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(40), topRight: Radius.circular(40)), 
            color: Colors.white),
          )
          ],
          ), 
          ),
          Positioned(top: 200, left: 8, 
          child: Column(children: <Widget>[
            ListTile(title: Text('Title'), subtitle: Text(''),)
          ],)
          )
        ],
        ),
        )
      ],)

    );

Anyone can help me?

Answer 1

Replace you code like this

 return Scaffold(
   appBar: AppBar(
     title: Text("title text"),),
     body: Stack(children: <Widget>[
      Positioned(
        top: 0,
              child: Image.network("https://upload.wikimedia.org/wikipedia/commons/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg",
                fit: BoxFit.cover,
                height: 200,
                width: MediaQuery.of(context).size.width,
                 ),
      ),

      Positioned(
        top: 190,
              child: Container(
                width: MediaQuery.of(context).size.width,
               height: 600,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(topLeft:Radius.circular(20), topRight:Radius.circular(20)) ),
                  child: ListView(
                    shrinkWrap: true,
                    children: <Widget>[
                    ListTile(title: Text("Title 1"),),
                    ListTile(title: Text("Title 1"),),
                    ListTile(title: Text("Title 1"),),
                  ],) ,),
      )
     ],),
     
     );

Answer 2

when scrolling inside Positioned widget you have to give all the positions and scroll direction in listview

Positioned(
        top: 190,
        bottom: 0,
        right: 0,
        left: 0,
              child: SizedBox(
                              child: Container(
                      width: MediaQuery.of(context).size.width,
                    // height: MediaQuery.of(context).size.height- 190,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(topLeft:Radius.circular(20), topRight:Radius.circular(20)) ),
                        child: ListView.builder(
                            scrollDirection: Axis.vertical,
                            itemCount: 20,
                            itemBuilder: (BuildContext context, int index){
                         return ListTile(title: Text("Title $index"),);

                            },
                          
                            physics: AlwaysScrollableScrollPhysics(),
                            shrinkWrap: true,
                 ) ,),
              ),
      )