【Flutter】評級對話框組件
F「lutter」是一個免費和開源的項目，由Google創(chuàng)建并維護(hù)，是我們喜歡Flutter的原因之一。Flutter提供了漂亮的預(yù)構(gòu)建組件，這些組件在flutter中被稱為Widget。撲朔迷離的一切都是小部件！
向用戶顯示一些知識是一個了不起的想法，這是我們使用對話框的最基本的想法。在Flutter這個驚人的UI工具包中，我們有幾種不同的方法來構(gòu)建對話框。
在在本博客中，我們將探討「Flutter中」 的“「評級對話框”」。我們將看到如何使用flutter應(yīng)用程序中的「rating_dialog」包來實現(xiàn)美觀的評級對話框演示程序并進(jìn)行自定義。
pub地址：https://pub.dev/packages/rating_dialog
評分對話框
評分對話框是Flutter出色且適應(yīng)性強(qiáng)的星級評分對話框包！它支持flutter支持的所有階段。這個庫是最好的，因為它伴隨著星級評價和聯(lián)系，甚至可以滑動評級并發(fā)光以進(jìn)行星級評價。之所以命名為“等級”對話框，是因為該庫將識別您在顫動的星形圖標(biāo)上做出的手勢以提供等級。
評級對話框的一些屬性：
**message：**此屬性用于對話框的消息/描述文本。 **ratingColor：**此屬性用于評級欄（星形圖標(biāo)和輝光）顏色。 **initialRating：**此屬性用于評級欄的初始評級。默認(rèn)等級為1。 **force：**此屬性用于禁用取消按鈕并強(qiáng)制用戶留下評分。 **onSubmitted：**此屬性用于返回帶有用戶的等級和注釋值的RatingDialogResponse。 **onCancelled：**此屬性用于在用戶取消/關(guān)閉對話框時調(diào)用。
使用
添加依賴
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目錄下創(chuàng)建 「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,
),
),
),
添加一個容器小部件。在小部件內(nèi)，我們將添加一個Center小部件，并且其子屬性添加一個「MaterialButton（）。「在此按鈕中，我們將添加文本，顏色，按鈕形狀和onPressed方法。在此方法中，我們將添加」_showRatingAppDialog」小部件。我們將在下面對其進(jìn)行深入描述。當(dāng)我們運行應(yīng)用程序時，我們應(yīng)該獲得屏幕的輸出，如屏幕下方的截圖所示。
定義_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」表示評級欄（星形圖標(biāo)和發(fā)光效果）的顏色，「標(biāo)題」，「消息」表示對話框的消息/描述文本，「圖像」，「submitButton」表示提交按鈕的標(biāo)簽/文本，「onSubmitted」表示返回帶有用戶的評分和評論值，「onCancelled」表示用戶取消/關(guān)閉對話框時的調(diào)用。另外，我們將添加「showDilaog（）。「在此對話框中，我們將添加上下文」barrierDismissible」如果要強(qiáng)制評級，則將mean設(shè)置為false，然后將「構(gòu)建器」導(dǎo)航到_ratingDialog。當(dāng)我們運行應(yīng)用程序時，我們應(yīng)該獲得屏幕的輸出，如屏幕下方的截圖所示。
在此對話框中，您將看到我們將添加圖像，標(biāo)題，描述，星級，評論的textField和最后一個提交按鈕。另外，我們將在右上角的十字圖標(biāo)上添加“取消”。
完整實現(xiàn)
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