Flutter - 带有 SmoothStarRating 和 Rest API 的评分和评论系统

Posted

技术标签:

【中文标题】Flutter - 带有 SmoothStarRating 和 Rest API 的评分和评论系统【英文标题】:Flutter - Rating and Review System With SmoothStarRating And Rest API 【发布时间】:2020-07-19 13:11:54 【问题描述】:

我的 Flutter 代码中有一个 SmoothStarRating 小部件我需要一个可以应用的完整评分和评论系统,以便用户可以通过他们的评论对特定产品进行评分,并且我可以显示用户的累积和总平均评分和评论对于每个产品。我希望它通过 rest API php 连接到数据库。以下是我的 SmoothStarRating。

                                      Scaffold(
                                        body:SmoothStarRating(
                                                    allowHalfRating: true,
                                                    onRatingChanged: (v) 
                                                      rating = v;
                                                      setState(() );
                                                    ,
                                                    starCount: 5,
                                                    rating: rating,
                                                    size: 20.0,
                                                    filledIconData: Icons.star,
                                                    halfFilledIconData:
                                                        Icons.star_half,
                                                    color: colorGreen,
                                                    borderColor: colorGreen,
                                                    spacing: 0.0));

【问题讨论】:

那么,问题是什么?要求人们为您编写整个后端不是问题...... 我只是在寻找一个可以帮助我实现这一目标的潜在客户,如果我能找到一个,我会很高兴,不管它是一篇已经发表的文章。 通常你应该从官方文档和示例开始。 Flutter 有你需要的东西here。至于 PHP API 和 DB 的东西,有成千上万的书面形式(我更喜欢)和视频的教程。另外我建议你阅读this。 发送的链接没有显示回答我的问题。我期待您指导我如何使用 smoothratingbar 从用户那里获取评分和评论的值并通过我的 rest api 提交到数据库,以及如何从用户那里获得累积或总评分以显示每个产品的评分和评论.我已经创建了我的 rest api 我只需要一个关于如何实现它的指南。 【参考方案1】:

好的,终于可以为上述问题解决一些问题,以防有人需要解决方案。我使用 SmoothRatingBar。我加 smooth_star_rating:到我的 Pubspec.yaml 并将其导入我的活动中。之后我初始化了 double rating = 0.0;使用 TextFormField 分别获取标题和评论,并通过我创建的其余 API 将评分值、标题和评论的 TextFormField 提交到我的数据库。在下面找到代码:

import 'package:smooth_star_rating/smooth_star_rating.dart';

double rating = 0.0;

return Scaffold(
           body:Container(child:Column(children<Widget>[
                   SmoothStarRating(
                  allowHalfRating: true,
                  halfFilledIconData: Icons.star_half,
                  onRatingChanged: (v) 
                    this.rating = v;
                    setState(() );
                  ,
                  starCount: 5,
                  rating: rating,
                  size: 60.0,
                  filledIconData: Icons.star,
                  color: Colors.orange,
                  borderColor: Colors.grey,
                  spacing: 0.0),]),

TextFormField(labelText: "Review Title (i.e Nice trip)",
                ),
TextFormField(labelText: "Your review...",
                ),

RawMaterialButton(onPressed: ()...your submission to rest API here...
                  ,
                       child: Text(
                      "Send Review",
                    ),)

);


【讨论】:

以上是关于Flutter - 带有 SmoothStarRating 和 Rest API 的评分和评论系统的主要内容,如果未能解决你的问题,请参考以下文章

带有标题的 Flutter GridView

Flutter - 选择带有显示和返回值的列表

Flutter:带有初始网络请求的 ChangeNotifierProvider

带有滚动条的 Flutter Listview

发送带有附件的电子邮件 Flutter(IOS)

使用带有Flutter的完整Dart SDK