Как обновить мое основное тело при нажатии на категорию в моем списке в режиме Flutter
У меня есть основная часть, которая визуализирует список с множеством продуктов. Я хочу, чтобы мое представление списка реагировало при нажатии на категорию в моем представлении списка горизонта. Однако мне трудно сделать так, чтобы мой основной список был отзывчивым и сортировался только по правильной категории. Все данные находятся внутри списка, и внутри каждой "строки" данные имеют множество значений, одним из которых является "Категория = сумка" и т. Д.
Вот то, что у меня есть до сих пор, и я думаю о добавлении кода внутри моей функции ontap в класс категории, но не уверен, как мне его реализовать, чтобы это было правильно.
ВОТ МОЕ ГЛАВНОЕ ТЕЛО
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shop_app/constants.dart';
import 'package:shop_app/screens/details/details_screen.dart';
import 'package:shop_app/service/APIE.dart';
import 'categorries.dart';
import 'package:shop_app/UI/text_style.dart';
import '../../../models/ProductInfo.dart';
class Body extends StatefulWidget {
@override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
var productInfos = new List<ProductInfo>();
bool dataGet = false;
initState() {
_getUsers();
super.initState();
}
_getUsers() {
API.getUsers().then((response) {
Iterable list = json.decode(response.body);
productInfos = list.map((model) => ProductInfo.fromJson(model)).toList();
setState(() {
dataGet = true;
});
});
}
@override
build(context) {
return dataGet?Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Categories(context: productInfos,
),
Expanded(
child:ListView.builder(
itemCount: productInfos.length,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
height: 220,
width: double.maxFinite,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)),
elevation: 3,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsScreen(products: productInfos[index],
),
),
);
// Function is executed on tap.
},
child: new Stack(
children: <Widget>[
Container(
margin: new EdgeInsets.symmetric(
vertical: 16.0
),
alignment: FractionalOffset.centerLeft,
child: new Image.network(productInfos[index].plink.toString() ?? ''
),
),
Container(
margin: new EdgeInsets.fromLTRB(96.0, 16.0, 16.0, 16.0),
constraints: new BoxConstraints.expand(),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(height: 2.0),
new Text("${productInfos[index].productNameBold??'NoInformation'}",
style: Style.headerTextStyle,
),
new Container(height: 5.0),
new Text("${productInfos[index].category??'NoInformation'}",
style: Style.baseTextStyle
),
new Container(
margin: new EdgeInsets.symmetric(vertical: 2.0),
height: 2.0,
width: 24.0,
color: cdarkred
),
new Container(height: 5.0),
new Text("${productInfos[index].volume.toString() + ' ml'??'NoInformation'}",
style: Style.baseTextStyle),
new Container(height: 1.0),
new Text("${productInfos[index].country??'NoInformation'}",
style: Style.baseTextStyle
),
new Container(height: 25.0),
new Row(
children: <Widget>[
new Text("${productInfos[index].price??'NoInformation'} SEK",
style: Style.pricetextdiscount,
),
new Container(width: 8.0),
new Text("129",
style: Style.pricetextprevious,
),
],
),
],
),
),
]),
),
),
);
},
)
),
],
):Center(child: CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
)
);
}
}
ВОТ МОЯ КАТЕГОРИЯ КЛАСС
import 'package:flutter/material.dart';
import 'package:shop_app/models/ProductInfo.dart';
import '../../../constants.dart';
class Categories extends StatefulWidget {
final ProductInfo products;
const Categories({Key key, this.products, List<ProductInfo> context}) : super(key: key);
@override
_CategoriesState createState() => _CategoriesState();
}
class _CategoriesState extends State<Categories> {
List<String> categories = ["All","bag", "t-shirts"];
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: kDefaultPaddin,bottom: kDefaultPaddin/2),
child: SizedBox(
height: 25,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: categories.length,
itemBuilder: (context, index) => buildCategory(index),
),
),
);
}
Widget buildCategory(int index) {
return GestureDetector(
onTap: () {
setState(() {
selectedIndex = index;
});
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: kDefaultPaddin),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
categories[index],
style: TextStyle(
fontWeight: FontWeight.bold,
color: selectedIndex == index ? kTextColor : kTextLightColor,
),
),
Container(
margin: EdgeInsets.only(top: kDefaultPaddin / 4), //top padding 5
height: 2,
width: 20,
color: selectedIndex == index ? kTextColor : Colors.transparent,
)
],
),
),
);
}
}