'flutter: how to scroll listview inside listview using a button
i have nested Listview.Builder inside my FutureBuilder one is scroll horizontally and one in vertically what i want is when i click on a button i want to scroll my horizontal listview i passed a ScrollController to horizontal listview but when i press the arrow all of horizontal listview scroll not of the index. How Can i achieve that...
here i my code...
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 10),
child: FutureBuilder<List<Catagory>>(
future: categoryList,
builder: (context, snapshot) {
if (snapshot.hasData) {
List<Catagory> model = snapshot.data!;
return ListView.builder(
itemCount: model.length,
itemBuilder: (context, index) {
List<Product> product =
model[index].products;
List<bool> scroll=List.generate(model.length, (index) => false);
return Column(
children: [
Row(
children: [
SizedBox(width: width * 0.5,
child: Text(model[index].name,
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
style: const TextStyle(
color: Colors.red,
fontSize: 16,
)),
),
SizedBox(width: 30),
Expanded(
child: Container(
height: 1,
color: Colors.grey,
)),
SizedBox(width: 40),
],
),
SizedBox(
height: 10,
),
Row(
children: [
Expanded(
child: Container(
width: width,
height: 140,
child: ListView.builder(
controller: _controller ,
scrollDirection: Axis.horizontal,
itemCount: model[index].products.length,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 80,
height: 130,
padding: EdgeInsets.only(right: 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 70,
height: 70,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(5),
color: primaryColor),
child: CachedNetworkImage(
imageUrl: product[index].img,
placeholder: (context, url) => const Center(
child: SizedBox(
width: 25,
height: 25,
child: CircularProgressIndicator())),
imageBuilder: (context, imageProvider) =>
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover),
),
),
errorWidget: (context, url, error) => Icon(Icons.error),
),
),
const SizedBox(height: 3,),
Text(product[index].name,
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
const SizedBox(height: 2,),
MyText(title: (product[index].salePrice != '') &&
(double.parse(product[index].salePrice) <
double.parse(product[index].regularPrice))
? product[index].salePrice
: product[index].regularPrice,
textColor: Colors.black54,
),
const SizedBox(height: 3,),
MyTextButton(
width: 55,
height: 24,
title: 'Añadir',
fontSize: 8,
textColor: Colors.white,
backgroundColor: primaryColor,
cornerRadius: 5,
onPress: () {
Navigator.push(context, MaterialPageRoute(builder: (context) =>
ProductType(product: product[index])));
})
],
),
);
}))),
InkWell(
onTap: () {
_animateToIndex(5);
// here when i press this i want to make horizontal list of specific index to scroll
},
child: Container(
height: 140,
width: 40,
child: Icon(
Icons.arrow_forward_ios,
color: Colors.grey),
),
)
],
),
SizedBox(
height: 10,
),
],
);
});
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return Center(child: CircularProgressIndicator());
},
)))
My Animation Code...
final ScrollController _controller = ScrollController();
final double _height = 100.0;
void _animateToIndex(int index) {
_controller.animateTo(
index * _height,
duration: Duration(seconds: 5),
curve: Curves.fastOutSlowIn,
);
}
i'm new to flutter i research too much but i didn't found any solution i have to submit this project please help me as soon as possible thanks in advance...
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

