Get Started with Dart SDK and Live Preview

This guide will help you get started with Contentstack Dart SDK to build apps powered by Contentstack.

Prerequisites

SDK Installation and Setup

To use the Contentstack Dart SDK with your existing project, perform the following steps:

Create a New Flutter Project in VS Code

Open VS Code and select Extensions from the left navigation panel.
Then, in the Search Extensions in Marketplace search box, type Flutter. From the quick results, click on Flutter.
From the Flutter details page, click on Install.
Press Ctrl + Shift + P on Windows and Cmd + Shift + P on macOS.
Type flutter and select Flutter: New Project.
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 Open.
It will take you to the Flutter install page. Select the Flutter version as per your OS and the download will begin.
Once it is installed, follow steps 4 and 5 and create a new Flutter project.

Create a New Project in Android Studio

Open Android Studio and click on Configure.
Then, select Plugins. From the resulting screen, click on Flutter and click on Install.
Click on Accept and then Yes to install the Dart plugin.
Click on Restart when prompted.
In the Android Studio IDE, click on Start a new Flutter Project from the Welcome screen.
Then, select Flutter Application in the menu, and click on Next.
On the next screen, give your project a name, provide the Flutter SDK path (where you installed the Flutter SDK), and your project location.
If you prefer publishing the app, set the company domain and click on Finish.

Add Dart Dependencies to Your Project

To use Contentstack's Dart SDK in your existing project, you need to add the following code within your pubspec.yaml file:

dependencies:

  contentstack: any

You can download the latest dependency version here.

Set the Configurations

To initialize the Live Preview feature, you need to set certain configurations:

live_preview = {

    managementToken: management_token, 

    enable: true, 

    host: 'api.contentstack.io'

  }

Initializing the Stack with Live Preview

Since the Live Preview Utils SDK is responsible for communication, you need to initialize it within your stack.

Use the following command to initialize the stack:

final stack = Contentstack.stack(api_key, delivery_token, environment, live_preview: live_preview = {

    managementToken: management_token, 

    enable: true, 

    host: 'api.contentstack.io'

});

Note: By default, the host parameter points to the North America endpoint. If your website is hosted on the European data center, then pass the European endpoint against the host parameter.

Create an Interceptor

Use the following code to create an interceptor:

class LoggingInterceptor implements InterceptorContract {

  @override

  Future<RequestData> interceptRequest({RequestData data}) async {

   print(data.toString());

  stack.livePreviewQuery(data.toString())

   return data;

  }


  @override

  Future<ResponseData> interceptResponse({ResponseData data}) async {

      print(data.toString());

      return data;

  }


}

For Server-side Rendered Websites

To install and initialize the Live Preview Utils SDK, you can refer to our SSR Live Preview Setup documentation.

Query Request

Contentstack SDKs let you interact with the Content Delivery APIs and retrieve content from Contentstack. They are read-only in nature. The SDKs fetch and deliver content from the nearest server via Fastly, our powerful and robust CDN.

To get an entry, you need to specify the content type UID and the UID of the entry.

final entry = stack.contentType('contentTypeUid').entry(entryUid: 'entryUid');

    await entry.fetch().then((response) {

        print(response.toString());

    }).catchError((error) {

        print(error.message.toString());

});