A Flutter material theme editor

Overview

Flutter Theme

⚠️ WARNING: This app is still under development so please expect bugs and missing features in the app. ⚠️

Inspired by Panache, a Flutter material theme editor for you to configure the overall visual theme of your material app.

GitHub tag (latest by date) Website GitHub license GitHub Actions style: lint

Flutter Theme Screenshot

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:

  1. Add json_theme as a dependency in your pubspec.yaml file.

    dependencies:
      json_theme: ^2.1.0+2
  2. Copy the generated json file to your app project and place it under the assets/ folder.

  3. Update your pubspec.yaml file to include your asset.

    flutter:
      assets:
        - assets/flutter_theme.json
  4. 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)!;
    }
  5. You can then pass in theme to your MaterialApp 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.

You might also like...

A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.

A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.

Flutter Html Editor - Enhanced Flutter HTML Editor Enhanced is a text editor for Android, iOS, and Web to help write WYSIWYG HTML code with the Summer

Dec 31, 2022

A Flutter based code editor

A Flutter based code editor

rich_code_editor A simple package that supports creating code editors in Flutter. Flutter version supported: Flutter 1.22.5 Getting Started There are

Dec 16, 2022

Rich text editor for Flutter

Rich text editor for Flutter

A rich text editor for Flutter FlutterQuill is a rich text editor and a Quill component for Flutter. This library is a WYSIWYG editor built for the mo

Jan 4, 2023

An online Dart editor with support for console, web, and Flutter apps

An online Dart editor with support for console, web, and Flutter apps

DartPad DartPad is a free, open-source online editor to help developers learn about Dart and Flutter. You can access it at dartpad.dev. What is it? Wh

Jan 4, 2023

An Instagram like text editor Flutter widget that helps you to change your text style.

An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Dec 16, 2022

FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design

FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design

video_editor My other APIs Scroll Navigation Video Viewer Helpers Features Super flexible UI Design. Support actions: Crop Trim Scale Rotate Cover sel

Dec 26, 2022

Umbra - visual editor for shaders in Flutter

Umbra Generated by the Very Good CLI 🤖 Umbra, visual editor for shaders in Flutter. Getting Started 🚀 This project contains 3 flavors: development s

Dec 14, 2022

Rich text editor for Flutter based on Delta format (Quill fork)

Visual Editor Visual Editor is a Rich Text editor for Flutter originally forked from Flutter Quill. The editor is built around the powerful Delta docu

Jan 7, 2023

MathCanvas - Graphical Math Equation Editor made by Flutter

MathCanvas - Graphical Math Equation Editor made by Flutter

Graphical Math Equation Editor made by Flutter. My goal is to provide a keyboard typing experience like a calculator. Test Web Page: https:

Jun 3, 2022
Releases(v0.2.3)
🎨 Flutter Material Theme editor

?? Panache A Flutter Material Theme editor. Panache helps you to create beautiful Material themes for your Flutter applications. Customize widgets col

Erick Ghaumez 1.7k Dec 30, 2022
Panache - 🎨 Flutter Material Theme editor

?? Panache A Flutter Material Theme editor. Panache helps you to create beautiful Material themes for your Flutter applications. Customize widgets col

Erick Ghaumez 1.7k Jan 3, 2023
Json editor - A json editor on flutter

Features Support add comment; Support show errors for invalid json text; Pretty

Chan Young 12 Nov 18, 2022
Flutter App Change Theme With Getx and Save Theme Stage with Hive

Flutter Change app Theme With GetX Flutter App Change Theme With Getx. Theme Stage saved using Hive. instead of hive you can use get-storage or shared

Azraf Al Monzim 12 Oct 22, 2022
Easy Material White Theme

flutter_fast_ui_white Easy Material White Theme Getting Started in pubspec.yaml dependencies: flutter_fast_ui_white: git: url: https://git

Fastriver 3 Apr 11, 2022
Deepak Sharma 149 Dec 10, 2022
A Very Flexible Widget that can Implement Material Sheets on all Directions, both modal and persistent, and consequently a Material Navigation Drawer

Flutter_MaterialSheetAndNavigationDrawer If this project helped you reduce developement time or you just want to help me continue making useful tools

Bryan Cancel 30 Dec 4, 2021
Material io ext - A collection of extensions for creating widgets following material.io guidelines

material_io_ext It is a collection of extensions for creating widgets following

BetterX.io 3 Jan 28, 2022
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)

✨ rich_editor WYSIWYG editor for Flutter with a rich set of supported formatting options. Based on https://github.com/dankito/RichTextEditor, but for

Festus Olusegun 116 Dec 27, 2022
A lightweight HTML-Richtext editor for Flutter

Flutter HTML Editor Flutter HTML Editor is a simple HTML-based Richtext editor, which is able to edit and parse a selected set of HTML tags into a Flu

Herry 14 Oct 19, 2022