Flutter 中使用 Provider 包的过滤屏幕
问题描述 投票：0回答：1
我是 Flutter 新手，我能够创建 UI，但我不是专家。我一直在寻找一种使用 Provider 创建过滤器屏幕的方法。有谁可以帮忙吗？
这是我的代码：我正在使用对话框小部件来创建弹出窗口。
class _FilterDialogWidgetState extends State<FilterDialogWidget> {
@override
Widget build(BuildContext context) {
return Dialog(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
height: 659,
width: 0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Column(children: [
Row(children: [
const Text(
'Filter your search',
style: TextStyle(color: Color(0xFF181C2E), fontSize: 16),
),
const SizedBox(width: 60),
Padding(
padding: const EdgeInsets.only(left: 18),
child: Container(
height: 45,
width: 45,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: const Color(0xFFECF0F4),
),
child: const Icon(Icons.clear)),
),
]),
const SizedBox(height: 10),
SizedBox(
height: 130,
width: 291,
child:
// Here is the offers column
Column(children: [
const Padding(
padding: EdgeInsets.only(right: 200, bottom: 10),
child: Text(
'OFFERS',
style: TextStyle(color: Color(0xFF181C2E), fontSize: 12),
),
),
Row(children: [
// delivery container or
Container(
width: 82,
height: 46,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(33)),
border: Border.all(
width: 2.0,
color: const Color(0xFFEDEDED),
style: BorderStyle.solid),
),
child: const Padding(
padding: EdgeInsets.only(top: 8),
child: Text(
'Delivery',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF464E57),
fontSize: 14,
fontFamily: 'Sen',
),
),
),
),
const SizedBox(
width: 5,
),
Container(
// or pick up container
width: 80,
height: 46,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(33)),
border: Border.all(
width: 2.0,
color: const Color(0xFFEDEDED),
style: BorderStyle.solid),
),
child: const Padding(
padding: EdgeInsets.only(top: 8),
child: Text(
'Pick up',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF181C2E),
fontSize: 14,
fontFamily: 'Sen',
),
),
),
),
const SizedBox(
width: 5,
),
Container(
// or offers container
width: 78,
height: 46,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(33)),
border: Border.all(
width: 2.0,
color: const Color(0xFFEDEDED),
style: BorderStyle.solid),
),
child: const Padding(
padding: EdgeInsets.only(top: 8),
child: Text(
'Offer',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF181C2E),
fontSize: 14,
fontFamily: 'Sen',
),
),
),
),
]),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(right: 34),
child:
// or online payment available container
Container(
width: 219,
height: 45.96,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(33)),
border: Border.all(
width: 2.0,
color: const Color(0xFFEDEDED),
style: BorderStyle.solid),
),
child: const Padding(
padding: EdgeInsets.only(top: 8),
child: Text(
'Online payment available',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF181C2E),
fontSize: 14,
fontFamily: 'Sen',
),
),
),
),
),
])),
const SizedBox(
height: 25,
),
const Padding(
padding: EdgeInsets.only(right: 169, bottom: 10),
child:
// And then Click on any option on
//children of Delivery-Time
Text(
'DELIVERY-TIME',
style: TextStyle(color: Color(0xFF181C2E), fontSize: 12),
),
),
Row(children: [
Container(
// First Container with 10-15 min
width: 86,
height: 46,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(33)),
border: Border.all(
width: 2.0,
color: const Color(0xFFEDEDED),
style: BorderStyle.solid),
),
child: const Padding(
padding: EdgeInsets.only(top: 8),
child: Text(
'10-15 min',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF464E57),
fontSize: 14,
fontFamily: 'Sen',
),
),
),
),
const SizedBox(
width: 4,
),
Container(
// First Container with 20 min
width: 80,
height: 46,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(33)),
border: Border.all(
width: 2.0,
color: const Color(0xFFEDEDED),
style: BorderStyle.solid),
),
child: const Padding(
padding: EdgeInsets.only(top: 8),
child: Text(
'20 min',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF181C2E),
fontSize: 14,
fontFamily: 'Sen',
),
),
),
),
const SizedBox(
width: 5,
),
Container(
// First Container with 30 min
width: 75,
height: 46,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(33)),
border: Border.all(
width: 2.0,
color: const Color(0xFFEDEDED),
style: BorderStyle.solid),
),
child: const Padding(
padding: EdgeInsets.only(top: 8),
child: Text(
'30 min',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF181C2E),
fontSize: 14,
fontFamily: 'Sen',
),
),
),
),
]),
const SizedBox(
height: 25,
),
const Padding(
padding: EdgeInsets.only(right: 200, bottom: 10),
child:
// And then Click on any option on
//Pricing children
Text(
'PRICING',
style: TextStyle(color: Color(0xFF181C2E), fontSize: 12),
),
),
Row(children: [
// FIRST PRICE
Container(
alignment: Alignment.center,
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: Color(0XFFEDEDED),
width: 2,
),
),
child: Text(
'\$',
style: TextStyle(),
),
),
SizedBox(width: 5),
// SECOND PRICE
Container(
alignment: Alignment.center,
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: Color(0XFFEDEDED),
width: 2,
),
),
child: Text(
'\$\$',
style: TextStyle(
color: Colors.white,
),
),
),
SizedBox(width: 5),
// THIRD PRICE
Container(
alignment: Alignment.center,
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: const Color(0XFFEDEDED),
width: 2,
),
),
child: const Text(
'\$\$\$',
style: TextStyle(),
),
),
]),
const SizedBox(
height: 25,
),
// And then Click on any option on
// Rating Children
const Padding(
padding: EdgeInsets.only(right: 200, bottom: 10),
child: Text(
'RATING',
style: TextStyle(color: Color(0xFF181C2E), fontSize: 12),
),
),
Row(children: [
Container(
// 1 Star Rating
alignment: Alignment.center,
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: const Color(0XFFEDEDED),
width: 2,
),
),
child: const Icon(Icons.star, color: Colors.orange)),
const SizedBox(
width: 5,
),
// 2 Star Rating
Container(
alignment: Alignment.center,
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: const Color(0XFFEDEDED),
width: 2,
),
),
child: const Icon(Icons.star, color: Colors.orange)),
const SizedBox(
width: 5,
),
// 3 Star Rating
Container(
alignment: Alignment.center,
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: const Color(0XFFEDEDED),
width: 2,
),
),
child: const Icon(Icons.star, color: Colors.orange)),
const SizedBox(
width: 5,
),
Container(
// 4 Star Ratin
alignment: Alignment.center,
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: Color(0XFFEDEDED),
width: 2,
),
),
child: const Icon(Icons.star, color: Colors.orange)),
const SizedBox(
width: 5,
),
// 5 Star Rating
Container(
alignment: Alignment.center,
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: const Color(0XFFEDEDED),
width: 2,
),
),
child: const Icon(Icons.star_border_outlined,
color: Color(0xFFD9D9D9))),
]),
const SizedBox(
height: 25,
),
// AND FINALLY CLICKED ON THIS ELEVATED BUTTON
ElevatedButton(
style: buttonPrimary2,
onPressed: () {},
child:
const Text('FILTER', style: TextStyle(color: Colors.white)))
]),
),
);
}
}
我需要一种情况，当用户按以下顺序单击任何选项时：
- 优惠栏
- 交货时间栏
- 定价栏
- 评分栏
- 最后单击“过滤器”按钮，它将打开一个单独的页面或屏幕。
1个回答
0
投票
投票
好吧，首先你需要在这个小部件之上添加至少一个提供者（上面我的意思是包装这个小部件的小部件
Parent(child: ChildWidget())ChangeNotifierProvider.value(
value: MyFilterProvider()
child: const FilterDialogWidget(),
),
来自 [provider package][1] 然后你可以像这样创建你的
MyFilterProviderclass MyFilterProvider extends ChangeNotifier{
List<String> filters =[];
addFilter(String filter) {
//do add
}
removeFilter(String filter){
//do remove
}
}
在您的用户界面中，您可以使用提供程序来了解哪个过滤器处于活动状态，如下所示：
Provider.of<MyFilterProvider>(context).filters.contains(myFilter)Provider.of<MyFilterProvider>(context).addFilter(newFilter);
最后不要忘记使用
ConsumerWidget<MyFilterProvider>最新问题
- 基于状态的显示屏幕 - jetpack compose
- 不要中断 bash 脚本中设置了 -e 标志的代码
- 如何使用cmd创建控制台应用程序并在VSCode中打开？
- 避免使用我的宏将“use foo”放入每个文件中
- 更改 ASP.NET Core MVC 中防伪的默认 cookie 名称
- Python：根据创建时间合并两个数据帧
- Bazel cc_binary 使用来自另一个存储库的 cc_library 作为 deps attr，但不使用它
- localhost 无法在 docker windows 10 上工作
- Yocto：依赖于配方和 PACKAGECONFIG
- 如何获取任何班级的名称？
- SQL 中的 Firebase 数据库
- 如何使用javascript模糊除一个元素之外的所有元素
- 返回使用openCV从不规则形状区域跟踪的物体的着陆位置
- 双重关注表单元素和图标，并打开语音
- Wildfly 的 JAXWS 实现似乎忽略了 bindingProvider 属性 com.sun.xml.ws.transport.https.client.SSLSocketFactory
- 在智能卡上的MF下创建EF时出错
- 如何在 google chrome 中拖动/重新定位检查元素工具？
- 如何远程停止ffmpeg？
- 如何在 SQL 中将 varchar 列中的值拆分为多行？
- “pages”不是已注册的命名空间
© www.soinside.com 2019 - 2024. All rights reserved.