前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Flutter】评级对话框组件

【Flutter】评级对话框组件

作者头像
老孟Flutter
发布2021-06-09 10:40:44
4.1K0
发布2021-06-09 10:40:44
举报
文章被收录于专栏:Flutter

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:**此属性用于在用户取消/关闭对话框时调用。

使用

添加依赖

代码语言:javascript
复制
rating_dialog: ^2.0.0

引入

代码语言:javascript
复制
import 'package:rating_dialog/rating_dialog.dart';

运行命令:「flutter packages get」

启用「AndriodX」

代码语言:javascript
复制
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

在libs目录下创建 「demo_screen.dart」 文件

代码语言:javascript
复制
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小部件

代码语言:javascript
复制
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和最后一个提交按钮。另外,我们将在右上角的十字图标上添加“取消”。

完整实现

代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-05-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 老孟Flutter 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 评分对话框
  • 使用
  • 完整实现
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档