Verve #

A Flutter theming solution, building on modern Material and Scandinavian principles. This package contains prebuilt theme swatches, as well as opinionated Widgets designed to work with provided themes.

Swatches #

To access Verve's inbuilt swatches, use the method verveSwatch({@required VerveTheme theme, ThemeData base}). See Working Example to see how to do this correctly.

This returns a ThemeData, which you can use as the theme attribute of Material app.

The available VerveThemes are detailed in Themes below.

When you call verveSwatch(), verveSwatch returns a modified version of base with modified fonts, colors, and brightness attributes. If base is null, it will return a ThemeData with just these attributes.

Verve uses the Metropolis font, due to its clean, geometric nature. This font is free of licenses and is included in this package. Verve also updates the Flutter font defaults to the Material Design 2018 specification, as Flutter uses the 2014 version currently.

verveSwatch also edits some components (Buttons, Cards, FABs) slightly to look nicer stylistically. These are somewhat opinionated, but you can always override them.

Themes #

Verve has 11 Swatches, which can be used to auto-style your Flutter apps. Each cherry-picks 3 colors from a popular (Adobe Color) palette and transports it to Flutter. You can see each of them below in their Adobe palette form, and the specific Colors used are included.

Material (VerveTheme.material)

• Adobe Color: N/A, it's Material colors.
• Ships with Flutter, only typography changes made.

Dark Mode (VerveTheme.darkMode)

• Adobe Color: N/A, it's Material Dark colors.
• Ships with Flutter, only typography changes made.

Navy (VerveTheme.navy)

• Adobe Color: KnotJustNautical
• Colors:
  • Main: Color(0xff2C3E50)
  • Accent: Color(0xffFC4349)
  • Background: Color(0xffD7DADB)

Blue (VerveTheme.blue)

• Adobe Color: Water
• Colors:
  • Main: Color(0xff2787B7)
  • Accent: Color(0xff024669)
  • Background: Color(0xffAED3E5)

Purple (VerveTheme.purple)

• Adobe Color: Tema de Cores
• Colors:
  • Main: Color(0xff73305B)
  • Accent: Color(0xff272640)
  • Background: Color(0xffD9C1C5)

Dune (VerveTheme.dune)

• Adobe Color: Sandy Stone
• Colors:
  • Main: Color(0xffE6E2AF)
  • Accent: Color(0xff046380)
  • Background: Color(0xffEFECCA)

Garden (VerveTheme.garden)

• Adobe Color: Summer Garden
• Colors:
  • Main: Color(0xff4BB5C1)
  • Accent: Color(0xffB5E655)
  • Background: Color(0xffEDF7F2)

Sepia (VerveTheme.sepia)

• Adobe Color: Aviator
• Colors:
  • Main: Color(0xff1A9481)
  • Accent: Color(0xff9BCC93)
  • Background: Color(0xffFDEEA7)

Twilight (VerveTheme.twilight)

• Adobe Color: Quail Vista Night
• Colors:
  • Main: Color(0xff192853)
  • Accent: Color(0xffC9D2D9)
  • Background: Color(0xff0C1A3D)

Amati (VerveTheme.amati)

• Adobe Color: Madame Amati
• Colors:
  • Main: Color(0xff45757D)
  • Accent: Color(0xff27455C)
  • Background: Color(0xffD1E0D3)

Venice (VerveTheme.venice)

• Adobe Color: Sleep Sense
• Colors:
  • Main: Color(0xff0396A6)
  • Accent: Color(0xffF25E5E)
  • Background: Color(0xffAEE6D1)

Working example #

import 'package:flutter/material.dart';
import 'package:verve/verve.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Verve Example',
      //Navy verveSwatch
      theme: verveSwatch(theme: VerveTheme.navy),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Verve!'),
        ),
        body: Center(
          Column(
            children: <Widget> [
              //Just some text.
              Text('This app is Verve-themed.'),
              //Rounded-flat button.
              verveButton(onPressed: null, child: Text('Click me!')),
              //Generator for String based ListView
              //Uses rounded verveCards.
              verveListView(
              titles: [
                'This is a list',
                'It adds some hope'
              ], 
              values: [
                'made of verveCards.',
                'to boring ListView.builder.'
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

Verve, a Flutter design library.

©2019 Aditya Kishore

Licensed under the Mozilla Public License 2.0