Flutter themes consistent with GitHub's Primer style guidelines

Overview

primer_flutter

Flutter themes consistent with Primer style guidelines

DISCLAIMER: This project is not affiliated with the Primer or GitHub organizations.

Features

PrimerThemeData class which provides Brightness-aware colors and text styles to your app

PrimerTheme InheritedWidget which provides the PrimerThemeData to descendant widgets

PrimerApp convenience widget that provides pre-configured, Brightness-aware Primer theme configurations.

Installation Options

  1. From pub.dev:
$ flutter pub add primer_flutter
  1. From Git:
primer:
  git: https://github.com/GroovinChip/primer_flutter.git

Quick Start

  1. Wrap your app with a PrimerApp widget using your "root" widget's builder property and give it the brightness of the parent widget's theme. Make sure to set the theme and darkTheme properties of the root widget so that the brightness can be retrieved via .of(context) call.
// Use MaterialApp or other "app" root widget that has a builder property 
// (e.g. CupertinoApp, MacosApp, etc.)
MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  // By using ThemeMode.system, we ensure that the correct theme will be shown
  // based on the user's system theme.
  themeMode: ThemeMode.system,
  builder: (context, child) => PrimerApp(
    parentBrightness: Theme.of(context).brightness,
    child: child!,
  ),
  home: MyHomePage(),
),
  1. Access the theme's colors and text styles by calling PrimerTheme.of(context). Here's a small example:
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final primerTheme = PrimerTheme.of(context);
    return Scaffold(
      backgroundColor: primerTheme.canvas.dflt,
      body: Center(
        child: Text(
          'Hello, world!',
          style: primerTheme.typography.h1,
        ),
      ),
    );
  }
}
You might also like...

A Flutter package to make and use beautiful color scheme based themes.

A Flutter package to make and use beautiful color scheme based themes.

FlexColorScheme Use FlexColorScheme to make beautiful color scheme based Flutter themes, with optional primary color surface blends. The themes are ba

Jan 1, 2023

A Package to implement, change and use Themes in Flutter

Modern Themes Github: https://github.com/Jules-Media/Modern_Themes Pub.dev: https://pub.dev/packages/modern_themes About With this Plugin you can impl

Jun 22, 2022

This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.

This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.

Kitten Tricks This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support. It’s completely free

Dec 30, 2022

Experiment with dark themes based on popular apps.

Experiment with dark themes based on popular apps.

Fast Dark Theme This project is a Flutter web experiment. It allows you to prototype dark mode colors based on popular apps: WhatsApp, Twitter and Sha

Dec 10, 2021

A set of utilities, themes and components for RTU MIREA applications by Mirea Ninja.

A set of utilities, themes and components for RTU MIREA applications by Mirea Ninja.

rtu-app-core - это красиво оформленный пакет компонентов графического интерфейса и многоцелевой набор утилит, разработанный для Flutter. rtu-app-core

Aug 10, 2022

🎨 An opinionated, effective and correct way to provide multiple themes to your app.

🎨 An opinionated, effective and correct way to provide multiple themes to your app.

theming This is an opinionated and effective way to provide multi-theme choice for your app. theming depends on provider and shared_preference for sta

Nov 28, 2022

Flutter cupertino style date picker.

Flutter cupertino style date picker.

Flutter Cupertino Date Picker [pub packages] | 中文说明 Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Dec 26, 2022

Flutter cupertino style date picker.

Flutter cupertino style date picker.

Flutter Cupertino Date Picker [pub packages] | 中文说明 Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Dec 26, 2022
Owner
Reuben Turner
Flutter <3
Reuben Turner
flutter_thrio makes it easy and fast to add flutter to existing mobile applications, and provide a simple and consistent navigator APIs.

本仓库不再维护,可移步新仓库 https://github.com/flutter-thrio/flutter_thrio 中文文档 问题集 QQ 群号码:1014085473 The Navigator for iOS, Android, Flutter. Version 0.2.2 requir

Hellobike 732 Dec 5, 2022
Consistent design with Flutter Theme

Consistent design with Flutter Theme Source code for the "Consistent design with Flutter Theme" DartPad workshop by Anna Leushchenko ??‍?? ?? ?? ????

Anna (Domashych) Leushchenko 8 Oct 31, 2022
A collection of pixel-perfect iOS-styled components and properties for Flutter, following the official guidelines.

cupertinew ⚠️ Experimental and work in progress ⚠️ A collection of pixel-perfect iOS-styled components and properties for Flutter, following the offic

Jeroen Meijer (Jay) 30 Nov 10, 2022
Linter rules corresponding to the guidelines in Effective Dart

effective_dart This package is deprecated. Before it was deprecated, it was the way to provide analysis options corresponding to the guidelines in Eff

Honza Bittner 127 Dec 9, 2022
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
Neumorphic style - Example app with Flutter that displays a neumorphic style container

Flutter Neumorphic Style Example App Example app with Flutter that displays a ne

Piyush Nagpal 2 Mar 24, 2022
Flutter chat-app UI with multiple themes & light + Dark mode.

Chat-App UI Only a PART of code available, for complete code ping here Features of the app - Light Mode + Dark Mode 4 different color themes - pink/te

Deepa Pandey 31 Oct 5, 2022
Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

GTK ❤️ Flutter Unofficial implementation of GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME Human Interface Guidelines. Featur

Prateek SU 164 Dec 26, 2022
The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes.

Flutter Rounded Date Picker The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes. Installing Add

benznest 313 Dec 22, 2022
Extended theme - Extended themes for Flutter

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

Stephan E.G. Veenstra 5 Apr 21, 2022