Implementation of the adwaita theme for flutter/dart

Related tags

UI theme dart gtk gnome flutter adwaita
Overview

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);
        });
  }
}
Comments
  • Follow typography guidelines

    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.

    opened by pablojimpas 7
  • Possibility of merge with `libadwaita` package

    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 :)

    discussion 
    opened by jesusrp98 4
  • Wrap themes inside a class

    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 :)

    opened by jesusrp98 1
  • Refactor `AdwaitaThemeData` into a class

    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.
    opened by jesusrp98 0
  • Add HighContrast White and Dark theme

    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.

    opened by prateekmedia 0
Releases(0.5.2)
Owner
GTK Flutter
GTK + Flutter
GTK Flutter
GitHub https://pub.dev/packages/adwaita
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.

6thSolution 26 Nov 8, 2022
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

Guillaume Roux 16 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

Evgeny Cherkasov 37 Jul 25, 2022
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

Dartoos 8 Nov 2, 2022
Flutter-business-card-app - Flutter + Dart business card mobile app

Dart + Flutter Business Card Mobile Application

Mark Hellner 1 Nov 8, 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.

Jesús Rodríguez 44 Dec 6, 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.

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

David Green 30 Oct 7, 2022
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

Heliomar P. Marques 1 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

Yogesh Narendra Tiwari 1 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

ilopX 11 Oct 24, 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

Naji 40 Jan 1, 2023
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

Tanner Davis 22 Jan 4, 2023
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.

Habib ullah 3 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.

Urmish Patel 191 Dec 29, 2022
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

Stephen Joel 1 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 the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

ABDULKARIMALBAIK 1 Feb 7, 2022
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

CABREX 9 Nov 8, 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

null 1 Mar 8, 2022
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.

Trần Văn Nguyên 21 Nov 21, 2022