【Flutter】评级对话框组件
共 8342字，需浏览 17分钟
·
2021-05-21 14:50
F「lutter」是一个免费和开源的项目，由Google创建并维护，是我们喜欢Flutter的原因之一。Flutter提供了漂亮的预构建组件，这些组件在flutter中被称为Widget。扑朔迷离的一切都是小部件！
向用户显示一些知识是一个了不起的想法，这是我们使用对话框的最基本的想法。在Flutter这个惊人的UI工具包中，我们有几种不同的方法来构建对话框。
在在本博客中，我们将探讨「Flutter中」 的“「评级对话框”」。我们将看到如何使用flutter应用程序中的「rating_dialog」包来实现美观的评级对话框演示程序并进行自定义。
pub地址：https://pub.dev/packages/rating_dialog
评分对话框
评分对话框是Flutter出色且适应性强的星级评分对话框包！它支持flutter支持的所有阶段。这个库是最好的，因为它伴随着星级评价和联系，甚至可以滑动评级并发光以进行星级评价。之所以命名为“等级”对话框，是因为该库将识别您在颤动的星形图标上做出的手势以提供等级。
评级对话框的一些属性：
**message：**此属性用于对话框的消息/描述文本。 **ratingColor：**此属性用于评级栏（星形图标和辉光）颜色。 **initialRating：**此属性用于评级栏的初始评级。默认等级为1。 **force：**此属性用于禁用取消按钮并强制用户留下评分。 **onSubmitted：**此属性用于返回带有用户的等级和注释值的RatingDialogResponse。 **onCancelled：**此属性用于在用户取消/关闭对话框时调用。
使用
添加依赖
rating_dialog: ^2.0.0引入
import 'package:rating_dialog/rating_dialog.dart';运行命令：「flutter packages get」
启用「AndriodX」
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
在libs目录下创建 「demo_screen.dart」 文件
Container(
child: Center(
child: MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.cyan,
padding: EdgeInsets.only(left: 30,right: 30),
child: Text('Rating Dialog',style: TextStyle
(color: Colors.white,fontSize: 15),
),
onPressed: _showRatingAppDialog,
),
),
),
添加一个容器小部件。在小部件内，我们将添加一个Center小部件，并且其子属性添加一个「MaterialButton（）。「在此按钮中，我们将添加文本，颜色，按钮形状和onPressed方法。在此方法中，我们将添加」_showRatingAppDialog」小部件。我们将在下面对其进行深入描述。当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。
定义_showRatingAppDialog小部件
void _showRatingAppDialog() {
final _ratingDialog = RatingDialog(
ratingColor: Colors.amber,
title: 'Rating Dialog In Flutter',
message: 'Rating this app and tell others what you think.'
' Add more description here if you want.',
image: Image.asset("assets/images/devs.jpg",
height: 100,),
submitButton: 'Submit',
onCancelled: () => print('cancelled'),
onSubmitted: (response) {
print('rating: ${response.rating}, '
'comment: ${response.comment}');
if (response.rating < 3.0) {
print('response.rating: ${response.rating}');
} else {
Container();
}
},
);
showDialog(
context: context,
barrierDismissible: true,
builder: (context) => _ratingDialog,
);
}
在**_showRatingAppDialog（）中**，我们将添加最终的_ratingDialog等于「RatingDialog（）「插件。在此对话框中，我们将添加」ratingColor」表示评级栏（星形图标和发光效果）的颜色，「标题」，「消息」表示对话框的消息/描述文本，「图像」，「submitButton」表示提交按钮的标签/文本，「onSubmitted」表示返回带有用户的评分和评论值，「onCancelled」表示用户取消/关闭对话框时的调用。另外，我们将添加「showDilaog（）。「在此对话框中，我们将添加上下文」barrierDismissible」如果要强制评级，则将mean设置为false，然后将「构建器」导航到_ratingDialog。当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。
在此对话框中，您将看到我们将添加图像，标题，描述，星级，评论的textField和最后一个提交按钮。另外，我们将在右上角的十字图标上添加“取消”。
完整实现
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:rating_dialog/rating_dialog.dart';
class DemoScreen extends StatefulWidget {
@override
_DemoScreenState createState() => _DemoScreenState();
}
class _DemoScreenState extends State<DemoScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.teal[50],
appBar: AppBar(
backgroundColor: Colors.black,
title: Text('Rating Dialog In Flutter'),
automaticallyImplyLeading: false,
),
body: Container(
child: Center(
child: MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.cyan,
padding: EdgeInsets.only(left: 30,right: 30),
child: Text('Rating Dialog',style: TextStyle
(color: Colors.white,fontSize: 15),
),
onPressed: _showRatingAppDialog,
),
),
),
);
}
void _showRatingAppDialog() {
final _ratingDialog = RatingDialog(
ratingColor: Colors.amber,
title: 'Rating Dialog In Flutter',
message: 'Rating this app and tell others what you think.'
' Add more description here if you want.',
image: Image.asset("assets/images/devs.jpg",
height: 100,),
submitButton: 'Submit',
onCancelled: () => print('cancelled'),
onSubmitted: (response) {
print('rating: ${response.rating}, '
'comment: ${response.comment}');
if (response.rating < 3.0) {
print('response.rating: ${response.rating}');
} else {
Container();
}
},
);
showDialog(
context: context,
barrierDismissible: true,
builder: (context) => _ratingDialog,
);
}
}
原文链接：https://medium.com/flutterdevs/rating-dialog-in-flutter-8b1253025731