Frequently Asked Questions

Getting Started & Technical Setup

How do I build a dynamic Flutter app using Hygraph?

To build a dynamic Flutter app with Hygraph, you need a basic understanding of Dart and Flutter, an iOS Simulator, and a Hygraph account (free to sign up). The process involves cloning the project repository, installing dependencies with flutter pub get, and running the app using flutter run. You then set up your content models, components, and fields in Hygraph, manage assets, and configure permissions for API access. For a step-by-step guide, see the original tutorial and GitHub source code.

What are the prerequisites for integrating Hygraph with Flutter?

You need:

These prerequisites ensure you can follow the integration steps and run your app locally.

How do I set up models, components, and fields in Hygraph for a Flutter app?

In Hygraph, models define the structure of your app (e.g., 'Trending' for news), components act as reusable templates (e.g., 'News Row'), and fields specify properties (e.g., title, preview, cover image). You create these via the Hygraph console, add sample assets, and configure modular fields to allow multiple news entries. For details, see Models, Components, and Fields documentation.

How do I manage assets like images and videos in Hygraph?

Hygraph provides a built-in asset management system for handling images, videos, PDFs, and more. You can upload assets via the Assets tab, use URLs for remote images, and publish them for use in your app. For more, see Asset Management Overview.

How do I configure API permissions and access in Hygraph?

By default, content in Hygraph is secure. To enable public API access, go to Project Settings > API Access, and initialize defaults for the Public Content API. Hygraph supports robust authorization and authentication mechanisms. Learn more at Roles and Permissions.

How do I use GraphQL in a Flutter application with Hygraph?

Install the graphql_flutter package, configure the GraphQL client with your Hygraph endpoint, and use queries to fetch data. Hygraph's GraphQL API enables efficient content delivery and management. For details, see GraphQL in Flutter and API Reference.

Features & Capabilities

What are the key features of Hygraph?

Hygraph offers a GraphQL-native architecture, content federation, scalability, and a robust asset management system. It supports integrations with platforms like Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, and more. Hygraph also provides enterprise-grade security, SSO, audit logs, and sandbox environments. For a full list, see Hygraph Features and Integrations.

Does Hygraph provide an API for content management?

Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Learn more at the API Reference.

What integrations does Hygraph support?

Hygraph supports integrations with hosting/deployment (Netlify, Vercel), eCommerce (Shopify, BigCommerce, commercetools), localization (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization (Ninetailed), AI (AltText.ai), and more. See the full list at Hygraph Integrations.

How does Hygraph optimize content delivery performance?

Hygraph is designed for optimized content delivery, ensuring rapid distribution and responsiveness. This improves user experience, engagement, and search engine rankings, while reducing bounce rates and increasing conversions. For more, see Headless CMS Checklist.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For details, visit the pricing page.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more, see Hygraph Security Features.

Use Cases & Customer Success

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. Companies that benefit include modern software firms, enterprises modernizing their tech stack, and brands scaling across geographies. Source: ICPVersion2_Hailey.pdf

What industries are represented in Hygraph's case studies?

Industries include food and beverage (Dr. Oetker), consumer electronics (Samsung), automotive (AutoWeb), healthcare (Vision Healthcare), travel and hospitality (HolidayCheck), media and publishing, eCommerce, SaaS (Bellhop), marketplace, education technology, and wellness/fitness. See Case Studies.

Can you share specific customer success stories using Hygraph?

Yes. Komax achieved 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. More stories at Customer Stories.

Who are some of Hygraph's customers?

Customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See Case Studies for more.

Pain Points & Solutions

What problems does Hygraph solve?

Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting global team needs, clunky content creation), financial pains (high costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache issues, OpenID integration). For details, see Product Page.

How does Hygraph solve these pain points?

Hygraph provides an intuitive interface for non-technical users, modernizes legacy systems with GraphQL-native architecture, ensures consistent branding via content federation, and streamlines workflows to reduce costs and accelerate speed-to-market. It also simplifies development, query management, and schema evolution, and resolves cache and integration issues. For more, see Product Page.

What KPIs and metrics are associated with the pain points Hygraph solves?

KPIs include time saved on content updates, system uptime, speed of deployment, consistency across regions, user satisfaction scores, reduction in operational costs, ROI, time to market, maintenance costs, scalability metrics, and performance during peak usage. For more, see CMS KPIs Blog.

Support & Implementation

How long does it take to implement Hygraph and how easy is it to start?

Hygraph is designed for quick onboarding—even non-technical users can get started easily. For example, Top Villas launched a new project in just 2 months. You can sign up for a free account and use documentation and onboarding guides for a smooth start. See Documentation and Top Villas Case Study.

What customer support and training does Hygraph offer?

Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, webinars, and a community Slack channel. For more, see Contact Page.

What feedback have customers given about Hygraph's ease of use?

Customers praise Hygraph for its intuitive interface and ease of use, noting that even non-technical users can start using it right away. The UI is described as logical and user-friendly for both technical and non-technical teams. Source: Customer Feedback.

Documentation & Resources

Where can I find Hygraph's technical documentation?

Comprehensive technical documentation is available at Hygraph Documentation, covering everything from onboarding to advanced integrations.

Where can I find tutorials and guides for building with Hygraph?

The Hygraph Blog features developer tutorials, guides to content modeling, and integration walkthroughs. Visit the Blog and Getting Started Guide for more.

Webinar Event: How to Avoid Personalization Tech Traps

How to build dynamic Flutter apps with Hygraph

In this post, we'll build a news app in Flutter with Hygraph’s unique features.
Malomo Demola

Written by Malomo 

Apr 19, 2024
How to build dynamic Flutter apps with Hygraph

In this post, we'll build a news app in Flutter with Hygraph’s unique features.

Hygraph is a headless content management system (CMS) featuring Content Federation that allows users to efficiently create, manage, and deliver content data from diverse sources. It enables you to deliver digital experiences through a unified content endpoint, eliminating the need to migrate everything to a single platform.

Flutter is an open-source UI development kit for building multi-platform applications from a single codebase.

Let’s get started!

#Prerequisites

You’ll need a few things to follow along:

#Project setup

In this project, we’ll use prebuilt UIs to expedite development. The UI consists of:

  • A news component
  • A trending screen and
  • An application entry point

To get started, let’s clone the project by navigating to a desired directory and running the command below:

git clone https://github.com/Mr-Malomz/hygraph_flutter.git && cd hygraph_flutter

Next, we’ll need to install the project dependencies by running the following command:

flutter pub get

Then, select an iOS device and run the project:

flutter run

Running app

#Set up the news app on Hygraph

Before setting up our project on Hygraph, we must understand some of the features it provides. In our case, Hygraph’s Models, Components, and Fields.

  • Models serve as the building blocks of our application, allowing us to structure specific sections. For instance, a news app may have models for trending, users, explore, etc.
  • Components in Hygraph function similarly to widgets in Flutter. You can think of these as templates defined with properties that you can reuse in building applications. A model can contain multiple components.
  • Fields are used to define the properties of our application. For instance, a news app may have properties such as title, preview, cover image, etc.

For our news app, we can set up our application to have a Trending model and a News Row component with Title, Preview, and Cover Image fields.

News app architecture

Create a Model

To get started, log into your Hygraph console, click the Add project button, input the news app as the project name, select the preferred Region, and Add project.

Next, navigate to the Schema menu, click the + Add Model button, input Trending as the display name, accept suggested values (for API ID and Plural API ID), and click the Add Model button to create a model.

Add a model Input model details and create

Create a Component and Fields

Next, click the + Add button beside the Component submenu, input News Row as the display name, accept suggested values, and click the Add Component button to create it.

Add component Add details and create component

Next, we must add fields to our component by selecting a Field, inputting the corresponding Display name, and then click Add. You can use the table below as a reference:

Field Display name
Single line text Title
Multi line text Preview
Asset picker Cover Image

Our component should have three fields, as shown below:

Component with fields

Managing assets with Hygraph

Hygraph offers a built-in asset management system for handling images, videos, PDFs, and more. To further enhance our news app, we need to upload sample images for our cover images. To do so, navigate to the Assets tab and click the Upload button.

Assets tab

We can utilize the data below to upload the images using the Link (URL) option.

Image name Image URL
Blockchain https://bit.ly/3PfmE78
Computer vision https://bit.ly/4c0JM33
Edge computing https://bit.ly/4394UzW

Link option Upload assets

Finally, we need to publish images by selecting them and clicking the Publish button.

Publish images

Use the component in the model

Next, we must use our News row component in the Trending model to form our news app's architecture. To do this, navigate to the Schema menu, select the Trending model, and add a Modular field.

Add modular field

PS: The Modular field will assist us in modeling our application to include multiple *News row* components.

Input News collection as the display name, check the Allow multiple values, select the News Row as the allowed component and Add.

Add components to model

Add data to the model

With our news app set up on Hygraph, we can proceed to populate it with the required data as shown below:

Title Preview Cover Image
Blockchain trend The current trend in the block.... Add the uploaded Blockchain image
Computer vision Computer vision is revolutionizing how... Add the uploaded Computer vision image
Edge computing Edge computing is a distributed info... Add the uploaded Edge computing image

To do this, click the Go to content editing link, click the + Add entry button, and fill in the required information.

Go to content Add entry

Next, we need to make the content available to our Flutter application by clicking the Save & publish button.

Publish content

Finally, we can test the published content using the API playground and select desired fields.

API playground

Update content permission

By default, contents stored on Hygraph are secure unless you explicitly define permissions. To enable access to the content, navigate to the Project settings menu, select the API Access submenu, scroll to the Public Content API section, and click the Yes, initialize defaults button.

Set permission

Hygraph ships with a robust authorization and authentication mechanism. Learn more about it on its dedicated page.

Lastly, we also need to copy the application endpoint. It will come in handy when building our application.

Endpoint

#Building the news app with Hygraph and Flutter

To get started, we first need to install the graph_flutter package, a package for interacting with GraphQL in a Flutter application. We can install it by running the command below:

flutter pub add graphql_flutter

Secondly, we need to modify our application entry point lib/main.dart to initialize the GraphQL clients as shown below:

import 'package:flutter/material.dart';
import 'package:hygraph_flutter/screens/home.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
void main() {
runApp(const MyApp());
}
final HttpLink httpLink = HttpLink("COPIED ENDPOINT GOES HERE");
final ValueNotifier<GraphQLClient> client =
ValueNotifier<GraphQLClient>(GraphQLClient(
link: httpLink,
cache: GraphQLCache(),
));
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return GraphQLProvider(
client: client,
child: MaterialApp(
title: 'News App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const Home(),
),
);
}
}

The snippet above does the following:

  • Creates a link using the copied endpoint
  • Configures the GraphQL client to use the link
  • Utilizes the GraphQLProvider to wrap the application, enabling client usage across the entire application

Thirdly, we need to create a lib/utils.dart file to represent our application data. The model will cater to converting the response sent from the JSON response to a Dart object.

class _CoverImage {
String fileName;
String url;
_CoverImage({
required this.fileName,
required this.url,
});
factory _CoverImage.fromJson(Map<dynamic, dynamic> json) {
return _CoverImage(
fileName: json['fileName'],
url: json['url'],
);
}
}
class News {
String id;
String title;
String preview;
_CoverImage coverImage;
News({
required this.id,
required this.title,
required this.preview,
required this.coverImage,
});
factory News.fromJson(Map<dynamic, dynamic> json) {
return News(
id: json['id'],
title: json['title'],
preview: json['preview'],
coverImage: _CoverImage.fromJson(json['coverImage']),
);
}
}

Lastly, we need to modify the lib/screens/home.dart file by importing the required dependencies and creating a query string with the required fields.

//other imports
import 'package:hygraph_flutter/components/news_row.dart';
import 'package:hygraph_flutter/utils.dart';
class Home extends StatefulWidget {
const Home({super.key});
@override
State<Home> createState() => _HomeState();
}
String getNewsQuery = """
query MyQuery {
trendings {
newsCollection {
... on NewsRow {
id
preview
title
coverImage {
createdAt
fileName
url
}
}
}
}
}
""";
class _HomeState extends State<Home> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
// UI CODE GOES HERE
}
}

Then, utilize the query to make requests, check for appropriate responses, and pass the required values to the NewsRow widget.

// imports goes here
class Home extends StatefulWidget {
//code goes here
}
String getNewsQuery = """
//query strings goes here
""";
class _HomeState extends State<Home> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:
const Text('Trending News', style: TextStyle(color: Colors.white)),
backgroundColor: Colors.black,
),
body: Query(
options: QueryOptions(document: gql(getNewsQuery)),
builder: (result, {fetchMore, refetch}) {
if (result.hasException) {
return Text(result.exception.toString());
}
if (result.isLoading) {
return const Center(
child: CircularProgressIndicator(
color: Colors.black,
));
}
List<News>? newsList =
(result.data?\["trendings"\][0]["newsCollection"] as List<dynamic>)
.map((item) => News.fromJson(item))
.toList();
if (newsList.isEmpty) {
return const Text('No news yet!');
}
return ListView.builder(
itemCount: newsList.length,
itemBuilder: (context, index) {
final news = newsList[index];
return InkWell(
onTap: () {},
child: Container(
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(width: .5, color: Colors.grey),
),
),
padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
NewsRow(
url: news.coverImage.url,
preview: news.preview,
title: news.title,
)
],
),
],
),
),
);
},
);
},
),
);
}
}

With that done, we can restart the application using the command below:

flutter run

Running app

The complete source code can be found on GitHub.

#Conclusion

This post discusses building a news app in Flutter by exploring some unique functionalities in Hygraph. Beyond the topics discussed above, you can extend the application by exploring Hygraph’s well-tailored features to build small to large enterprise applications.

Finally, join the Slack community to stay updated on the latest developments and connect with fellow Hygraph developers.

Useful resources

Blog Author

Malomo Demola

Malomo Demola

Technical Writer

Demola is an experienced product designer, software developer, and technical writer who is passionate about building products and creating engaging content. Beyond his professional career, Demola loves to cook, explore new places, and watch movies.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.