• If you're using the Flutter framework for the first time, I'd suggest you to go online and get a basic idea of what Flutter is and how it works. It'll help you connect better with the work that you're going to be doing.

• We will set up the basic skeleton of the app first. If you are making a Flutter app for the first time, refer this page. After successfully setting up your new flutter project, we will now make two directories:

  • UI - this will store the dart files of all the screens and pages.
  • Functionalities - this will store all the other dart files like firestore_service.dart which will have all the CRUD functions for the firestore, auth.dart which will have all the firebase authentication related code and similarly other dart files which simply just run in the background at all time and is further needed by other dart files in the UI directory.

  The file structure for the completed app would be similar to the image below.

  

• We're also going to need a few flutter packages available at pub.dev. For which we need to add few dependencies in pubspec.yaml file, which should then look like -

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  english_words: ^3.1.0
  carousel_pro: ^1.0.0
  firebase_auth: ^0.16.0
  shared_preferences: ^0.5.7
  firebase_core: ^0.4.4+3
  firebase_analytics: ^5.0.15
  cloud_firestore: ^0.13.5
  firebase_storage: ^3.1.6
  firebase_messaging: ^6.0.16
  google_sign_in: ^4.4.4
  photo_view: ^0.9.2
  cached_network_image: ^2.2.0+1
  flutter_spinkit: "^4.1.2"
  fluttertoast: ^4.0.0
  location: ^3.0.2
  google_maps_flutter: ^0.5.27+3
  geocoder: ^0.2.1
  provider: ^4.1.2
  geolocator: ^5.3.1
  geoflutterfire: ^2.1.0
  flutter_speed_dial: ^1.2.5
  url_launcher: ^5.4.10
  image_picker: ^0.6.7
  webview_flutter: ^0.3.22+1
  badges: ^1.1.1
  flutter_signin_button: ^1.0.0
  curved_navigation_bar: ^0.3.2
  streaming_shared_preferences: ^1.0.1
  line_awesome_icons: 
    git:
      url: git://github.com/mateotomasgomez/line_awesome_icons_flutter.git
      ref: master
 

• After setting up the project, we'll set up the firestore project and make the skeleton database structure:

  1. If you're using firebase for the first time, I'd recommend you to check this page out.

  2. Make a clean structure of how your database should look like. Decide what all collections should be incorporated and then further decide the structure and fields of the documents in each collection. You should atleast have these discrete collections -

     • users - store all the user documents
     • products - store all the product documents
     • shops - store all the shop data
     • orders - store all the orders placed by all the customers

     we'll discuss more on how the documents in each collection should look like in the later sections.

  3. Once you've made the skeleton of the database, it's time to connect your database with the application. Check this page out for a detailed walk-through.

• Search for different basic flutter packages and start using them for your own testing purpose.

• Research about good design practices. Learn how you can make your app more accessible and user friendly.

• Evaluate your choice of widgets to use; fancier ones are appealing but keep utility in mind while making the choice. Check here for some cool widgets.

• Start with making the Homescreen, which should look like the image below. Use Material.io for many designing and development resources. That navigation bar can be made using the curved navigation bar package available at pub.dev. Location icon shows the current location of the device, check this page out for a detailed walk through. I recommend placing all the location service related code in a separate dart file in the functionalities directory.The horizontal scrollable list under "Top stores nearby" shows all the stores nearby. We'll later discuss how to query stores based on the current location.

  

• Build the discover page. It's a very basic page with a tab-bar in it, the categories which will show products of that particular category, and the Shops tab which will show the products of that particular shop. Showing products of a particular shop or catagory or both can be tackled with simple firestore queries.

  

• Build the Orders page, which again is a simple task. All you need to do is query the orders collection based on the user data, then display using a list view.

  

• Making a wishlist page. I'd recommend storing the wishlist data of a particular user in a separate field of the user document. Which can simply be a list of the product ids of all the products in the wishlist. Now you just have to show those products with simple querying in a way similar to the image below.

  

• Making the product listview page, which basically shows different query results of the products collection, like search query, shop specific query, section specific query, discount specific query etc.

  

• Product description page. Whenever we tap on a product from the query result, we are navigated to another page which displays the complete product description. Descriptions include the full size images, price, discount, sizes, variants etc. This also contains shop details which is offering that specific product.

  

• To build the cart page, I'd recommend the same to have a separate field in the user document (in users collection). This will have all the cart related information, like product ids of the products in the cart and their quantities. The cart should look like the image below. The card layout can be achieved using the card widget and the stack widget (which gives that effect to the delete button on the top right).

  

• On tapping the place order in the cart, you should be navigated to the review cart page. This will give you a summary of your order, address details, payment details etc. Again basic querying from the firestore should do most of the work. Adding a new address or edit phone number will require you to update the user document.

  

• To implement features like "Place Order", basic CRUD functions can be used. Store the order data in the orders collection. Make sure to include fields like payment detailed, address, userId etc.

• Create basic (UI) forms similar to the image shown above.
• To add functionality to it, register users with email and Gmail and authenticate the user into the database with the help of packages like firebase_auth and google_sign_in.
• Again, keeping the authentication related code/files in the functionalities folder will be a good practice.
• If the user is registering for the first time, you need to make a skeleton document in the users collection for the user. Although there are many ways to do that, one of which is using firebase cloud functions. If you're new in using firebase cloud functions, start with this page. After successfully writing and deploying your cloud function, you should see something similar to the snippet shown below.

exports.onCreate = functions.auth.user().onCreate((user) => {
  console.log('New user at', user.email, user.uid);
  const email = user.email;
  const uid = user.uid;
  name = '';
  photoUrl = 'https://firebasestorage.googleapis.com/v0/b/porsio-3829b.appspot.com/o/user_profile%2Fdefaultt.png?alt=media&token=7f088463-bdf8-4dcf-a526-09fac66003d5';
  if (user.photoURL !== null)
    photoUrl = user.photoURL;
  if (user.displayName !== null)
    name = user.displayName;
  console.log(user.photoURL);
  console.log(user.displayName);
  let c = {};
  return admin.firestore().collection('users').doc(uid).set({
    email: user.email,
    location: new admin.firestore.GeoPoint(0, 0),
    displayPic: photoUrl,
    mobileNo: '',
    name: name,
    isProfileComplete: false,
    cart: c,
    address: [],
    wishlist: [],
    orderHistory: [],
    since: admin.firestore.FieldValue.serverTimestamp(),
    tokens: [],
  });
});

• After registration/login page, users should be redirected to the homepage. In case of error in any of the credentials, the appropriate error must be displayed.

• The following figure is what your user's document in firestore should look like (with respect to the parameters assigned to each user like name, address, wishlist, cart etc).

  

• Although what we want can be achieved through many different ways, but what we'll be doing is quite simple and much reliable. For querying stores based on the location, we'll be using a package called GeoFlutterFire. It allows you to store and query a set of keys based on their geographic location. GeoflutterFire is an easy to use tool which will make querying easy while keeping the application light and breezy.
• Querying through GeoFlutterFire gives you a list of document snapshots as a result. So, we'll be writing a simple function like what's shown below, to get a list of document snapshots of all the shops that are nearby.

Stream<List<DocumentSnapshot>> getNearbyStores(LatLng location) {
    Geoflutterfire geo = Geoflutterfire();
    GeoFirePoint center =
        geo.point(latitude: location.latitude, longitude: location.longitude);
    var collectionRef = db.collection('shops');
    var geoRef = geo.collection(collectionRef: collectionRef).within(
        center: center, radius: 25, field: 'location', strictMode: false);
    return geoRef;
  }

• Now with the help of providers, we'll make this list available throughout the widget tree.
• Now slightly modify the firebase querying functions, by adding an extra condition. A condition (whereIn) to check whether the shop data in the product's document matches with any entry of the nearby shops list. For example:

 Stream getProducts(List<DocumentReference> nearByShopsReferences) {
    Stream<QuerySnapshot> prods = db
        .collection('products')
        .where('shop', whereIn: nearByShopsReferences)
        .snapshots();
    return prods;
  }

• Read the documentation for Paytm SDK integration in the Flutter app available here.
• Download the Paytm web sample kit for Node.js form here.
• We now need to set up our own firebase cloud functions and then integrate the payment web API.
• Create a new firebase function and install express and body-parser dependencies.
• Copy the checksum and crypt from the web sample kit to the functions directory(where the index file is located).
• Now writing the index code is quite complicated. We'll be making a post request for payment and then extract the parameters received from the request. We'll then pass these parameters to create a checksum and then make a request to move forward with the payment.
• In this function we'll also provide a callback URL i.e. the URL for the payment receipt function.
• Payment receipt function will receive a post request on the payment receipt. We get the checksum from the response data, then verify it for failed or successful transactions.
• You can go ahead and test your function using Postman.
• Now make the web view for the web payment portal. For this use the web view package from pub.dev.
• Now build a measure to create a post request from the background with all the parameters(amount, client name, email etc).
• Now after the transaction is complete the response will be received in the form of a JSON. So based on the status of transaction, payment success or failed screen can be shown.
• For a further detailed walk through, I'd recommend you check the video tutorial provided in the References below.

• Add the package dependency to your project’s “pubspec.yaml”. Find the Firebase Cloud Messaging for Flutter package here.
• On the Android side the Google Services Gradle Plugin needs to be included in the Gradle configuration.
• The package has a function to generate a unique FCM identifier a.k.a. "token" for each device. Which will help the cloud function to send notification to a specific device.
• When a user logs in, we must generate the token for the device and then store it in one of the fields of the user document.
• Now write cloud functions for sending push notifications at different events, like when a new order is placed, canceled etc. Check the documentation for more details on how to write the functions.
• One such example is shown below:

exports.newOrderTrigger = functions.firestore.document('orders/{orderId}').onCreate((snapshot, context) => {
  orderData = snapshot.data();
  db.collection('users').doc(orderData.userId).get().then(doc => {
    if (!doc.exists) {
      console.log('No such User document!');
      throw new Error('No such User document!'); 
    } else {
      //console.log('Document data:', doc.data());
      console.log('Document data:', doc.data().tokens);
      //tokens = doc.data().tokens;
      for (var token of doc.data().tokens) {
        tokens.push(token);
      }
      var payload = {
        "notification": {
          "alert": "Order Placed!",
          "title": "New order placed",
          "body": "Your order for " + orderData.prodName + " has been placed successfully.",
          "clickAction": "FLUTTER_NOTIFICATION_CLICK",
          "sound": "default",
          "badge": "2",
        }
      }
      // eslint-disable-next-line promise/no-nesting
      return admin.messaging().sendToDevice(tokens, payload).then((_response) => {
        console.log('pushed to all');
        return true;
      }).catch((err) => {
        console.log(err);
      })
    }
  })
    .catch(err => {
      console.log('Error getting document', err);
      return false;
    });
 

Here are some recommendations you can adopt to make your app even better:

• A map to show the exact location of all the stores nearby. Which further has an option to set the location of the user. Check this tutorial out for adding google maps and markers to your flutter application.

• A profile page. Here, the user can edit all the personal information like phone number, address.

  

• Automated email and texts. Use of automated emails and texts for verifications and sending useful information.

• Products recommendations.

• Use of google analytics, for better understanding the user behaviour towards the application. Check this page for more details.

• A proper functioning search bar.

  

• Users should have the option of sharing the product details to other users.

• Using advanced flutter animations to further improve the appearance of the application.

• Add a feature for collecting user feedbacks.

  

• Every products and shops can be rated by the users.

• Customised search results based on user's activity.

• Finally when you're all done, publish your app to the google playstore.

• Make necessary changes for the iOS devices and then move forward to publish it in the app store as well.