ListView Implementation - flutter

Question

Please help me or give me an idea on how to implement the above image. I'm planning to use ListView. Below is my sample code but this is on horizontal scroll.
Widget build(BuildContext context) {
return Container(
height: 210,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.symmetric(vertical: 10),
child: ListView.builder(
itemCount: _foodsList.featuredList.length,
itemBuilder: (context, index) {
double _marginLeft = 0;
(index == 0) ? _marginLeft = 20 : _marginLeft = 0;
return FoodsCarouselItemWidget(
heroTag: 'home_food_carousel',
marginLeft: _marginLeft,
food: _foodsList.featuredList.elementAt(index),
);
},
scrollDirection: Axis.horizontal,
));
}
}

Answer 1

You need to build your layout in itemBuilder property of ListView. If you want to place the text on the image the best layout widget is Stack.
See the following in order to get the layout system of flutter: https://flutter.io/tutorials/layout/
and for all the available layout widgets see: https://flutter.io/widgets/layout/
and Stack: https://docs.flutter.io/flutter/widgets/Stack-class.html
Something like this:new Stack(
children: <Widget>[
new Positioned.fill(
child: new FadeInImage(
placeholder: new AssetImage('placeholder.png'),
image: new CachedNetworkImageProvider(photos[int].url),
fit: BoxFit.contain,
alignment: Alignment.center,
fadeInDuration: new Duration(milliseconds: 200),
fadeInCurve: Curves.linear,
),
),
new Positioned(
top: 10.0,
left: 10.0,
child: new Container(
child: new Text(photos[int].title)
),
),
],
)

Answer 2

I have tried my best to achieve the same, but due to time issues, you might find a little different.
Package used: https://pub.dev/packages/cached_network_image#-installing-tab-
Here is the complete code.
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
class Demo extends StatefulWidget {
#override
_Demo createState() => _Demo();
}
class _Demo extends State<Demo> {
Widget foodsCarouselItemWidget() {
return Column(children: <Widget>[
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 15.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: <
Widget>[
Container(
height: 130,
width: 130,
child: Stack(
children: <Widget>[
CachedNetworkImage(
width: 150,
height: 130,
imageUrl:
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQt46Q_GYs7kSq21kdBlNcD9pZzHVtl8nwNkY5f9GaR3rTbPOMf",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider, fit: BoxFit.cover),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
),
),
Positioned(
right: 10,
bottom: 5,
child: Row(children: <Widget>[
Icon(Icons.playlist_add_check,
color: Colors.white, size: 18),
SizedBox(width: 3),
Text("190",
style: TextStyle(color: Colors.white, fontSize: 12))
])),
],
),
),
SizedBox(width: 15),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Food title here",
style: TextStyle(
color: Color(0xff454545),
fontSize: 18,
fontWeight: FontWeight.bold)),
SizedBox(height: 10),
Row(children: <Widget>[
Icon(Icons.location_on, color: Color(0xff777777), size: 18),
SizedBox(width: 5),
Expanded(
child: Text("Add your location here",
style: TextStyle(
fontSize: 13, color: Color(0xff777777))))
]),
SizedBox(height: 5),
Row(children: <Widget>[
Icon(Icons.local_offer, color: Color(0xff777777), size: 18),
SizedBox(width: 5),
Expanded(
child: Text("Spicy, Delicious",
style: TextStyle(
fontSize: 13, color: Color(0xff777777))))
]),
SizedBox(height: 15),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
color: Colors.red[900],
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
padding: EdgeInsets.all(10),
child: Text(
"Button Text",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
)),
SizedBox(width: 7),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red[900]),
borderRadius: BorderRadius.all(Radius.circular(5.0))),
padding: EdgeInsets.all(5),
child:
Icon(Icons.bookmark_border, color: Colors.red[900]),
)
])
]))
])),
SizedBox(height: 10)
]);
}
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xfff3f3f3),
appBar: AppBar(backgroundColor: Colors.red[900], title: Text("DEMO")),
body: ListView.builder(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
itemCount: 4,
itemBuilder: (context, index) {
return foodsCarouselItemWidget();
},
));
}
}
OUTPUT: