Flutter package for creating Flutter Gallery-like gallery/demo for your package/widget.
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.
gallerize is used by:
- Backdrop package -> See demo here
- HSV Color Pickers package -> See demo here
- Gallerize package itself -> See demo here
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:
- Add dependency to
pubspec.yaml
:
dependencies:
gallerize: <current_version>
- Add all the relevant source files to the
assets
ofpubspec.yaml
:
assets:
- lib/my_fancy_widget.dart
- Import the gallerize package:
import 'package:gallerize/gallerize.dart';
- 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.
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
.
- If you want to build and deploy your project's
- 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!
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
.
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';
- Set the theme in your
GallerizePage
:
GallerizePage(
highlightingTheme: a11yDarkTheme
...
)
The default theme used is draculaTheme
('package:flutter_highlight/themes/dracula.dart'
)
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/
- Multi-screen size support (toggle for fullscreen/mobile view)
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 inpubspec.yaml
file. (as soon aspubspec.yaml
is set up for it...) - Create a pull request.
- Star this project. โญ
- Become a hero!! ๐