gallerize

Flutter package for creating Flutter Gallery-like gallery/demo for your package/widget.

Purpose of this package

The gallerize package can be used to demonstrate what YOUR package/widget is for. It is inspired by Flutter Gallery (see repo on GitHub), therefore the name "gallerize".

gallerize allows you to take your own package/widget and create an app around it which provides a description, a preview and exemplary source code, just like Flutter Gallery does it for the material and cupertino widgets. gallerize saves you from creating boilerplate code for creating a gallery app structure, importing themes etc.

Showcase

gallerize is used by:

• Backdrop package -> See demo here
• HSV Color Pickers package -> See demo here
• Gallerize package itself -> See demo here

Example

Suppose you created an awesome widget (lib/my_fancy_widget.dart) which you want to show to your workmates/boss or to your package's users:

class MyFancyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text("My Fancy Widget!"),
      ),
    );
  }
}

Using gallerize you can easily create an app that looks as follows:

How to use it?

1. Add dependency to pubspec.yaml:

dependencies:
  gallerize: <current_version>

2. Add all the relevant source files to the assets of pubspec.yaml:

  assets:
    - lib/my_fancy_widget.dart

3. Import the gallerize package:

import 'package:gallerize/gallerize.dart';

4. Use the GallerizePage widget within your app:

MaterialApp(
  title: 'My Fancy Widget Gallery',
  theme: GallerizeThemeData.darkThemeData,
  home: GallerizePage(
      name: "My Fancy Widget",
      description:
          "This is a gallery app demoing the fancy widget that I created. "
          "With the help of the fancy widget, you can create the "
          "fanciest app you have ever seen!",
      codeFile: "lib/my_fancy_widget.dart",
      preview: MyFancyWidget()),
)

GallerizePage expects at least a name and a description, which are shown in the info-tab. codeFile is used to tell gallerize which dart code to show in the code-tab. preview defines the widget that should be shown in the preview-tab.

Automatically publish demo app (Flutter web) on GitHub pages

If you want to publish the gallerize demo app for web on your project's GitHub pages, follow these steps:

1. Set up Flutter for web and check that your project runs fine on web locally.
2. Set up GitHub action by creating a file .github/workflows/deploy_web.yaml within your project root.
3. Get the code from this gist and paste it into your deploy_web.yaml file.
4. Modify it accordingly:
   • If you want to build and deploy your project's example/ subfolder, you are good to go.
   • If you want to build and deploy your project's root folder, remove line 20 from the workflow file and change line 27 to FOLDER: build/web.
5. Push your code and create a tag in your repo. Upon tag creation, the action triggers and your page should be accessible via https://<user>.github.io/<repository>/.

For more information, check this medium article!

Setting the app theme

To change the theme for your gallery-app, you can use two themes offered by gallerize, which were taken from Flutter Gallery:

MaterialApp(
  theme: GallerizeThemeData.darkThemeData,
)

The two offered themes are GallerizeThemeData.darkThemeData and GallerizeThemeData.lightThemeData.

Changing the syntax highlighting theme

gallerize internally uses flutter_highlight for syntax highlighting. See all available themes.

To use a certain syntax highlighting theme, do the following:

1. Import the desired theme (e.g. a11y-dark.dart):

import 'package:flutter_highlight/themes/a11y-dark.dart';

2. Set the theme in your GallerizePage:

GallerizePage(
    highlightingTheme: a11yDarkTheme
    ...
)

The default theme used is draculaTheme ('package:flutter_highlight/themes/dracula.dart')

gallerize badge

There is a gallerize badge that you can put on your project's README.md.

Add this to your README.md:

[![gallerize](https://img.shields.io/badge/gallerize-check%20demo-purple?logo=flutter&logoColor=blue)](<URL_TO_YOUR_GALLERY_PAGE>)

For customizing the badge, see https://shields.io/

TODO

• Multi-screen size support (toggle for fullscreen/mobile view)

Contribute

Check out the Purpose of gallerize package before you begin with any contibution.

1. You'll need a GitHub account.
2. Fork the gallerize repository.
3. Pick an issue to work on from the issue list.
4. Implement it.
5. Add your name and email in authors section in pubspec.yaml file. (as soon as pubspec.yaml is set up for it...)
6. Create a pull request.
7. Star this project. ⭐
8. Become a hero!! 🎉