A Flutter material theme editor
Flutter Theme
Inspired by Panache, a Flutter material theme editor for you to configure the overall visual theme of your material app.
Usage
Flutter Theme is developed and built with Flutter, and is available for both Web and Desktop.
Disclaimer: I've only tested the app on Web and MacOS as I don't have a Windows or Linux machine. The app may not work on those platforms.
For Web, you can access it through here.
For Mac, Windows and Linux, you can be download it from here.
Using the Generated Theme
Flutter Theme allows you to export your generated theme as a json
file using json_theme. To use this theme in your app, follow the steps below:
-
Add
json_theme
as a dependency in yourpubspec.yaml
file.dependencies: json_theme: ^2.1.0+2
-
Copy the generated
json
file to your app project and place it under theassets/
folder. -
Update your
pubspec.yaml
file to include your asset.flutter: assets: - assets/flutter_theme.json
-
Update your
main
function to load your theme.void main() async { WidgetsFlutterBinding.ensureInitialized(); final themeStr = await rootBundle.loadString('assets/flutter_theme.json'); final themeJson = jsonDecode(themeStr); final theme = ThemeDecoder.decodeThemeData(themeJson)!; }
-
You can then pass in
theme
to yourMaterialApp
widget to use it.MaterialApp( theme: theme, title: 'Flutter Theme', home: HomePage(), );
For a complete example app using the generated json
theme file, see the app under the example/
folder.