zeshuaro/appainter

A material theme editor and generator for Flutter to configure and preview the overall visual theme of your material app.

A material theme editor and generator for Flutter to configure and preview the overall visual theme of your material app.

Usage

Appainter is developed and built with Flutter, and is available for both Web and Desktop.

For Web, you can access it through here.

For Mac, Windows and Linux, you can be download it from here.

Using the Generated Theme

See USAGE.md for instructions on how to use the generated theme.

Development

Fork and clone the repository, then install the dependencies:

flutter pub get

Run the following to launch the code generation:

flutter pub run build_runner build --delete-conflicting-outputs

Start the app:

flutter run

appainter's Issues

[BUG] Setting Brightness appears to reset the settings

Platform

Web

Steps to Reproduce

1. Open app, notice Brightness setting
2. Set Seed colour to anything, notice state updates
3. Change Brightness setting
4. Notice settings are reset to default colours (seed color stays the same)
5. Change Brightness setting back to the original setting
6. Notice settings are reset to default colours (seed color stays the same)

Expected behaviour

Seed color changes should persist between brightness settings

Actual behaviour

Seed color changes do not persist between brightness settings, and appear to reset to default colors

Additional Context

No response

[FEATURE] Add more theming options for AppBarTheme

What kind of feature are you missing?

Add support for the following properties in AppBarTheme:

• actionsIconTheme
• iconTheme
• titleTextStyle
• toolbarTextStyle

Additional context

https://api.flutter.dev/flutter/material/AppBarTheme-class.html

[FEATURE] Add support for ChipTheme

What kind of feature are you missing?

• Add editor for editing properties in ChipTheme
• Update preview app to show a Chip

Additional context

• https://api.flutter.dev/flutter/material/ChipThemeData-class.html
• https://api.flutter.dev/flutter/material/Chip-class.html

[FEATURE] Add support for BottomAppBarTheme

What kind of feature are you missing?

• Add editor for editing the properties in BottomAppBarTheme
• Update preview app to show a BottomAppBar

Additional context

• https://api.flutter.dev/flutter/material/BottomAppBarTheme-class.html
• https://api.flutter.dev/flutter/material/BottomAppBar-class.html

[FEATURE] Input Border

What kind of feature are you missing?

Hi. Thank you for your work! Pls add support for outline input border to input decoration

Additional context

Package your app with flutter_distributor.

What kind of feature are you missing?

flutter_distributor It is a packaging and publishing tool specially developed for flutter. Can it be used for packaging in this project?

Additional context

No response

[FEATURE] Add support for ToggleButtonsTheme

What kind of feature are you missing?

• Add editor for editing the properties in ToggleButtonsTheme
• Update preview app to show a ToggleButtons

Additional context

• https://api.flutter.dev/flutter/material/ToggleButtonsThemeData-class.html
• https://api.flutter.dev/flutter/material/ToggleButtons-class.html

[FEATURE] Add more theming options for OutlinedButtonTheme

What kind of feature are you missing?

Add support for the following properties in OutlinedButtonTheme:

• shape
• side
• textStyle

Additional context

https://api.flutter.dev/flutter/material/ButtonStyle-class.html

[FEATURE] Export as dart code

What kind of feature are you missing?

Have option to exporting as dart code or json, thanks you!

Additional context

No response

Is it possible to directly export `dart` code? This can reduce one dependency (json_theme).

An additional dependency will increase the size of the APP,
Wish to add an option to export dart code

Extended colors

What kind of feature are you missing?

Adding extended colors to the themes colorscheme.
A feature like https://material-foundation.github.io/material-theme-builder/#/custom

Additional context

No response

[FEATURE] Add warning when an action will reset the theming options

What kind of feature are you missing?

It will be great if there is some kind of warning message/an alert dialog, when an action will reset the theming options. We should add this warning for the following options:

• Changing the theme brightness
• Randomising the theme
• Resetting theme

Additional context

Related issue: #342

[FEATURE] Add support for NavigationBarTheme

What kind of feature are you missing?

• Add editor for editing the properties in NavigationBarTheme
• Update preview app to show a NavigationBar

Additional context

• https://api.flutter.dev/flutter/material/NavigationBarThemeData-class.html
• https://api.flutter.dev/flutter/material/NavigationBar-class.html

[FEATURE] Add support for NavigationRailTheme

What kind of feature are you missing?

• Add editor for editing the properties in NavigationRailTheme
• Update preview app to show a NavigationRail

Additional context

• https://api.flutter.dev/flutter/material/NavigationRailThemeData-class.html
• https://api.flutter.dev/flutter/material/NavigationRail-class.html

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency build_runner to v2.4.11
• chore(deps): lock file maintenance

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• fix(deps): update dependency firebase_core to v3

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update dependency mocktail to v1.0.4
• fix(deps): update dependency device_preview_plus to v2.0.1
• fix(deps): update dependency file_picker to v8.0.5
• fix(deps): update dependency flutter_bloc to v8.1.6
• fix(deps): update dependency flutter_markdown to v0.7.2

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency firebase_analytics to v11
• fix(deps): update dependency firebase_auth to v5

Detected dependencies

fvm

.fvm/fvm_config.json

• flutter 3.22.2

github-actions

.github/workflows/appainter-annotations.yml

• actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
• dart-lang/setup-dart v1.4
• actions/cache v4

.github/workflows/appainter-builder.yml

• actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
• dart-lang/setup-dart v1.4
• actions/cache v4
• codecov/codecov-action v4.4.1
• actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
• dart-lang/setup-dart v1.4
• actions/cache v4

.github/workflows/example-app.yml

• actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
• kuhnroyal/flutter-fvm-config-action v1.2.0
• subosito/flutter-action v2.16.0
• actions/cache v4
• mikehardy/buildcache-action v2.1.0
• futureware-tech/simulator-action v3
• actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
• kuhnroyal/flutter-fvm-config-action v1.2.0
• subosito/flutter-action v2.16.0
• actions/cache v4

.github/workflows/fvm-notifier.yml

• peter-evans/create-or-update-comment v4.0.0

.github/workflows/github-actions.yml

• actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
• kuhnroyal/flutter-fvm-config-action v1.2.0
• subosito/flutter-action v2.16.0
• actions/cache v4
• codecov/codecov-action v4.4.1
• actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
• kuhnroyal/flutter-fvm-config-action v1.2.0
• subosito/flutter-action v2.16.0
• nanasess/setup-chromedriver v2.2.2
• actions/cache v4
• actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
• kuhnroyal/flutter-fvm-config-action v1.2.0
• subosito/flutter-action v2.16.0
• actions/cache v4
• actions/checkout v4
• kuhnroyal/flutter-fvm-config-action v1.2.0
• subosito/flutter-action v2.16.0
• actions/cache v4
• actions/setup-node v4
• actions/upload-artifact v4
• actions/checkout v4
• actions/download-artifact v4
• actions/setup-node v4

.github/workflows/post-dependency-update.yml

• tibdex/github-app-token v2.1.0
• actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
• kuhnroyal/flutter-fvm-config-action v1.2.0
• subosito/flutter-action v2.16.0
• actions/cache v4
• stefanzweifel/git-auto-commit-action v5.0.1

.github/workflows/pull-request-target.yml

• zeshuaro/github-actions-workflows cc09c793e11660453ce250a606d15369dd61f5fb

.github/workflows/pull-request.yml

• zeshuaro/github-actions-workflows cc09c793e11660453ce250a606d15369dd61f5fb

.github/workflows/scheduled.yml

• zeshuaro/github-actions-workflows cc09c793e11660453ce250a606d15369dd61f5fb

npm

package.json

• @qiwi/semantic-release-gh-pages-plugin 5.2.12
• @semantic-release/changelog 6.0.3
• @semantic-release/exec 6.0.3
• @semantic-release/git 10.0.1
• conventional-changelog-conventionalcommits 8.0.0
• semantic-release 24.0.0
• semantic-release-pub 0.8.16
• semantic-release-stop-before-publish 1.0.0

nvm

.nvmrc

• node 20.14.0

pub

example/pubspec.yaml

• cupertino_icons 1.0.8
• flutter
• json_theme 6.5.0+1
• flutter_lints 4.0.0
• integration_test

packages/annotations/pubspec.yaml

• flutter_lints ^4.0.0

packages/builder/pubspec.yaml

• analyzer ^6.0.0
• build ^2.2.1
• html ^0.15.0
• http ^1.0.0
• source_gen ^1.2.1
• textwrap ^2.0.0
• build_runner ^2.1.8
• build_test ^2.1.5
• coverage ^1.2.0
• flutter_lints ^4.0.0
• mocktail ^1.0.0
• test ^1.20.2

pubspec.yaml

• bloc 8.1.4
• copy_with_extension 5.0.4
• cupertino_icons 1.0.8
• device_preview_plus 2.0.0
• dio 5.4.3
• dropdown_search 5.0.6
• enum_to_string 2.0.1
• equatable 2.0.5
• expandable 5.0.1
• file_picker 8.0.3
• firebase_analytics 10.10.7
• firebase_auth 4.20.0
• firebase_core 2.32.0
• flex_color_picker 3.5.0
• flutter
• flutter_bloc 8.1.5
• flutter_markdown 0.7.1
• google_fonts 6.2.1
• intl 0.19.0
• json_theme 6.5.0+1
• material_design_icons_flutter 7.0.7296
• ndialog 4.3.1
• path_provider 2.1.3
• pretty_json 2.0.0
• random_color_scheme 0.1.4
• sentry_flutter 8.2.0
• shared_preferences 2.2.3
• universal_html 2.2.4
• universal_io 2.2.2
• url_launcher 6.3.0
• window_manager 0.3.9
• bloc_test 9.1.7
• build_runner 2.4.10
• copy_with_extension_gen 5.0.4
• flutter_lints 4.0.0
• integration_test
• mocktail 1.0.3
• path_provider_platform_interface 2.1.2
• remove_from_coverage 2.0.0
• sentry_dart_plugin 2.0.0
• flutter 3.22.2

---

• Check this box to trigger a request for Renovate to run again on this repository

[FEATURE] Add support for TooltipTheme

What kind of feature are you missing?

• Add editor for editing the properties in TooltipTheme
• Update preview app to show a Tooltip

Additional context

• https://api.flutter.dev/flutter/material/TooltipThemeData-class.html
• https://api.flutter.dev/flutter/material/Tooltip-class.html

[FEATURE] Add support for DataTableTheme

What kind of feature are you missing?

• Add editor for editing the properties in DataTableTheme
• Update preview app to show a DataTable

Additional context

• https://api.flutter.dev/flutter/material/DataTableThemeData-class.html
• https://api.flutter.dev/flutter/material/DataTable-class.html

[FEATURE] Add an option to set a global font

What kind of feature are you missing?

Thank you for this nice package.

To my mind, it would be very nice if one can set a global font.
Right now one has to change all entries from "Segoe UI" which is kind of annoying. It also seems like it has no effect to remove all FontFamily-entries.

Additional context

No response

[BUG] Export button does nothing

Steps To Reproduce

1. Launch Flutter_theme on windows 10 x64
2. modify the theme
3. Click the export button

Expected Behavior

json output should be created

Actual behaviour

nothing happens

[FEATURE] Add support for SnackBarTheme

What kind of feature are you missing?

• Add editor for editing the properties in SnackBarTheme
• Update preview app to show a SnackBar

Additional context

• https://api.flutter.dev/flutter/material/SnackBarThemeData-class.html
• https://api.flutter.dev/flutter/material/SnackBar-class.html

[FEATURE] Add support for DialogTheme

What kind of feature are you missing?

• Add editor for editing the properties in DialogTheme
• Update preview app to show a Dialog

Additional context

• https://api.flutter.dev/flutter/material/DialogTheme-class.html
• https://api.flutter.dev/flutter/material/Dialog-class.html

[BUG] DropdownButton stays highlighted after selecting an option and/or closing the dropdown

Platform

All platforms

Steps to Reproduce

1. Select any dropdown
2. Select an option or simply close the dropdown

Expected behaviour

The dropdown should not remain being highlighted

Actual behaviour

The dropdown remains highlighted

Additional Context

Related to this issue on Flutter flutter/flutter#94605

[FEATURE] Add support for PopupMenuTheme

What kind of feature are you missing?

• Add editor for editing the properties in PopupMenuTheme
• Update preview app to show a PopupMenuItem

Additional context

• https://api.flutter.dev/flutter/material/PopupMenuThemeData-class.html
• https://api.flutter.dev/flutter/material/PopupMenuItem-class.html

[FEATURE] Add support for ScrollbarTheme

What kind of feature are you missing?

• Add editor for editing the properties in ScrollbarTheme
• Update preview app to show a Scrollbar

Additional context

• https://api.flutter.dev/flutter/material/ScrollbarThemeData-class.html
• https://api.flutter.dev/flutter/material/Scrollbar-class.html

[BUG] No secondary color configuration in advanced mode

Platform

All platforms

Steps to Reproduce

As title says

Expected behaviour

To be able to configure secondary color in advance mode

Actual behaviour

Cannot configure secondary color in advance mode

Additional Context

none

[FEATURE] Add more theming options for TextButtonTheme

What kind of feature are you missing?

Add support for the following properties in TextButtonTheme:

• shape
• side
• textStyle

Additional context

https://api.flutter.dev/flutter/material/ButtonStyle-class.html

[FEATURE] Add support for TextSelectionTheme

What kind of feature are you missing?

Add editor for editing the properties in TextSelectionTheme

Additional context

https://api.flutter.dev/flutter/material/TextSelectionThemeData-class.html

[FEATURE] Add support for ListTileTheme

What kind of feature are you missing?

• Add editor for editing properties in ListTileTheme
• Update preview app to show a ListTile

Additional context

• https://api.flutter.dev/flutter/material/ListTileThemeData-class.html
• https://api.flutter.dev/flutter/material/ListTile-class.html

[BUG] Advanced theme export does not output correct ColorScheme

Platform

Web

Steps to Reproduce

1. Go to appainter.dev
2. Go to advance and edit
3. Press export

Expected behaviour

Export advanced configured theme as appainter_theme.json

Actual behaviour

export basic theme

Additional Context

No context

[FEATURE] Add more options for customising input border

What kind of feature are you missing?

Currently we can only select between outline and underline input border, but there are more options for customising it such at setting the border side. Appainter should add these options when customising the input border

Additional context

• InputBorder
• UnderlineInputBorder
• OutlineInputBorder

[FEATURE] Add support for BottomSheetTheme

What kind of feature are you missing?

• Add editor for editing the properties in BottomSheetTheme
• Update preview app to show a BottomSheet

Additional context

• https://api.flutter.dev/flutter/material/BottomSheetThemeData-class.html
• https://api.flutter.dev/flutter/material/BottomSheet-class.html

[FEATURE] Add search box to search for fonts

What kind of feature are you missing?

When selecting the font, we have to scroll through the long list to look for a specific font. There should be a search box to easily search and filter for fonts.

Additional context

No response

[BUG] Change theme to dark

Platform

Web

Steps to Reproduce

1. Open https://zeshuaro.github.io/flutter_theme in Chrome
2. Аctivate dark theme

Expected behaviour

The theme should be changed

Actual behaviour

The theme not changed

Additional Context

Screenshots

[BUG] Negative values cannot be entered for letter spacing.

Platform

MacOS

Steps to Reproduce

1. Try typing -1.5 for Advanced > Body Text 1 > Letter Spacing
2. Observe that - character won't print.

Expected behaviour

- character prints.

Actual behaviour

- character won't print.

Additional Context

No response

[BUG] Decoding using flutter_theme throws cast error

Platform

MacOS / Flutter 2.5.3

Steps To Reproduce

1. Clone the example flutter project and start it in debug mode
2. Enable catching uncaught exceptions in VS Code

Expected Behavior

The theme should be decoded without throwing an exception.

Actual behaviour
The application waits when decoding the theme and throws an Cast Error exception:
"Null check operator used on a null value"

Screenshots

Additional Context

Add any other context about the problem here.

Input decoration theme UI is not working

Platform

Web

Steps To Reproduce

1. Open link https://zeshuaro.github.io/flutter_theme/#/
2. Go to advanced tab
3. Change input decoration theme UI

Expected Behavior
All reflected both in theme config UI as well as preview UI

Actual behavior

Nothing got reflected and no impact on changed theme in preview UI of inputs

Question: Is there a plugin for Intellij that will show the colours in the gutter?

Wondering if anyone using this tool can suggest an extension to make it easy to visualise the ARGB colours in intellij?

[FEATURE] Add support for BannerTheme

What kind of feature are you missing?

• Add editor for editing the properties in BannerTheme
• Update preview app to show a MaterialBanner

Additional context

• https://api.flutter.dev/flutter/material/MaterialBannerThemeData-class.html
• https://api.flutter.dev/flutter/material/MaterialBanner-class.html

[FEATURE] Add tooltips to explain what each theming option does

What kind of feature are you missing?

Sometimes it's not clear the effect of the theming options in advanced mode without trying it out. It would be helpful if there's tooltips explaining the effect of each option.

Additional context

Might be tricky to manually add all tooltips, potentially creating a simple script to scrape through the documentation and output this info as a json file. So that the app can load this in and show the tooltips.

[BUG] Example app throws exception when decoding theme data

Platform

N/A

Steps To Reproduce

Run the example project on VSCode with "Uncaught Exceptions" turned on

Expected Behavior

No exceptions should be thrown

Actual behaviour

An exception was thrown in ThemeDecoder.decodeThemeData(themeJson)

_CastError (Null check operator used on a null value)

Screenshots

N/A

Additional Context

N/A

[BUG] Slider Hint not showing

Platform

Web

Steps to Reproduce

1. Open https://appainter.dev/#/
2. Tab -> Selections -> Sliders
3. The second slider, when clicked, does not show the hint

Not yet tested on other platforms.

Expected behaviour

Show hint.

Actual behaviour

Additional Context

No response

[FEATURE] Add support for TimePickerTheme

What kind of feature are you missing?

Add editor for editing the properties in TimePickerTheme

Additional context

https://api.flutter.dev/flutter/material/TimePickerThemeData-class.html

[FEATURE] Update to support Material Design 3

What kind of feature are you missing?

Flutter 2.10.0 added Material Design 3 support, Appainter should update to support it

Additional context

https://m3.material.io/

[FEATURE] Add support for CardTheme

What kind of feature are you missing?

• Add editor for editing properties in CardTheme
• Update preview app to show a Card

Additional context

• https://api.flutter.dev/flutter/material/CardTheme-class.html
• https://api.flutter.dev/flutter/material/Card-class.html

[FEATURE] Add support for DividerTheme

What kind of feature are you missing?

Add editor for editing the properties in DividerTheme

Additional context

https://api.flutter.dev/flutter/material/DividerThemeData-class.html

[Docs Update?] USAGE.md doesn't appear to be up to date

Hey all - I'm very new to this world, so there is a good chance I'm missing something obvious, but I'm struggling to get my theme added to a new flutter app.

The docs say to do this:

  final themeStr = await rootBundle.loadString('assets/appainter_theme.json');
  final themeJson = jsonDecode(themeStr);
  final theme = ThemeDecoder.decodeThemeData(themeJson)!;

But from what I can tell from Undefined name 'rootBundle'., there's some magic missing here. Furthermore, the scaffold you get for a new project results in this:

void main() {
  runApp(const MyApp());
}

runApp has the call to ensureInitialized that you mention in the docs; I obviously can't go deep into that function and change it and re-writing runApp feels wrong to me.

Am I missing something obvious for how to integrate this? Amazing project you have here - can't wait to see it in action!

[FEATURE] Add support for ProgressIndicatorTheme

What kind of feature are you missing?

• Add editor for editing the properties in ProgressIndicatorTheme
• Update preview app to show a ProgressIndicator

Additional context

• https://api.flutter.dev/flutter/material/ProgressIndicatorThemeData-class.html
• https://api.flutter.dev/flutter/material/ProgressIndicator-class.html

[BUG] Scrolling the font picker hangs the app

Platform

Web

Steps to Reproduce

1. Open up font picker under "Text Theme"
2. Try to scroll all the way to the bottom

Expected behaviour

The app should allow scrolling all the way to the bottom and pick fonts from there

Actual behaviour

The app hangs indefinitely after scrolling

Additional Context

#269 can potentially solve this

[FEATURE] Add more theming options for BottomNavigationBarTheme

What kind of feature are you missing?

Add to support the following properties in BottomNavigationBarTheme:

• selectedIconTheme
• selectedLabelStyle
• unselectedIconTheme
• unselectedLabelStyle

Additional context

https://api.flutter.dev/flutter/material/BottomNavigationBarThemeData-class.html

[FEATURE] Add more theming options for ElevatedButtonTheme

What kind of feature are you missing?

Add support for the following properties in ElevatedButtonTheme:

• shape
• side
• textStyle

Additional context

https://api.flutter.dev/flutter/material/ButtonStyle-class.html