Easy Material White Theme

Overview

flutter_fast_ui_white

Easy Material White Theme

Getting Started

in pubspec.yaml

dependencies:
  flutter_fast_ui_white:
    git:
      url: https://github.com/organic-nailer/flutter_fast_ui_white
      ref: v0.2
void main() {
	initializeDateFormatting("ja_JP");
	runApp(const MyApp());
}

class MyApp extends StatelessWidget {
	const MyApp({Key? key}) : super(key: key);

	@override
	Widget build(BuildContext context) {
		return FastThemeScope(
			accentColor: Colors.green,
			themeMode: ThemeMode.system,
			builder: (context, lightTheme, darkTheme, mode) {
				return MaterialApp(
					title: 'Fast White Theme',
					theme: lightTheme,
					darkTheme: darkTheme,
					themeMode: mode,
					home: SampleListPage(),
				);
			});
	}
}

v0.1(old version)

void main() {
  runApp(FastTheme(
    accentColor: Colors.pink,
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: FastTheme.of(context).theme,
      home: SampleListPage(),
    );
  }
}

Specific Widget

  • FastAppBar
  • FastTextField

テーマの変更

change Theme (light <-> dark)

FastTheme.of(context).changeTheme(Brightness brightness);

change Accent Color

FastTheme.of(context).changeAccent(MaterialColor color);

カスタムカラーの設定(>= v0.3)

テーマ変更に対応した独自のカラーを設定可能

1.abstract class CustomColorsを継承したclassを作成

class MyCustomColors extends CustomColors<MyColors> {
  final MaterialColor _accent;
  MyCustomColors(this._accent)
      : super({
          MyColors.paleBackground: SwitchableColor(
              light: _accent.shade200, dark: _accent.shade800.withAlpha(50)),
          MyColors.paleNonColoredBackground:
              SwitchableColor(light: Color(0xFFEBEBEB), dark: Color(0xFF1F1F1F))
        });
}

enum MyColors { paleNonColoredBackground, paleBackground }

2.FastThemeScopeに追加

FastThemeScope(
...
  customColors: MyCustomColors(Colors.green),
...
);

3.FastTheme.of(context)からアクセス

FastTheme.of(context).getCustomColor<MyColors>(MyColors.paleBackground);
You might also like...

Responsive Blog Theme using Flutter | Web, macOS, Android, iOS

 Responsive Blog Theme using Flutter | Web, macOS, Android, iOS

Responsive Blog Theme using Flutter | Web, macOS, Android, iOS Watch it on YouTube Packages we are using: flutter_svg: link get: link Flutter recently

Dec 9, 2022

XDG theme icons for Flutter

XDG theme icons for Flutter

XDG Icons XDG theme icons for Flutter. https://specifications.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html TODO api cleanup docs intern

Jul 12, 2022

Quickly configure three theme styles

flytheme 快速实现三种主题效果。 本插件是从矿小助App中拆分出来的,优化了很多细节,更加简单易用。 内置持久化存储(使用share_preference实现) 矿小助App:https://kxz.atcumt.com/ pub插件地址:https://pub.dev/packages/f

Aug 2, 2022

Flutter theme demo using riverpod and shared preferences

flutter_theme_demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Dec 27, 2021

Easiest way to add support for light and dark theme in your flutter app.

Easiest way to add support for light and dark theme in your flutter app.

Adaptive Theme Easiest way to add support for light and dark theme in your Flutter app. It allows to manually set light or dark theme and also lets yo

Dec 27, 2022

Chat Messaging App Light and Dark Theme

Chat Messaging App Light and Dark Theme

Chat/Messaging App Light and Dark Theme - Flutter UI Watch it on YouTube Complete Source Code (Patreon only) Packages we are using: goole_fonts: link

Jan 6, 2023

A Flutter package of datepicker like Holo Theme in Android

A Flutter package of datepicker like Holo Theme in Android

flutter_holo_date_picker A Flutter package of Datepicker inspired by the Holo Theme in Android. Getting Started This plugins displays a Datepicker ins

Nov 28, 2022

Extended theme - Extended themes for Flutter

Extended Theme This package will allow you to extend theming in Flutter so you c

Apr 21, 2022

Choose color theme template - A template will help you choose a color scheme for the application, show how widgets interact with it

Choose color theme template - A template will help you choose a color scheme for the application, show how widgets interact with it

choose_color_theme_template This template will help you choose a color scheme fo

Oct 24, 2022
Releases(v0.3)
Serene is a white noise app developed with Flutter. It helps you meditate, sleep better, focus, relax and be calm.

Serene - Relax, Meditate and Sleep A white noise app developed with Flutter. It helps you meditate, sleep better, focus, relax and be calm. Screenshot

Vipul Asri 89 Dec 6, 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
A Flutter material theme editor

Flutter Theme ⚠️ WARNING: This app is still under development so please expect bugs and missing features in the app. ⚠️ Inspired by Panache, a Flutter

null 0 Jan 2, 2022
🎨 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
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
ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX is an easy theme manipulation basied on Material Design. Only inform primary color and the ThemeX generate all color combination palette for yo

Michael S. Lopes 2 Jan 31, 2022
A flutter widget to indicate loading progress. Easy to use, easy to extend

?? ?? ?? A flutter widget to indicate loading progress. Easy to use, easy to extend

Manuel Duarte 2 May 30, 2022