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:
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:
pubspec.yaml
:
dependencies:
gallerize: <current_version>
assets
of pubspec.yaml
:
assets:
- lib/my_fancy_widget.dart
import 'package:gallerize/gallerize.dart';
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:
.github/workflows/deploy_web.yaml
within your project root.deploy_web.yaml
file.example/
subfolder, you are good to go.FOLDER: build/web
.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:
a11y-dark.dart
):
import 'package:flutter_highlight/themes/a11y-dark.dart';
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/
Check out the Purpose of gallerize package before you begin with any contibution.
authors
section in pubspec.yaml
file. (as soon as pubspec.yaml
is set up for it...)