The framework forcontent-drivenFlutterapps.
Go from an MVP
Modular Features, Plugins & CMS-driven UI.
A new paradigm
Introducing Vyuh
Vyuh is a framework for building content-driven Flutter apps. It provides a powerful approach to rapidly build, scale and maintain your apps.
CMS-driven UI
Use any headless-CMS to remotely control screens, content, user-journeys, themes and much more. Deploy with Zero releases. No more waiting for App Store approvals. *Also called Server Driven UI (SDUI)
Modular Features
Build and test features as independent modules and assemble into the App when ready. Escape the trap of a monolithic App and scale quickly from Idea to MVP to Production and beyond.
Capabilities as Plugins
All third-party integrations are Plugins with standard interfaces, and available to all features.
Auth, Analytics, Storage, etc. are all plugins.
Open Source
The core of Vyuh is Open Source.
It leverages community-voted libraries such as go_router
, mobx
, flutter_mobx
, get_it
, http
and many others.
Core Technologies
Flutter
Powerful Cross-Platform UI framework
Sanity
Headless CMS for Structured Content
React
The UI library for building previews and components inside Sanity Studio.
Dynamic Experience
Let your CMS drive the App Experience
Instantly deploy changes to your user-journeys, content, themes, and more without any App Store releases.
Content-blocks
Break up your App into a set of content-blocks and assemble them into pages. Change layouts and themes on the fly.
Declarative page-flows
Setup the navigation and page flows directly inside your CMS
Actions and Behaviors
Navigate to Pages and Urls. Open dialogs, trigger animations and much more with Actions.
Conditional Control
Use conditions to control the visibility of content, features, and user-journeys.
No-Code
tool for business users with Flutter being the Full-Code
tool for developers. This provides the perfect balance of simplicity and power with neither team having to compromise.Modularity
Build Modular Features
Build and test features as independent modules and assemble into the App when ready.
Team Independence
Eliminate the co-ordination hassles of the app development process. Build without falling into the trap of a monolithic app.
Atomic & Transferable
Features can be built once and shared across a family of Vyuh-enabled Apps.
Ready for Scale
A modular architecture helps you grow from an MVP to a Super App, without re-writing the whole app.
Gallery of Reusability
Build a gallery of industry specific modules to rapidly develop your apps.
Family
of apps or to a Platform for white-labeled apps. Leverage modularity and compose-ability for Enterprise scale.Plugins
Integrations via Plugins
The shared capabilities of your application become plugins and are available to all features.
Fundamentals Ready
The cross-cutting functionality of any App such as Auth
, Analytics
, Storage
, etc. are all plugins and available to all features.
Standard Interfaces
Easily swap out one plugin for another without changing the feature code. All plugins adhere to a standard interface.
Custom Integrations
Add new third-party integrations at will and expand coverage over time.
Growing Library
We are actively expanding the set of integrations to be more comprehensive.
Open Source
Powered by Open Source
Relies on proven Open Source packages with no vendor lock-in.
Open Core
The core building blocks of the framework is open source.
Community Voted packages
Uses battle-tested and mature packages from the Open Source ecosystem.
Developer Tools
Use the built-in Developer Tools
feature to get an X-Ray view of your application.
How it works
Let's build a simple Movie Detail section that can be configured from the CMS and rendered with Flutter.
Scaffold a new Project with the Vyuh CLI
Generate a new project with the default CMS (Sanity.io
) and a fresh new Flutter App.
Define content-schemas for the CMS
Define a new content schema for the Movie Detail Section and expose various properties for configuration.
Add it to your CMS, via a FeatureDescriptor
, to use in your pages.
import { MdOutlineMovieFilter as Icon } from 'react-icons/md';import { defineField, defineType } from 'sanity';export const movieDetailSection = defineType({name: 'tmdb.movie.detailSection',title: 'Movie Detail Section',type: 'object',icon: Icon,fields: [defineField({name: 'representation',title: 'Representation',type: 'string',initialValue: 'short',options: {list: [{ value: 'short', title: 'Short List' },{ value: 'long', title: 'Long List' },],},}),defineField({name: 'type',title: 'Type',type: 'string',options: {list: [{ value: 'hero', title: 'Hero' },{ value: 'cast', title: 'Cast' },{ value: 'crew', title: 'Crew' },{ value: 'statistics', title: 'Statistics' },{ value: 'gallery', title: 'Image Gallery' },{ value: 'recommendations', title: 'Recommendations' },{ value: 'reviews', title: 'Reviews' },{ value: 'footer', title: 'Footer' },{ value: 'trailer', title: 'Trailer' },],},}),],preview: {select: {type: 'type',},prepare({ type }) {return {title: 'Movie Detail Section',subtitle: type,};},},});
Create Flutter counterparts for the content-schemas
Build the counterpart for the Movie Detail schema in Flutter. This renders the section with a default Layout and adapts based on the configuration.
Just like before we need to expose it with the FeatureDescriptor
.
part 'movie_detail_section.g.dart';()final class MovieDetailSection extends ContentItem {static const schemaName = 'tmdb.movie.detailSection';static final typeDescriptor = TypeDescriptor(schemaType: schemaName,title: 'Movie Detail Section',fromJson: MovieDetailSection.fromJson,);static final contentBuilder = ContentBuilder(content: typeDescriptor,defaultLayout: MovieDetailSectionLayout(),defaultLayoutDescriptor: MovieDetailSectionLayout.typeDescriptor,);final MovieDetailSectionType type;final ListRepresentation representation;MovieDetailSection({this.type = MovieDetailSectionType.hero,this.representation = ListRepresentation.short,super.layout,}) : super(schemaType: schemaName);factory MovieDetailSection.fromJson(Map<String, dynamic> json) =>_$MovieDetailSectionFromJson(json);}enum MovieDetailSectionType {hero,cast,crew,statistics,gallery,recommendations,reviews,footer,trailer,}()final class MovieDetailSectionLayoutextends LayoutConfiguration<MovieDetailSection> {static const schemaName = '${MovieDetailSection.schemaName}.layout.default';static final typeDescriptor = TypeDescriptor(schemaType: schemaName,title: 'Movie Detail Section Layout',fromJson: MovieDetailSectionLayout.fromJson,);MovieDetailSectionLayout() : super(schemaType: schemaName);factory MovieDetailSectionLayout.fromJson(Map<String, dynamic> json) =>_$MovieDetailSectionLayoutFromJson(json);Widget build(BuildContext context, MovieDetailSection content) {switch (content.type) {case MovieDetailSectionType.hero:return const HeroSection(mode: BrowseMode.movies);case MovieDetailSectionType.statistics:return const StatisticsSection(mode: BrowseMode.movies);case MovieDetailSectionType.cast:return PeopleSectionView(mode: BrowseMode.movies,representation: content.representation,isCast: true,);case MovieDetailSectionType.crew:return PeopleSectionView.crew(mode: BrowseMode.movies,representation: content.representation,isCast: false,);case MovieDetailSectionType.gallery:return const GallerySection(mode: BrowseMode.movies);case MovieDetailSectionType.recommendations:final store = vyuh.di.get<TMDBStore>();final movieId = GoRouterState.of(context).movieId();if (movieId == null) {return empty;}return FeaturedPreviewListSection(mode: BrowseMode.movies,movieType: MovieDetailSectionType.recommendations,mediaCardType: MediaCardType.recommendation,representation: content.representation,cacheKey: (id) => '$id.movie.recommendations',futureBuilder: () {store.selectMovie(movieId);return store.getFuture('$movieId.movie.recommendations');},);case MovieDetailSectionType.reviews:return ReviewSection(mode: BrowseMode.movies,representation: content.representation,);case MovieDetailSectionType.footer:return const FooterSection(mode: BrowseMode.movies);case MovieDetailSectionType.trailer:return const TrailersSection(mode: BrowseMode.movies);}}}
Assemble pages and journeys on the CMS
Now place some of these Movie Detail Sections on a page and order them the way you see fit.
Preview on the Simulator or Device
Set up your Vyuh app with the movie feature and other necessary plugins. See your CMS content live on your simulator or device.
Reorder sections on the CMS and see them update on the App. Now iterate, refine and publish when ready.
Explore integrations to fast track
Subscribe to the Enterprise Planand get access to our growing set of integrations for fast tracking App development.
FAQs
Frequently Asked Questions
Several ways to start building with the Vyuh Framework.
What kind of apps can I build with Vyuh?
Vyuh is a framework for building Flutter Apps. Any App that can be built with Flutter can be built with Vyuh as well. This includes apps for iOS, Android, Web and Desktop. Rather than starting from scratch with Flutter, you start with a solid foundation and build on top of it. The basics of any production-grade App are built-in, and you can focus on your business logic right away.
The framework was built to scale your apps over time. In that regard, it takes an approach where you break down your application into a set of features that can be added or removed like atomic blocks.
What kind of support can I get for my team?
We can help setup your App and get you running quickly. Thinking of your App in terms of its building-blocks can be a mindset shift. We will help you get up to speed on this. You will soon see how it completely unlocks a new type of freedom in building Flutter Apps.
Is it open source?
Yes. The core of the Vyuh framework is open source and is available today.
If you are interested to get a demo or understand more, please Contact Us.
Do I really need a CMS?
You could also build Vyuh-based apps without a CMS. If your app does not need dynamic content, feel free to skip the CMS. You still have the power of rest of the framework such as:
- Modular Features
- Integrations via Plugins
- Team Independence
- And many more...
What if I have an existing App? Do you help in migrating it?
Yes, we can help you migrate an existing app. The effort require to migrate will depend on the business complexity and the type of experience you are aiming for. There could be many things involved in the migration and requires a deeper understanding of the business context.
Contact Us for a focused discussion.
The Vyuh Framework
Build Modular, CMS-driven Flutter Apps. At Scale.