DEV Community: saurabh singh aswal

How to add App Rating in Flutter app

saurabh singh aswal — Sat, 05 Aug 2023 07:02:38 +0000

Adding an app rating feature to your app can bring several benefits, both for the app developers and the users. Here are some of the key advantages:

1. User feedback and insights.
2. App visibility and credibility
3. User acquisition and retention
4. App store optimization (ASO)

Step 1: Create a new Flutter project (if you don’t already have one)
If you don’t have a Flutter project, create one using the following command in your terminal or command prompt:

flutter create your_project_name
cd your_project_name

Step 2: Open the project in your preferred code editor
Open your newly created Flutter project in your code editor. You can use editors like Visual Studio Code, Android Studio, or IntelliJ IDEA. i am using Android Studio.

Step 3: Update pubspec.yaml
The pubspec.yaml file is where you declare the dependencies for your Flutter project. Open the pubspec.yaml file and add the rating_dialog dependency to it.

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

Step 4: Use the rating_dialog in your code
Now, you can use the RatingDialog widget to show the rating dialog in your app. For example, let’s show the rating dialog when a button is pressed:

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');
  }
}

If you explore and go deeper into this topic so check out my new article on this topic which is explained briefly 👇👇👇
https://dosomthings.com/how-to-add-app-rating-in-flutter-app/

Conclusion:
In conclusion, by following the steps above, you have successfully added the “rating_dialog” package version 2.0.4 to your Flutter app. You can now use the RatingDialog widget to show a rating dialog and gather user feedback or ratings for your app. Remember to stay up-to-date with the package documentation and updates to utilize any new features or improvements that might have been introduced in newer versions.

How to download and save image to file in Flutter

saurabh singh aswal — Fri, 14 Jul 2023 06:24:04 +0000

“One of the simplest activities that any application can perform is saving an image that has been downloaded from the Internet in the filesystem“

Hi guyz i hope you all are well so in this article we learn how to save url image into our local device like phone. Beginning with the assumption that we already know the URL of an image, we will download it first before saving it in the gallery or to a specified location.

don’t waste your time go to the code in to do this task we will use the following dependencies:

- flutter_file_dialog.
- path_provider.
- http.

Step 1: Create a basic layout:
Now we are going to create a very basic layout that displays an image from URL:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Save image to disk',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  static const _url = 'https://dosomthings.com/wp-content/uploads/2022/07/dc0a7e44e96647848177c8afd4bdabdd.png';

  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Save image to disk'),
        centerTitle: true,
        backgroundColor: Color(0xFFe91e63),
        actions: [
          IconButton(
            onPressed: () {
              // We will add this method later
            },
            icon: const Icon(Icons.save,color: Colors.white,),
          ),
        ],
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.only(
            left: 24.0,
            right: 24.0,
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(30.0),
            child: Image.network(_url),
          ),
        ),
      ),
    );
  }
}

Step 2: Give permission and set Configuration in android for Download and save image:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.saveimage">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <application>

And we upgrade to versions compileSdkVersion & minSdkVersion like this:

android {
    //HERE..
    compileSdkVersion 33

    ndkVersion flutter.ndkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

Step 3: Download and save image from the URL to a file:
The last step is to save the image to disk copy and paste.

import 'dart:math';
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:flutter_file_dialog/flutter_file_dialog.dart';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Save image to disk',
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  static const _url = 'https://dosomthings.com/wp-content/uploads/2023/07/How-to-download-and-save-image-to-file-in-FlutterDosomthings.com_-1024x576.png';
  var random = Random();


  Future<void> _saveImage(BuildContext context) async {
    final scaffoldMessenger = ScaffoldMessenger.of(context);
    late String message;

    try {
      // Download image
      final http.Response response = await http.get(
          Uri.parse(_url));

      // Get temporary directory
      final dir = await getTemporaryDirectory();

      // Create an image name
      var filename = '${dir.path}/SaveImage${random.nextInt(100)}.png';

      // Save to filesystem
      final file = File(filename);
      await file.writeAsBytes(response.bodyBytes);

      // Ask the user to save it
      final params = SaveFileDialogParams(sourceFilePath: file.path);
      final finalPath = await FlutterFileDialog.saveFile(params: params);

      if (finalPath != null) {
        message = 'Image saved to disk';
      }
    } catch (e) {
      message = e.toString();
      scaffoldMessenger.showSnackBar(SnackBar(
        content: Text(
          message,
          style:  TextStyle(
            fontSize: 12,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        backgroundColor: Color(0xFFe91e63),
      ));
    }

    if (message != null) {

      scaffoldMessenger.showSnackBar(SnackBar(
        content: Text(
          message,
          style:  TextStyle(
            fontSize: 12,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        backgroundColor: Color(0xFFe91e63),
      ));

    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Save image to disk'),
        centerTitle: true,
        backgroundColor: Color(0xFFe91e63),
        actions: [
          IconButton(
            onPressed: () {
              _saveImage(context);
            },
            icon: const Icon(Icons.save,color: Colors.white,),
          ),
        ],
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.only(
            left: 24.0,
            right: 24.0,
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(30.0),
            child: Image.network(_url),
          ),
        ),
      ),
    );
  }
}

Output:

Conclusion:
In this article, we have learned how to download and save an image to a file in Flutter. By following these steps, you can incorporate image downloading and saving functionality into your Flutter applications, opening up possibilities for offline image viewing and user-driven image saving features.
I hope now you understand how to download image. seriously you don’t believe when i don’t know how to download image then i try find the solution in many youtube channel and article but no one can explains briefly how to do this task. but finally i got. So now this is your turn do code and enjoy it.

If you you stuck in any case or you go too deep in this topic so you can checkout my new post in this topic 👇👇👇

How to download and save image to file in Flutter

❤️❤️ Thanks for reading this article ❤️❤️

If I got something wrong? Let me know in the comments. I would love to improve 🥰🥰🥰.

Clap 👏👏👏 If this article helps you.

if you like our work so please follow us on this Dosomthings

Our New and Attractive articles:

StreamBuilder VS FutureBuilder: Difference Between StreamBuilder and FutureBuilder In Flutter.

Tinder swipe card: How to implement tinder swipe card in a flutter.

Time Delay in Flutter: How to Run Code After Time Delay in Flutter App.

Hi I am new in here 😀😀😀

saurabh singh aswal — Fri, 14 Jul 2023 06:08:39 +0000

Hello everyone I am new in here and so excited to be the part of this dev world. i am atrected here because the good coding stuff, friendly community, healping each others in coding, learn somthings new.
I am a Flutter Developer and created a lots of apps and placed in playstore now i am work in my Personal Project so all the community member please help me if i am stuck in some conditions and i am also available for your help also.

please check out my website and if you give some feedback so i am so happy -->>Dosomthings.com.

Thank's and please connected ❤️❤️❤️