gallerize

Description:

gallerize

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!"),
),
);
}
}
copied to clipboard
Using gallerize you can easily create an app that looks as follows:



How to use it? #

Add dependency to pubspec.yaml:

dependencies:
gallerize: <current_version>
copied to clipboard

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

assets:
- lib/my_fancy_widget.dart
copied to clipboard

Import the gallerize package:

import 'package:gallerize/gallerize.dart';
copied to clipboard

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()),
)
copied to clipboard
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:

Set up Flutter for web and check that your project runs fine on web locally.
Set up GitHub action by creating a file .github/workflows/deploy_web.yaml within your project root.
Get the code from this gist and paste it into your deploy_web.yaml file.
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.


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,
)
copied to clipboard
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:

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

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

Set the theme in your GallerizePage:

GallerizePage(
highlightingTheme: a11yDarkTheme
...
)
copied to clipboard
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:
[](<URL_TO_YOUR_GALLERY_PAGE>)
copied to clipboard
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.

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