Implementation of the adwaita theme for flutter/dart

Last update: Aug 8, 2022

Implementation of the adwaita color scheme found in libadwaita.

Inspired by the yaru theme for flutter.

Usage

import 'package:flutter/material.dart';
import 'package:adwaita/adwaita.dart' as adwaita;

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

class MyApp extends StatelessWidget {
  final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.light);

  MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
        valueListenable: themeNotifier,
        builder: (_, ThemeMode currentMode, __) {
          return MaterialApp(
              theme: adwaita.lightTheme,
              darkTheme: adwaita.darkTheme,
              debugShowCheckedModeBanner: false,
              home: MyHomePage(themeNotifier: themeNotifier),
              themeMode: currentMode);
        });
  }
}

GitHub

https://github.com/gtk-flutter/adwaita
Comments
  • 1. Follow typography guidelines

    Typography is really important for the look and feel of UIs.

    If we want to build accurate GNOME style apps this Adwaita theme should follow HIG Guidelines on Typography closely. Specifically they use the Cantarell font, I think it is included in the google_fonts package although adding such a big dependency for a small feature seems bloated, it will be better to include it manually, here is Cantarell's official page.

    Reviewed by pablojimpas at 2022-01-16 19:27
  • 2. Possibility of merge with `libadwaita` package

    I was wondering why there are two 'adwaita' packages: one for the theming and colors and another for ui and widgets.

    Inside the new libadwaita library offered by the GNOME project both style and widgets are inside one library, so it would make sense two merge this package into libadwaita.

    I'd like this issue to serve as a point of discussion for all of us :)

    Reviewed by jesusrp98 at 2021-12-29 12:13
  • 3. Wrap themes inside a class

    Wrapping both dark and light themes into a class called AdwaitaThemeData or something similar would make its use much easier for the developer.

    This

    import 'package:adwaita/adwaita.dart' as adwaita;
    
    return MaterialApp(
      theme: adwaita.lightTheme,
      darkTheme: adwaita.darkTheme,
    );
    

    could be this

    import 'package:adwaita/adwaita.dart';
    
    return MaterialApp(
      theme: AdwaitaThemeData.light(),
      darkTheme: AdwaitaThemeData.dark(),
    );
    

    You could have to different methods inside that class (light and dark) that would generate the appropriate ThemeData instance.

    This is how it's done on the material side of things.

    Let me know what you think about this change. I could take this issue and create a PR for it if you want it :)

    Reviewed by jesusrp98 at 2021-12-28 20:29
  • 4. Refactor `AdwaitaThemeData` into a class

    Closes #5.

    • Wrap all content from the theme.dart file into a const class.
    • Rename Colors class to AdwaitaColors to avoid confusions with other set of colors.
    • Make class constructors const.
    Reviewed by jesusrp98 at 2021-12-29 11:00
  • 5. Add HighContrast White and Dark theme

    Screenshot from 2022-02-20 22-43-18

    Adwaita theme also has HighContrast variants, It would be good for this package to also support them. It will also be useful for android with amoled screen as HighContrast Dark would be blacker.

    Reviewed by prateekmedia at 2022-02-20 17:11

Related

The Flutter implementation of Iconly icon sets.
The Flutter implementation of Iconly icon sets.

Flutter package for using Iconly Icons. Iconly is totally free, and you can use this package to bring these awesome icons to your Flutter project.

Aug 12, 2022
Smiley_ui: Implementation of BastiUi design in Flutter
Smiley_ui: Implementation of BastiUi design in Flutter

smiley_ui Implementation of BastiUi design in Flutter. (Inspired by Aloïs Deniel implementation) Try the demo Getting started For now this package is

Jun 23, 2022
A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features
A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

Jul 25, 2022
An elegant, object-oriented implementation of the Material Design color palettes and swatches.
An elegant, object-oriented implementation of the Material Design color palettes and swatches.

Contents Overview Getting Started Palette interface Numeric indexes X Named constructors Swatch interface Swatch in action Gradient interface Demo app

Jan 9, 2022
Flutter-business-card-app - Flutter + Dart business card mobile app
Flutter-business-card-app - Flutter + Dart business card mobile app

Dart + Flutter Business Card Mobile Application

Jan 9, 2022
This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.
This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

Jul 21, 2022
A vector tile renderer for use in creating map tile images or writing to a canvas. Written in Dart to enable use of vector tiles with Flutter.
A vector tile renderer for use in creating map tile images or writing to a canvas. Written in Dart to enable use of vector tiles with Flutter.

vector_tile_renderer A vector tile renderer for use in creating map tile images or writing to a canvas. Written in Dart to enable use of vector tiles

Jul 6, 2022
App that simulates an e-commerce of natural products with Flutter and Dart
App that simulates an e-commerce of natural products with Flutter and Dart

E-commerce Orgs App que simula um e-commerce de produtos naturais para o curso de navegação e rotas com nuvigator através do Flutter e Dart. ?? Funcio

Feb 18, 2022
Flutter + Dart (App development)

mi_card A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Dec 14, 2021
Connecting the Windows platform with the beautiful Dart language.

This is project in a very experimental stage Connecting the Windows platform with the beautiful Dart language. Can be used inside or without flutter a

Jul 2, 2022
Emoji for Dart

Emojis ?? Emoji for Dart ?? Over 3300 Emojis This ?? contain all ?? Unicode 13.1 Emojis ( 2️⃣ 0️⃣ 2️⃣ 1️⃣ ) ?? supports null safety ?? ??️ Usage 0️⃣ I

Jun 12, 2022
A Dart package that detects credit card types based on their prefixes
A Dart package that detects credit card types based on their prefixes

credit_card_type_detector | Credit Card Type Detector A Dart package that detects credit card types based on the current credit card number patterns T

Nov 20, 2021
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

May 15, 2022
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Aug 1, 2022
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

coolicons This flutter package allows you to use the Coolicons icon pack. Made from Coolicons. ?? Installation In the dependencies: section of your pu

May 24, 2022
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

Feb 7, 2022
A Flutter project that gives basic flutter design to implement a login UI
A Flutter project that gives basic flutter design to implement a login UI

Login UI Design A Flutter project that gives basic flutter design to implement a

Aug 4, 2022
Flutter Complete E-Commerce app (UI by - 'The Flutter Way')

NOT COMPLETED YET! e_commerce A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to ge

Mar 8, 2022
Flutter Shop UI - an e-commerce app using Flutter
Flutter Shop UI - an e-commerce app using Flutter

If you are planning to create an e-commerce app using Flutter then this Shop UI Kit would be the perfect choice for you to make a gorgeous app for both Android & iOS.

Jul 7, 2022