Contentstack
search
Changelog

Build a Flutter E-commerce App using Contentstack's Dart SDK

This demo Flutter E-commerce app is built using Contentstack's Dart SDK. It uses Contentstack to store and deliver the content of the e-commerce app.

View Code

Screenshots

screenshot
screenshot

Warning: This sample app is no longer maintained. It remains available for reference. If you have questions regarding this, please reach out to our support team and we will do our best to help!

Quickstart

Here's a quick guide on how to create a Flutter e-commerce app using Contentstack's Dart SDK.

Prerequisites

Note: For this tutorial, we have assumed that you are familiar with Contentstack and Flutter. If not, then please refer to Contentstack and Flutter docs for more details.

Install Flutter Using VS Code

  1. Open VS Code and select Extensions from the left navigation panel.  
  2. Then, in the Search Extensions in Marketplace search box, type Flutter. From the quick results, click on Flutter.
  3. From the Flutter details page, click on Install. 
  4. Press Ctrl + Shift + P on Windows and Cmd + Shift + P on macOS.
  5. Type flutter and select Flutter: New Project.
  6. If the Flutter SDK is not installed on your machine, it will ask you to Download SDK. Click on it and from the pop-up that opens, click on Open.
  7.  It will take you the Flutter install page. Select as per your OS and the download will begin.
  8. Once it is installed, you can follow steps 4 and 5 and create a new Flutter project.

We will first go through the steps involved in configuring Contentstack and then look at the steps required to customize and use the presentation layer.

  1. Create a Stack

    Log in to your Contentstack account, and create a new stack. This stack will hold all the data, specific to your website. Learn more on how to create a stack.

  2. Add a Publishing Environment

    To add an environment in Contentstack, navigate to Settings -> Environment, and click on the + New Environment tab. Provide a suitable name for your environment, say staging. Specify the base URL (e.g., http://YourDomainName.com), and select the language (e.g., English - United States). Then, click on Save. Read more about environments.

  3. Import Content Types

    A content type is like the structure or blueprint of a page or a section of your web or mobile property. Read more about Content Types.

    For this website, we have already created content types. You simply need to import them to your stack. (You can also create your own content types. Learn how to do this).

    To import the content types, first save the zipped folder of the JSON files given below on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack. The next screen prompts you to either create a new content type or import one into your stack. Click the Import link, and select the JSON file saved on your machine.

    Download All Content Types

    Now that all the content types are ready, let's add some content for your e-commerce app. 

  4. Add Content

    Create and publish entries for the content types we just imported into our stack. Once you have added content, save and publish these entries. Learn how to create and publish entries.

    With this step, you have created sample data for your website. Now, it’s time to use and configure the presentation layer.

  5. Clone and Configure the App

    To get your app up and running quickly, we have created a sample app for this project. You need to download it and change the configuration. Download the app using the command given below:

    $ git clone https://github.com/contentstack/contentstack-flutter-ecommerce-app.git

    Once you have downloaded the project, unzip it, and add your Contentstack API Key, Delivery Token, and Environment to the project during the SDK initialization step. (Learn how to find your Stack's API Key and Delivery Token. Read more about Environments.)

    import 'package:contentstack/contentstack.dart' as contentstack;
final stack = contentstack.Stack(apiKey, deliveryToken, environment);

    This will initiate your project.

  6. Set up Android Studio and Initialize Dart SDK

    To set up Android Studio and initialize Dart SDK, refer to our documentation here. 

  7. Build and Run your E-commerce App

    Now that we have a working project, you can build and run it. Open Android Studio and click on File. Then, select Open and an Open File or Project window will pop. Select your project that you just downloaded and click on OK.

    1. In your Android Studio IDE, select your device from the Target selector and click on the green Run icon to run the app.
    2. If you can't see the device listed in the Target Selector, go to the Tools option and select AVD Manager. You'll see a virtual device listed there.
    3. Click on the Run icon in the device select toolbar, or invoke the menu item Run.

      To run your app on VS Code, open it and run the following command for the iOS simulator in the terminal, if you are using a Mac machine:
      open -a Simulator.app
      On a Mac machine for the Android emulator, run the following command:
      emulator -list-avds
emulator -avd emulator_id

Additional Resource: Now that your Ecommerce app is ready, you can check out our Flutter News sample app that is built using the Contentstack Dart SDK.

More resources