Home Flutter Flutter Rating dialog – Redirect user to app page PlayStore/AppStore

Flutter Rating dialog – Redirect user to app page PlayStore/AppStore

0
how to open playstore from flutter app
how to open playstore from flutter app

Hi Guys, Welcome to Proto Coders Point.

In this flutter tutorial, We will create a Rating dialop popup box with star rating UI & then re-direct users to app page in Google PlayStore or apply AppStore for review rating purpose.

To achieve this we are going to make use of 2 flutter packages.

Video Tutorial


1. Rating_Dialog:

This Library is used to add a beautiful & customizable rating dialog in flutter.

This Package will help us in showing a rating dialog pop, whee we can ask users to share their experience review about app (Rate My App) & then redirect user to app page on Google PlayStore / Apple App Store for review & rating purpose.

I have wrote a complete seperate tutorial on rating_dialog, please check it here.

Add Rating Dialog dependencies in flutter project

Open pubspec.yaml file and under dependencies add it

dependencies:
  flutter:
    sdk: flutter
  rating_dialog: ^2.0.1              #add this line

Import rating_dialog.dart

now you need to just import the library where you want to show dialog rating.

import 'package:rating_dialog/rating_dialog.dart';

Create an Instance of RatingDialog Widget

  final _dialog = RatingDialog(
    // your app's name?
    title: 'Rate Us On App Store',
    // encourage your user to leave a high rating?
    message:
    'Select Number of Stars 1 - 5 to Rate This App',
    // your app's logo?
    image: const FlutterLogo(size: 60),
    submitButton: 'Submit',
    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 {
        //go to app store
        
      }
    },
  );

Then to show the dialog box we make use of flutter showDialog function with will invoke above dialog widget.

showDialog(
              context: context,
              builder: (context) => _dialog,
      );

2. Store_redirect:

By using this library we can redirect users from your app to app page i.e. Google PlayStore or Apple AppStore.

Add Store Redirect dependencies in flutter project

dependencies:
  flutter:
    sdk: flutter
  rating_dialog: ^2.0.1
  store_redirect:                       #add this line

Import store_redirect.dart

now you need to just import the library where you want to use store redirect.

import 'package:store_redirect/store_redirect.dart';

OnButton click natigate user to playstore or appstore

 StoreRedirect.redirect(androidAppId: 'shri.complete.fitness.gymtrainingapp',iOSAppId: 'com.example.rating');

In above StoreRedirect.redirect, we need to pass 2 parameter i.e. your AppId

  • androidAppID: your android AppID.
  • iOSAppId: your iOS AppId.

This Library will automatically control where the user should be redirected, Suppose if user is Android User then he will be navigated to playstore and if the user is iOS User then he will be navigated to Apply AppStore.


Complete Code : Flutter Rating Dialog – Redirect user to playstore/appstore

main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:rating_dialog/rating_dialog.dart';
import 'package:store_redirect/store_redirect.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final _dialog = RatingDialog(
    // your app's name?
    title: 'Rate Us On App Store',
    // encourage your user to leave a high rating?
    message:
    'Select Number of Stars 1 - 5 to Rate This App',
    // your app's logo?
    image: const FlutterLogo(size: 60),
    submitButton: 'Submit',
    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 {
        //go to app store
        StoreRedirect.redirect(androidAppId: 'shri.complete.fitness.gymtrainingapp',iOSAppId: 'com.example.rating');
      }
    },
  );


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            
             // load dialog to show it 
            showDialog(
              context: context,
              builder: (context) => _dialog,
            );
          },child: Text('Show Rating Dialog'),
        ),
      )
    );
  }
}

No Comments