Appgram Flutter SDK

A comprehensive Flutter SDK for Appgram, providing feature voting, roadmaps, help center, support tickets, status pages, surveys, and more.

Features

• Feature Voting (Wishes): Collect and prioritize user feedback with upvoting
• Roadmap: Display your product roadmap in a kanban-style board
• Releases: Show changelogs and release notes
• Help Center: Organize documentation with flows and articles
• Support Tickets: Allow users to submit support requests with magic link authentication
• Status Pages: Display service status and incidents
• Surveys: Collect feedback with branching logic
• Contact Forms: Dynamic form rendering and submission
• Blog: Display blog posts with categories and tags

Installation

Add to your pubspec.yaml:

dependencies:
  appgram_flutter: ^1.0.0

Then run:

flutter pub get

Quick Start

1. Wrap your app with AppgramProvider

import 'package:flutter/material.dart';
import 'package:appgram_flutter/appgram_flutter.dart';

void main() {
  runApp(
    AppgramProvider(
      config: AppgramConfig(
        projectId: 'your-project-id',
        orgSlug: 'your-org',      // Required for releases
        projectSlug: 'your-project', // Required for releases
      ),
      child: MyApp(),
    ),
  );
}

2. Use the widgets

import 'package:appgram_flutter/appgram_flutter.dart';

// Feature Voting
WishList(
  onWishTap: (wish) => print('Tapped: ${wish.title}'),
);

// Roadmap
RoadmapBoard(
  onItemTap: (item) => print('Tapped: ${item.title}'),
);

// Help Center
HelpCenter(
  onFlowTap: (flow) => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (_) => Scaffold(
        body: HelpFlowDetail(slug: flow.slug),
      ),
    ),
  ),
);

// Support Form
SupportForm(
  onSubmitted: (request) => print('Submitted: ${request.id}'),
);

// Status Board
StatusBoard(
  refreshInterval: Duration(minutes: 5),
);

// Releases
ReleaseList(
  onReleaseTap: (release) => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (_) => Scaffold(
        body: ReleaseDetail(slug: release.slug),
      ),
    ),
  ),
);

// Surveys
SurveyForm(
  slug: 'feedback-survey',
  onComplete: (response) => print('Completed!'),
);

// Contact Forms
ContactFormRenderer(
  formId: 'contact-form-id',
  onSubmitted: (submission) => print('Submitted!'),
);

// Blog
BlogList(
  onPostTap: (post) => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (_) => Scaffold(
        body: BlogPostDetail(slug: post.slug),
      ),
    ),
  ),
);

Using Providers Directly

For headless usage, use the Riverpod providers directly:

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:appgram_flutter/appgram_flutter.dart';

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Watch state
    final wishesState = ref.watch(wishesProvider);

    // Access notifier for actions
    final notifier = ref.read(wishesProvider.notifier);

    // Trigger fetch
    useEffect(() {
      notifier.fetchWishes();
    }, []);

    if (wishesState.isLoading) {
      return CircularProgressIndicator();
    }

    return ListView.builder(
      itemCount: wishesState.wishes.length,
      itemBuilder: (context, index) {
        final wish = wishesState.wishes[index];
        return ListTile(
          title: Text(wish.title),
          trailing: Text('${wish.voteCount} votes'),
        );
      },
    );
  }
}

Theme Customization

AppgramProvider(
  config: AppgramConfig(projectId: 'your-project-id'),
  theme: AppgramThemeData(
    mode: AppgramThemeMode.system, // light, dark, or system
    lightColors: AppgramColors.light.copyWith(
      primary: Colors.blue,
    ),
    darkColors: AppgramColors.dark.copyWith(
      primary: Colors.blueAccent,
    ),
    borderRadius: 12.0,
    spacing: 16.0,
  ),
  child: MyApp(),
);

Available Providers

Provider	Description
wishesProvider	Manages wishes/feature requests with pagination
voteProvider	Handles voting and unvoting
commentsProvider(wishId)	Manages comments for a wish
roadmapProvider	Fetches roadmap data
releasesProvider	Lists releases
releaseDetailProvider(slug)	Single release with features
helpCenterProvider	Help collection and flows
helpFlowProvider(slug)	Single flow with articles
helpArticleProvider(params)	Single article
supportProvider	Support ticket submission
surveyProvider(slug)	Survey data
surveySubmitProvider	Survey response submission
contactFormProvider(formId)	Contact form data
contactFormSubmitProvider	Form submission
statusProvider(params)	Status page overview
blogPostsProvider	Blog posts with pagination
blogPostDetailProvider(slug)	Single post with related

Dependencies

• flutter_riverpod: State management
• dio: HTTP client
• freezed_annotation: Immutable models
• shared_preferences: Local storage
• device_info_plus: Device fingerprinting
• flutter_markdown: Markdown rendering
• flutter_html: HTML rendering

Code Generation

After modifying models, run:

dart run build_runner build

License

MIT License - see LICENSE for details.