如何在Flutter应用中添加应用程序评级
#网络开发人员 #android #flutter #dart

Image description

向应用程序添加应用程序评级功能可以为应用程序开发人员和用户带来一些好处。这是一些关键优势:

1。用户反馈和见解。
2。应用可见性和信誉
3。用户获取和保留
4。 App Store优化(ASO)

Image description

步骤1:创建一个新的扑面项目(如果您已经有一个)
如果您没有一个颤音项目,请在终端或命令提示中使用以下命令创建一个项目:

flutter create your_project_name
cd your_project_name

步骤2:在您首选的代码编辑器中打开项目
在代码编辑器中打开您新创建的Flutter Project。您可以使用Visual Studio代码,Android Studio或Intellij Idea等编辑器。我正在使用Android Studio。

步骤3:更新pubspec.yaml
PubSpec.yaml文件是您声明flutter项目的依赖项。打开pubspec.yaml文件,然后将rating_dialog依赖性添加到它。

dependencies:
  flutter:
    sdk: flutter
  rating_dialog: ^2.0.4
  url_launcher: ^6.1.12

步骤4:使用代码中的rating_dialog
现在,您可以使用CratingDialog小部件在应用中显示“评级”对话框。例如,当按下按钮时,让我们显示评级对话框:

import 'package:flutter/material.dart';
import 'package:rating_dialog/rating_dialog.dart';
import 'package:url_launcher/url_launcher.dart';

final String url = "http://play.google.com/store/apps/details?id=";
final String packageName = "com.rateuse";

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      title: "App Rating",
      home: RateUs(),
    );
  }
}

class RateUs extends StatefulWidget {
  const RateUs({Key? key}) : super(key: key);

  @override
  State<RateUs> createState() => _RateUsState();
}


class _RateUsState extends State<RateUs> {





  final _dialog = RatingDialog(
    initialRating: 1.0,
    // your app's name?
    title: Text(
      'Rating Dialog',
      textAlign: TextAlign.center,
      style: const TextStyle(
        fontSize: 25,
        fontWeight: FontWeight.bold,
      ),
    ),
    // encourage your user to leave a high rating?
    message: Text(
      'Tap a star to set your rating. Add more description here if you want.',
      textAlign: TextAlign.center,
      style: const TextStyle(fontSize: 15),
    ),
    // your app's logo?
    image:  const FlutterLogo(size: 100),
    submitButtonText: 'Submit',
    commentHint: 'Set your custom comment hint',
    onCancelled: () => print('cancelled'),
    onSubmitted: (response) {
      print('rating: ${response.rating}, comment: ${response.comment}');

      // TODO: add your own logic
      if (response.rating < 3.0) {
        // send their comments to your email or anywhere you wish
        // ask the user to contact you instead of leaving a bad review
      } else {
        _launchUrl();
      }
    },
  );

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFFe91e63),
          title: Text('Rate Us',style: TextStyle(fontSize: 18,color: Colors.white,fontWeight: FontWeight.bold),),
          centerTitle: true,
        ),
        body: Center(
            child:  DecoratedBox(
                decoration: BoxDecoration(
                    gradient: LinearGradient(colors: [
                      Color(0xFFFF800B),
                      Colors.redAccent,
                      Color(0xFFCE1010),
                      //add more colors
                    ]),
                    borderRadius: BorderRadius.circular(5),
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                          color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
                          blurRadius: 5) //blur radius of shadow
                    ]
                ),
                child:ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.transparent,
                      onSurface: Colors.transparent,
                      shadowColor: Colors.transparent,
                      //make color or elevated button transparent
                    ),
                    onPressed: (){
                      showDialog(
                        context: context,
                        barrierDismissible: true, // set to false if you want to force a rating
                        builder: (context) => _dialog,
                      );
                    },
                    child: Padding(
                      padding:EdgeInsets.only(
                        top: 5,
                        bottom: 5,
                      ),
                      child:Text("Give Us Rating",style: TextStyle(color: Colors.white),),
                    )
                )
            )
        ),
      ),
    );
  }

}


Future _launchUrl() async {
  final Uri _url = Uri.parse(url+packageName);
  if (!await launchUrl(_url)) {
    throw Exception('Could not launch $_url');
  }
}

如果您探索并深入研究了这个主题,请查看我有关此主题的新文章,该文章简要说明了ððð
https://dosomthings.com/how-to-add-app-rating-in-flutter-app/

结论:
总之,通过遵循上述步骤,您已成功地将'rating_dialog包装版本2.0.4添加到了flutter应用程序中。现在,您可以使用CratingDialog小部件显示评级对话框,并收集应用程序的用户反馈或评分。请记住,请及时了解包装文档,并更新以利用新版本中可能引入的任何新功能或改进。