flex_color_scheme 1.0.0-dev.2
flex_color_scheme: ^1.0.0-dev.2 copied to clipboard
A Flutter package to make and use beautiful color scheme based MaterialApp themes.
// NOTE:
// If you clone the repo to build the samples, then open the project example
// folder in your IDE to build this sample.
// If you want to build all the other examples one by one without setting
// up different configurations in you IDE for the different main files. You can
// also just copy paste in each sample's code below and build it. Just fix the
// relative import of the all the shared imports to:
// import 'all_shared_imports.dart';
// -----------------------------------------------------------------------------
import 'package:flex_color_scheme/flex_color_scheme.dart';
import 'package:flutter/material.dart';
import 'all_shared_imports.dart';
// -----------------------------------------------------------------------------
// EXAMPLE 1)
//
// This example shows how you can use a selected predefined color scheme in
// FlexColorScheme to define light and dark themes using the scheme
// and then switch between the light and dark mode.
// A theme showcase widget shows the theme with several common Material widgets.
// -----------------------------------------------------------------------------
void main() => runApp(const DemoApp());
class DemoApp extends StatefulWidget {
const DemoApp({Key key}) : super(key: key);
@override
_DemoAppState createState() => _DemoAppState();
}
class _DemoAppState extends State<DemoApp> {
// Used to select if we use the dark or light theme.
ThemeMode themeMode;
@override
void initState() {
themeMode = ThemeMode.light;
super.initState();
}
@override
Widget build(BuildContext context) {
// Select the predefined flex scheme to use. Feel free to modify the used
// FlexScheme enum value below to try other built-in color schemes.
const FlexScheme usedFlexScheme = FlexScheme.mandyRed;
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'FlexColorScheme',
// Use a predefined light theme for the app and call .toTheme method
// to create the slightly opinionated theme from the defined color scheme.
theme:
FlexColorScheme.light(colors: FlexColor.schemes[usedFlexScheme].light)
.toTheme,
// We do the exact same definition for the dark theme, but using
// FlexColorScheme.dark factory and the dark FlexSchemeColor in
// FlexColor.schemes.
darkTheme:
FlexColorScheme.dark(colors: FlexColor.schemes[usedFlexScheme].dark)
.toTheme,
// Use the above dark or light theme based on active themeMode.
themeMode: themeMode,
// This simple example app has only one page.
home: HomePage(
// We pass it the current theme mode.
themeMode: themeMode,
// On the home page we can toggle theme mode between light and dark.
onThemeModeChanged: (ThemeMode mode) {
setState(() {
themeMode = mode;
});
},
// Pass in the FlexSchemeData we used for the active theme. Not really
// needed to use FlexColorScheme, but we will use it to show the
// active theme's name, descriptions and colors in the demo.
// We also use it for the theme mode switch that shows the theme's
// color's in the different theme modes.
flexSchemeData: FlexColor.schemes[usedFlexScheme],
),
);
}
}
// The content of the HomePage below is not relevant for using FlexColorScheme
// based application theming. The critical parts are in the above MaterialApp
// theme definitions. The HomePage just contains UI to visually show what the
// defined example looks like in an application and with commonly used Widgets.
class HomePage extends StatelessWidget {
const HomePage({
Key key,
@required this.themeMode,
@required this.onThemeModeChanged,
@required this.flexSchemeData,
}) : super(key: key);
final ThemeMode themeMode;
final ValueChanged<ThemeMode> onThemeModeChanged;
final FlexSchemeData flexSchemeData;
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final TextTheme textTheme = theme.textTheme;
final TextStyle headline4 = textTheme.headline4;
return Scaffold(
appBar: AppBar(
title: const Text('FlexColorScheme Example 1'),
elevation: 0,
actions: const <Widget>[AboutIconButton()],
),
body: PageBody(
child: ListView(
padding: const EdgeInsets.all(AppConst.edgePadding),
children: <Widget>[
Text('Theme', style: headline4),
const Text(
'This example shows how you can use a selected '
'predefined color scheme in FlexColorScheme to define '
'light and dark themes using the scheme and switch between '
'the light and dark mode. '
'A theme showcase widget shows the theme with several '
'common Material widgets.',
),
// A 3-way theme mode toggle switch.
Padding(
padding:
const EdgeInsets.symmetric(vertical: AppConst.edgePadding),
child: FlexThemeModeSwitch(
themeMode: themeMode,
onThemeModeChanged: onThemeModeChanged,
flexSchemeData: flexSchemeData,
),
),
const Divider(),
// Show theme name and description.
ListTile(
title: Text('${flexSchemeData.name} theme'),
subtitle: Text(flexSchemeData.description),
),
// Show all key active theme colors.
const Padding(
padding: EdgeInsets.symmetric(horizontal: AppConst.edgePadding),
child: ShowThemeColors(),
),
const Divider(),
Text('Theme Showcase', style: headline4),
const ThemeShowcase(),
],
),
),
);
}
}