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?
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"),),
],) ,),
)
],),
);
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,
) ,),
),
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.