A convenient code generator for app styleguide, gallery, wireframes and/or storyboard.

Related tags

Templates framy
Overview

Framy

Example apps Acceptance tests Unit tests License: LGPL v3

A convenient code generator for app styleguide, gallery, wireframes and/or storyboard.

๐Ÿ‘‰ Official documentation ๐Ÿ‘ˆ

Packages

In order to use Framy, you will need two following packages:

  • framy_annotation - A package containing annotation classes.
  • framy_generator - A powerful code generator which creates whole application based on the annotations used.
Package Pub
framy_annotation pub package
framy_generator pub package

Examples

ezgif com-video-to-gif (16)

Idea

The idea behind Framy is to allow developers, designers, testers, managers and clients to easily access the components used in the Flutter app.

Framy is annotation-driven tool based on which you can generate:

  • a style guide describing the theme of your app
  • a component gallery showing the widgets you have written in out-of-context way
  • a playground for testing widgets with a variety of dependencies
  • and much more coming soon...

What makes Framy special?

  • Fully responsive
    • The generated application is mobile, tablet, desktop and web friendly. Framy generates a separate main file with a separate MaterialApp but it does use the same widgets you are using in your own Flutter app.
  • Standalone
    • You can easily host generated app the way you prefer or just run it locally. (Automated hosting of Framy App is planned as well ๐Ÿ˜‰ )
  • Non-invasive
    • Framy doesn't require using any special widgets to be working. There is no Framy widget to wrap your app in so it doesn't affect your actual product. Only annotations.

Installation

Get packages

To use Framy, you will need your typical build_runner/code-generator setup.
First, install build_runner and Framy by adding them to your pubspec.yaml file:

dependencies:
  framy_annotation:

dev_dependencies:
  build_runner:
  framy_generator:

Add the @FramyApp annotation

@FramyApp annotation is coming from framy_annotations package. It's only purpose is to specify where the Framy app should be generated. Without this, the generator will not work. There should be only one @FramyApp annotation for the project.

@FramyApp() //<--- Add this annotation
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(...);
  }
}

Run the generator

You can either run flutter pub run build_runner build to generate the app from the current code or flutter pub run build_runner watch to keep listening to changes in the source code and update the Framy app accordingly.

Run the generated app

Generator creates a new main file. Run flutter run lib/main.app.framy.dart to use Framy!

Annotations

Framy Annotations package offers a variety of annotations to generate the widest variety of pages in your Framy App.

FramyTheme

FramyTheme points out the ThemeData used in the Flutter application.

Using with ThemeData method or field

Since Framy uses the same widgets you do, it should use the same Theme as well. Use FramyTheme annotations to specify the Theme you are using. Based on that, Framy will generate your typography and color palette as well as it will use that theme for any other widget in the catalog.

@FramyTheme()
ThemeData getThemeData() => ThemeData(primarySwatch: Colors.orange);

Method annotated with FramyTheme must be public (available to use from outside the file)!

Using with custom theme class

Alternatively, you can use FramyTheme annotation with your own Theme class. If you have any colors (methods, fields, getters) defined in a class annotated with FramyTheme they will also be used in your color palette.

@FramyTheme()
 class AppTheme {
   static ThemeData get getTheme => ThemeData(primarySwatch: Colors.orange);
   Color get myAppBlack => Colors.black;
   static const myCompanyColorWhite = Color(0xFFFEFEFE);
}

There can be only one ThemeData accessor annotated in a project

FramyWidget

Annotate your Widget classes to include them in the gallery.

Framy will generate a dependencies panel which will allow the user to pass any parameters that are defined in the Widget's constructor.

@FramyWidget()
class CounterTitle extends StatelessWidget {
  final String verb;
  final int counter;

  const CounterTitle({this.verb = 'pushed', this.counter = 0});

  @override
  Widget build(BuildContext context) {
    return Column(
      key: Key('Counter title'),
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('You have $verb the button this many times:'),
        Text('$counter', style: Theme.of(context).textTheme.headline4),
      ],
    );
  }
}

FramyModel

Annotate your model classes to pass more complex parameters to your widgets

FramyWidget's constructor dependencies support by default only primitive types. In many cases you will pass a custom object instead of String or int. If you want to add an option to change custom dependencies, use FramyModel annotation with your model class.

@FramyModel()
class User {
  final String firstName;
  final String lastName;
  final int age;
  final List<String> emails;

  User(this.firstName, this.lastName, this.age, {this.emails});
}

You can annotate enums the same way:

@FramyModel()
enum Gender {female, male, other}

If your class uses other custom classes (e.g. Address in User), the subclasses have to be annotated with @framyModel as well

FramyPreset

Define dependency presets to speed up testing parameters to your widgets

In cases when your models have a lot of dependencies and it would be a big hustle to click them all through, you can define a preset object models which will be accessible in dependencies panel.

@FramyPreset()
User teenageJohn() => User('John', 'Smith', 13);

Since presets will be part of your normal source code, we recommend having them in a separate file, e.g. for User presets file user.framy.dart would do. :)

FramyUseProvider

If your widget dependency is passed by Provider and not constructor, just use @FramyUseProvider annotation

FramyUserProvider with FramyWidget will cause the generated app to pass a dependency using wrapped Provider around your widget.

@FramyUseProvider(User)
@framyWidget
class ProfilePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Consumer<User>( //<-- Framy will take care of this
      builder: (context, user, child) {
        return ...;
      },
    );
  }
}

Maintenance

Our purpose is to make this tool as comprehensive as possible. We are trying to constantly improve it, add new features, handle new cases and fix any bugs.

If there is any use-case that we do not support and you think we should, feel free to submit an issue on GitHub. ๐Ÿ™‚

Comments
  • Custom AppTheme passes color instead of theme

    Custom AppTheme passes color instead of theme

    With this code:

    @FramyTheme()
    class AppTheme {
      static ThemeData get themeData => ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          );
      static const cardColor = const Color(0xFF4359F5);
    }
    

    We get this:

    class FramyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          key: Key('FramyApp'),
          theme: AppTheme.cardColor,
          onGenerateRoute: onGenerateRoute,
        );
      }
    }
    

    Which is obviously wrong.

    bug 
    opened by MarcinusX 1
  • Changing dependencies panel's width manually

    Changing dependencies panel's width manually

    We should add a handle that would allow changing the width of the dependency panel according to user preferences. What's worth noting is that we are having dependency panel per page, but this width should be updated for all pages (so that we don't have to change it every time we change page)

    story 
    opened by MarcinusX 1
  • Github actions research

    Github actions research

    We want to research what can and can't we do with Github Actions

    • [x] Create a new hello world project
    • [x] Try to run tests in Github Actions (can be on commit)
    • [x] Build locally as macOS app
    • [x] Run integration test locally
    • [x] Run integration test on build app on the machine
    • [x] Make a screenshot locally in the automated test
    • [x] Make a screenshot on the machine
    • [x] Try to somehow export the screenshot - I'm not sure if it's possible

    How to build an app on the machine? I think what we can do is use a master branch where we can run apps on macOS. This means we technically should be able to just run the app on the macOS machine and run integration tests on it. :)

    The general idea is to have sth like that:

    name: Integration test
    on: commit(???)
    jobs:
      integration-test:
        runs-on: macOS-latest
        steps:
          - uses: actions/checkout@v1
          - name: Install Flutter
            uses: subosito/[email protected]
            with:
              channel: 'master'
          - run: flutter drive --target=test_driver/app.dart --release
    

    What we want to happen is run automated tests as macOS app.

    opened by MarcinusX 1
  • Using Canvas-kit to build showcase page, selecting devices DevicePreview on web

    Using Canvas-kit to build showcase page, selecting devices DevicePreview on web

    Resolves #149

    To use DevicePreview on web --dart-define=FLUTTER_WEB_USE_SKIA=true flag is required. Currently only devices with notch are working in DevicePreview on web.

    opened by moniaS 0
  • Device Preview on web not working

    Device Preview on web not working

    Can be found for example on https://www.framy.dev/#/weighttracker or when you just run the framy app on Chrome. Related issue: https://github.com/aloisdeniel/flutter_device_preview/issues/39

    bug 
    opened by MarcinusX 0
  • Example app links don't work in README.

    Example app links don't work in README.

    If you click on Github on "CounterApp" it redirects to not existing https://github.com/Fidev-io/framy/blob/master/framy.dev/#/counterapp

    Places to fix:

    • README in generator
    • README in annotation
    • README in framy-docs
    documentation 
    opened by MarcinusX 0
  • Added yaml config options

    Added yaml config options

    Resolves #13 Current default options:

    framy:
      wrap-with-center: false
      wrap-with-safearea: false
      wrap-with-scaffold: true
      wrap-with-devicepreview: true
      show-material-components: true
      show-storyboard: true
    
    opened by MarcinusX 0
  • Add ignores to generated file

    Add ignores to generated file

    Suggested by Diego on Slack:

    I want to know if it's possible to add someone "ignores" in the generated file. I see in others generators that consider that cases. I use the package "lint" and it gave me some errors.. Always that regenerate the file I need to paste these ignores:

    // ignore_for_file: unused_import
    // ignore_for_file: directives_ordering
    // ignore_for_file: type_annotate_public_apis
    // ignore_for_file: prefer_const_constructors
    // ignore_for_file: invalid_assignment
    // ignore_for_file: argument_type_not_assignable
    // ignore_for_file: prefer_const_constructors_in_immutables
    // ignore_for_file: avoid_return_types_on_setters
    // ignore_for_file: avoid_setters_without_getters
    // ignore_for_file: sort_child_properties_last
    // ignore_for_file: prefer_const_literals_to_create_immutables
    // ignore_for_file: prefer_generic_function_type_aliases
    // ignore_for_file: prefer_conditional_assignment
    // ignore_for_file: avoid_unused_constructor_parameters
    // ignore_for_file: prefer_typing_uninitialized_variables
    // ignore_for_file: curly_braces_in_flow_control_structures
    
    feature request 
    opened by MarcinusX 0
  • Support for build_runner v2

    Support for build_runner v2

    Thank you for building this amazing idea, I have watched your tutorial video and read the docs, and I believe the Flutter community could benefit a lot from this.

    Unfortunately, I have been unable to integrate framy with my project with the following error:

    Running "flutter pub get" in project...                           
    
    Because framy_generator >=0.2.2 depends on yaml ^2.2.1 and build_runner >=2.0.0 depends on yaml ^3.0.0, framy_generator >=0.2.2 is incompatible with build_runner >=2.0.0.
    So, because chief depends on both build_runner ^2.0.6 and framy_generator ^0.3.3, version solving failed.
    pub get failed (1; So, because chief depends on both build_runner ^2.0.6 and framy_generator ^0.3.3, version solving failed.)
    Process finished with exit code 1
    

    I believe this is linked to #160

    opened by Diaga 0
  • Nullable types

    Nullable types

    class FramyProfitIndicatorBoxCustomPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return FramyCustomPage(
          key: Key('Framy_ProfitIndicatorBox_Page'),
          dependencies: [
            FramyDependencyModel<Key*>('key', 'Key*', null),
    FramyDependencyModel<double*>('profit', 'double*', null),
    
          ],
          builder: (DependencyValueGetter valueGetter) {
            return ProfitIndicatorBox(
      key: valueGetter('key'),
    profit: valueGetter('profit'),
    
      );
          },
        );
      }
    }
    

    DartType ->

      /// If [withNullability] is `true`, then [NullabilitySuffix.question] and
      /// [NullabilitySuffix.star] will be be represented as `?` and `*`.
      /// [NullabilitySuffix.none] does not have any explicit presentation.
      ///
      /// If [withNullability] is `false`, nullability suffixes will not be
      /// included into the presentation.
    

    My project is not null safe (wasn't able to fix by changing that)

    opened by Norbert515 0
  • Could you please consider an alternative license?

    Could you please consider an alternative license?

    @MarcinusX

    Framy looks really great! Great work!

    I wonder if you have considered not using a GPL-based license.

    While technically, LGPL is 'safe' for a library like this, I believe it is an unnecessary hangup for the growth of this project.

    I have worked at companies (like Adobe) where anything GPL is absolutely prohibited (even LGPL).

    The risk for companies is just too high that all their IP / Code might get somehow tangled with GPL-based code.

    I don't see a real reason why a library like this needs to be GPL-based instead of MIT or BSD.

    I think it has a much better chance of success and broad adoption if you use a more business friendly license.

    Just something to consider.

    Thanks,

    Joe

    opened by joe-io 0
  • Null-safety support

    Null-safety support

    Running the generator with flutter pub run --no-sound-null-safety build_runner build produces:

    [SEVERE] Failed to snapshot build script .dart_tool/build/entrypoint/build.dart. This is likely caused by a misconfigured builder definition. [SEVERE] .dart_tool/build/entrypoint/build.dart:52:3: Warning: Operand of null-aware operation '?.' has type 'SendPort' which excludes null. - 'SendPort' is from 'dart:isolate'. sendPort?.send(result); ^Error: Cannot run with sound null safety, because the following dependenciesdon't support null safety: - package:build_runner_core - package:framy_generator - package:json_serializable - package:mobx_codegen - package:source_gen - package:build_config - package:build_runner - package:build - package:json_annotation - package:glob - package:crypto - package:logging - package:watcher - package:build_resolvers - package:timing - package:graphs - package:package_config - package:yaml - package:analyzer - package:framy_annotation - package:dart_style - package:checked_yaml - package:pubspec_parse - package:build_daemon - package:args - package:io - package:convert - package:pub_semver - package:_fe_analyzer_shared - package:mobx - package:http_multi_server - package:shelf - package:stream_transform - package:http_parser - package:mime - package:shelf_web_socket - package:web_socket_channel - package:cli_utilFor solutions, see https://dart.dev/go/unsound-null-safety. dart_tool/build/entrypoint/build.dart:50:44: Error: The parameter 'sendPort' can't have a value of 'null' because of its type 'SendPort', but the implicit default value is 'null'. - 'SendPort' is from 'dart:isolate'.Try adding either an explicit non-'null' default value or the 'required' modifier.void main(List args, [_i7.SendPort sendPort]) async { pub finished with exit code 78

    [โˆš] Flutter (Channel beta, 1.26.0-17.6.pre, on Microsoft Windows [Version 10.0.19042.804])
    [โˆš] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    [โˆš] Android Studio (version 4.1.0)
    [โˆš] VS Code, 64-bit edition (version 1.53.2)
    [โˆš] Connected device (1 available)
    
    โ€ข No issues found!
    

    Edit: This is issue in build_runner and was fixed in 1.10.4 ( https://github.com/dart-lang/build/issues/2966 ) which Framy does not use (yet).

    opened by spixy 1
  • Support for BLoC provider

    Support for BLoC provider

    Similar to #67, #79 and #117 for other providers, but then for BLoC.

    Would be very good to be able to set specific BLoC states and their properties to test widgets using Framy. Using @FramyUseProvider() doesn't seem sufficient, since BLoC requires a BlocProvider parent.

    Currently working around this by making more minimal widgets that don't have any direct provider dependency, which might even be the preferred way to do this.

    opened by Mardaneus86 0
Releases(generator_v0.1.3)
Flutter Storyboard

storyboard A Flutter Debug tool to see and test all your screens at once. Online Demo: https://rodydavis.github.io/storyboard/ Examples Custom Lane Bu

Rody Davis 194 Sep 22, 2022
Startup-Name-Generator-App-in-Flutter - Business Startup Name Generator App in Flutter

Business Startup Name Generator App #About APP: A simple mobile app that generat

AHSAN SIDDZ 0 Jan 30, 2022
Biyi - a convenient translation and dictionary app written in Flutter

biyi_app Biyi is a convenient translation and dictionary app written in Flutter.

biyidev 892 Dec 28, 2022
A flutter plugin about qr code or bar code scan , it can scan from fileใ€urlใ€memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from fileใ€urlใ€memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
Flutter The lightest, easiest and most convenient route management!

Language: English | ไธญๆ–‡็ฎ€ไฝ“ nav_router nav_router is the simplest / lightweight / convenient routing management solution for flutter. It supports various

FlutterCandies 104 Jan 3, 2023
Ruqe brings the convenient types and methods found in Rust into Dart, such as the Result, Option, pattern-matching, etc.

ruqe Ruqe brings the convenient types and methods found in Rust into Dart, such as the Result, Option, pattern-matching, etc. Additionally, the librar

Alexander Nitiola 12 Dec 28, 2022
Enum extendable - Dart code generator. Generates enum extensions code.

Generates code for the extension on an enum. Overview Being able to add fields and methods to an enum. Let's say we have the following enum: enum Math

null 0 Jan 10, 2022
A rich, convenient, easy-to-use flutter page transition package

flutter_page_transition A rich, convenient, easy-to-use flutter page transition package. README in Chinese Some Demos Getting Started Add this to your

Double Han 56 Sep 27, 2022
bq Scanner : An QR Code and Barcode Scanner and Generator.

bq Scanner A Barcode Scanner. A QR Code Scanner. A Barcode Generator. A QR Code Generator. Visit bq Scanner at https://ritikpatle.github.io/bqscanner/

Ritik Patle 4 Jun 5, 2022
An app to pick, upload and display images from camera and gallery with size and extension constraints.

image_uploader A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Ehmad Saeedโšก 4 Mar 7, 2022
Dart code generator for helping with (firebase) analytics.

analytics_events_gen An easy generator for tracking firebase analytics events via type safe methods. Add to pubspec.yaml Check pub for the latest vers

Herbert Poul 2 Nov 16, 2022
The Swift code generator for your assets, storyboards, Localizable.strings, โ€ฆ โ€” Get rid of all String-based APIs!

SwiftGen SwiftGen is a tool to automatically generate Swift code for resources of your projects (like images, localised strings, etc), to make them ty

null 8.3k Dec 31, 2022
Adobe XD Flutter Code Generator - Plugin

Adobe XD Flutter Code Generator - Plugin

Giovani Lobato 337 Dec 28, 2022
Code generator for Flutter's theme extension classes.

Welcome to Theme Tailor, a code generator and theming utility for supercharging Flutter ThemeExtension classes introduced in Flutter 3.0! The generato

iteo 35 Jan 2, 2023
Aves is a gallery and metadata explorer app, built for Android with Flutter.

Aves Aves is a gallery and metadata explorer app. It is built for Android, with Flutter. Features Aves can handle all sorts of images and videos, incl

Thibault Deckers 729 Jan 3, 2023
Flutter plugin that saves images and videos to devices gallery

Gallery Saver for Flutter Saves images and videos from network or temporary file to external storage. Both images and videos will be visible in Androi

Carnegie Technologies 131 Nov 25, 2022
Gallery with thousands of photos, no time to organize, no way to search and not enough space

Artificial Intelligence-Powered Gallery Overview Gallery with thousands of photos, no time to organize, no way to search and not enough space; these a

Abd al-Rahman al-Ktefane 4 Jul 25, 2022
its just take image from gallery or camera and save to file (in flutter)

flutter_img_pdf A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

vivek kumar 0 Dec 28, 2021
Album Image is based in photo_manager package and has the same concept as image_picker but with a more attractive interface to choose an image or video from the device gallery, whether it is Android or iOS

Album Image is based in photo_manager package and has the same concept as image_picker but with a more attractive interface to choose an image or vide

Phuong Vu 2 Oct 13, 2022