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

Quickstart

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

Prerequisites

• Contentstack account
• Android Studio or Visual Studio Code installed on your machine

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.