Outlook Logo

Outlook

A package that simplifies the consistent use of colour, shape, typography & iconography throughout an app, to express brand identity with a serializable theme that follows material design guidelines of theme.

Install

$ dart pub add outlook

Use in Flutter


OutlookTheme lightTheme = OutlookTheme(
  id: "sunny_bloom",
  name: 'Sunny Bloom',
  description: "Bright colors for summer season",
  mode: OutlookThemeMode.light,
  colorScheme: OutlookColorScheme.fromSeed(
      seedColor: const OutlookColor(0xffFFFF00),
      brightness: OutlookBrightness.light),
  textScheme: const OutlookTextScheme(
    displayLarge: OutlookTextStyle(
        size: 96,
        weight: OutlookFontWeight.w600,
        style: OutlookFontStyle.normal,
        fontFamily: 'Poppins',
        color: OutlookColor(0xffFFFFFF)
    ),
    //...
  ),
  shapeScheme: const OutlookShapeScheme(
    small: OutlookShape(
        color: OutlookColor(0xff568730),
        borderWidth: 1,
        borderRadius: 2,
        type: OutlookShapeType.rounded),
    //...
  ),
  iconScheme: const OutlookIconScheme(
      filled: OutlookIconFill.outlined,
      weight: OutlookFontWeight.w300,
      color: OutlookColor(0xff458392),
      opacity: 1,
      size: 30),
);

// fully serializable as whole and also all of its components
Map<String, dynamic> storedLightTheme = lightTheme.toMap;
OutlookTheme retrieveLightTheme = storedLightTheme.toOutlookTheme();

void main() {
  runApp(MaterialApp(

    /// comes with adapters for flutter's material (Cupertino,Fluent and Css coming later)
      theme: storedLightTheme.fromMap.toMaterialTheme,
      home: Scaffold(
        //..
      )
  ));
}

Overview

The principles behind outlook are that 1) theming concerns a brands Identity and hence is a business concern, and 2) a simple way of consistently configuring theme with less code allows you to focus on business.

Outlook allows you to define these aspects of theme as data which you can store and then use outlook adapters and widgets to retrieve and use in your app.

In accordance with material design guidelines Outlook must define 4 components of theme.

  • Typography - The material type-scale with 13 styles. (type system).
  • Colour - Material color-scheme with 13 colours for different uses (color-scheme).
  • Iconography - Define the types of icons you use (dual-tone,solid,regular,light,then,outlined), color & size
  • Shape - Material shape-scheme defining style for the 3 categories of shape (small,medium and large) .See shape Scheme
  • Imagery - Images are not just used as content , some images such as backgrounds,wallpapers, default avatars are there to only convey brand identity.

Vision

Outlooks vision is to make defining and styling you app as simple as defining one simple class, a theme that works across different design languages, material,cupertino,fluent and even CSS.

Version 0.0.0-dev.3

This version only contains a little of outlook,it now only contains adaptation to material in flutter,and what you can do now is

  • X Set a ColorScheme either from a seed color(if using material 3) or custom one
  • X Define shape for the 3 categories of components using ShapeScheme
  • X Set type system using TextScheme
  • X Access to preset Icons , solid,light and can define iconography using IconScheme
  • X Customizable usecase(service) to get,update,create and delete theme.
  • X Serialize entire theme to json and bring back without losing equality
  • X Adapters to transform OutlookTheme to material theme data.

Note

Use adapters in framework layer only to avoid business logic depending on framework-specific material package. That's the point of this package.

Libraries

outlook
The consistent use of colour, shape, typography & iconography throughout an app. Express brand identity with a serializable theme that follows material design guidelines of theme.