Giter Club home page Giter Club logo

add_theme's Introduction

Add Theme

Add Theme is a copy of how Theme works but you could extends it to define your extended Theme.

Example

Define your own ThemeData extending AddThemeData, you have to implement lerpTo, operator ==, and hashCode to make it work properly.

@immutable
class MyThemeData extends AddThemeData {
  const MyThemeData({
    required this.colorA,
    required this.colorB,
    required this.doubleA,
    required this.doubleB,
  });

  final Color colorA;
  final Color colorB;
  final double doubleA;
  final double doubleB;

  @override
  MyThemeData lerpTo(MyThemeData target, double progress) {
    return MyThemeData(
      colorA: lerpColor(colorA, target.colorA, progress)!,
      colorB: lerpColor(colorB, target.colorB, progress)!,
      doubleA: lerpDouble(doubleA, target.doubleA, progress),
      doubleB: lerpDouble(doubleB, target.doubleB, progress),
    );
  }

  @override
  bool operator ==(Object other) {
    if (other is! MyThemeData) return false;

    return other.colorA == colorA &&
        other.colorB == colorB &&
        other.doubleA == doubleA &&
        other.doubleB == doubleB;
  }

  @override
  int get hashCode => Object.hashAll([
        colorA,
        colorB,
        doubleA,
        doubleB,
      ]);
}

Add AddThemeApp, or AddTheme, or AnimatedAddTheme to your MaterialApp builder

return MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: themeMode,
  builder: (context, child) {
    return AddThemeApp<MyThemeData>(
      theme: myLightTheme,
      darkTheme: myDarkTheme,
      child: child!,
    );
  },

Use it like how you get Theme on your Widget

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

  @override
  Widget build(BuildContext context) {
    final myTheme = AddTheme.of<MyThemeData>(context);

    ....
  }
}

optionally you could also extends the AddTheme and add the of method for convenience

class MyTheme extends AddTheme<MyThemeData> {
  const MyTheme({
    Key? key,
    required MyThemeData data,
    required Widget child,
  }) : super(key: key, data: data, child: child);

  static MyThemeData? maybeOf(BuildContext context) =>
      AddTheme.maybeOf<MyThemeData>(context);

  static MyThemeData of(BuildContext context) =>
      AddTheme.of<MyThemeData>(context);
}

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

  @override
  Widget build(BuildContext context) {
    final myTheme = MyTheme.of(context);

    ....
  }
}

and you can make a nested ThemeData for your widget too

@immutable
class RootThemeData extends AddThemeData {
  const RootThemeData({
    required this.color1,
    required this.color2,
    required this.calendarTheme,
  });

  final Color color1;
  final Color color2;
  final CalendarThemeData calendarTheme;

  @override
  RootThemeData lerpTo(RootThemeData target, double progress) {
    return RootThemeData(
      color1: lerpColor(color1, target.color1, progress),
      color2: lerpColor(color2, target.color2, progress),
      calendarTheme: calendarTheme.lerpTo(target.calendarTheme, progress),
    );
  }

  @override
  bool operator ==(Object other) {
    if (other is! RootThemeData) return false;

    return other.color1 == color1 &&
        other.color2 == color2 &&
        other.calendarTheme == calendarTheme;
  }

  @override
  int get hashCode => Object.hashAll([color1, color2, calendarTheme]);
}

@immutable
class CalendarThemeData extends AddThemeData {
  const CalendarThemeData({
    required this.borderColor,
    required this.headerColor,
  });

  final Color borderColor;
  final Color headerColor;

  @override
  CalendarThemeData lerpTo(CalendarThemeData target, double progress) {
    return CalendarThemeData(
      borderColor: lerpColor(borderColor, target.borderColor, progress),
      headerColor: lerpColor(headerColor, target.headerColor, progress),
    );
  }

  @override
  bool operator ==(Object other) {
    if (other is! CalendarThemeData) return false;

    return other.borderColor == borderColor && other.headerColor == headerColor;
  }

  @override
  int get hashCode => Object.hashAll([borderColor, headerColor]);
}

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

  @override
  Widget build(BuildContext context) {
    final rootTheme = AddTheme.maybeOf<RootThemeData>(context);
    final calendarTheme = rootTheme?.calendarTheme ?? _defaultStyle;

    ....
  }

  static const CalendarThemeData _defaultStyle = CalendarThemeData(
    borderColor: Colors.white,
    headerColor: Colors.white10,
  );
}

add_theme's People

Contributors

superpenguin avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.