flutter_custom_theme 0.3.0

Make your own custom theme for custom components. Easily share it between projects and customize.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_custom_theme/flutter_custom_theme.dart';

void main() => runApp(const MyApp());

/// Example application.
class MyApp extends StatefulWidget {
  /// Creates an example application.
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _customThemeOn = false;

  @override
  Widget build(BuildContext context) {
    return CustomThemes(
      data: <CustomThemeData>[
        // Data for the light and the dark mode.
        // If you don't need a different data for the dark mode,
        // you can add `CustomWidgetThemeData` right to the list.
        if (_customThemeOn)
          const CustomThemeDataSet(
            data: CustomWidgetThemeData(
              textStyle: TextStyle(
                fontSize: 20,
                color: Colors.indigo,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
              backgroundColor: Colors.lightBlueAccent,
            ),
            dataDark: CustomWidgetThemeData(
              textStyle: TextStyle(
                fontSize: 20,
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
              backgroundColor: Colors.indigo,
            ),
          ),
      ],
      child: MaterialApp(
        title: 'Flutter Custom Theme Demo',
        theme: ThemeData(colorSchemeSeed: Colors.blue),
        darkTheme: ThemeData.dark(),
        home: MyHomePage(
          value: _customThemeOn,
          onValueChanged: (value) {
            setState(() {
              _customThemeOn = value;
            });
          },
        ),
      ),
    );
  }
}

/// Home page of the example application.
class MyHomePage extends StatelessWidget {
  /// Whether the custom theme is enabled.
  final bool value;

  /// Called when the custom theme is toggled.
  final ValueChanged<bool> onValueChanged;

  /// Creates a home page.
  const MyHomePage({
    required this.value,
    required this.onValueChanged,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom Theme Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Switch(value: value, onChanged: onValueChanged),
                const Text('Custom theme'),
              ],
            ),
            const CustomWidget(),
          ],
        ),
      ),
    );
  }
}

/// Custom widget supported custom themes.
class CustomWidget extends StatelessWidget {
  /// Creates a custom widget.
  const CustomWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = CustomWidgetThemeData.of(context);
    return Container(
      color: theme.backgroundColor,
      padding: const EdgeInsets.all(10),
      child: Text(
        'My custom widget',
        style: theme.textStyle,
        textAlign: theme.textAlign,
      ),
    );
  }
}

/// Theme data for [CustomWidget].
class CustomWidgetThemeData extends CustomThemeData {
  /// Obtains the theme data for [CustomWidget] from the [context].
  ///
  /// If there is no data in the [context],
  /// then the default data will be returned.
  static CustomWidgetThemeData of(BuildContext context) => CustomThemes.safeOf(
    context,
    mainDefault: const CustomWidgetThemeData(),
    darkDefault: const CustomWidgetThemeData.dark(),
  );

  /// Text style of the widget.
  final TextStyle? textStyle;

  /// Text alignment of the widget.
  final TextAlign? textAlign;

  /// Background color of the widget.
  final Color? backgroundColor;

  /// Creates a theme data for [CustomWidget].
  const CustomWidgetThemeData({
    this.textStyle,
    this.textAlign,
    this.backgroundColor,
  });

  /// Creates a theme data for [CustomWidget] for the dark mode.
  const CustomWidgetThemeData.dark({
    this.textStyle,
    this.textAlign,
    this.backgroundColor = Colors.blueGrey,
  });
}