Canton Design System

Canton Design System elements and resources for Flutter.

Description

This package contains elements that I use in my apps. It includes things such as themes (colors, typography, etc.), custom methods, buttons, text-inputs, a color picker, and more. This all in attempt to limit the amount of time I spend on remaking simple tools and ui, while still customizing my screens to my flavor. Please note that this package will not be uploaded on pub.dev in the near future.

Getting Started

To use this package and access its content, add this dependency to your pubspec.yaml

dependencies:
    canton_design_system:
        git:
          url: git://github.com/31Carlton7/canton_design_system.git
          ref: master

And simply import the package using this code

import 'package:canton_design_system/canton_design_system.dart';

BTW package:flutter/material.dart is already imported when using this package so no need to re-import 🙂

All Features

• Null Safe: This package supports null safety.
• Color system: Credits to the Primer Color system, as this is a modified version of theirs.
• Typography system: Credits to the Primer typography system.
• Buttons: Resizable primary button, small/header button and back button with all necessary customizations.
• Text Inputs: Custom text field, text form fields, and a tag text field.
• Borders: border customization.
• Loading icon: Loading icon/widget.
• Animations(WIP): Fluid animations to give a playful but professional feel.
• Custom Methods: Custom methods with ease of use.
• Icon System: Icon system that utilizes Iconly icons, Feather Icons and Cupertino Icons.
• Custom Fonts: Both serif and sans serif typefaces consisting of Inter UI and Times New Roman.
• Light theme: Clean light theme.
• Dark Theme: Clean dark theme with all elements modified.
• Dynamic Device Theming: Accustoms to light mode and dark mode based on current device.

Dependencies

flutter_riverpod: ^0.14.0+3
flutter_slidable: ^0.6.0
flutter_feather_icons: ^2.0.0+1
flutter_spinkit: ^5.0.0
flutter_svg: ^0.22.0
page_transition: ^2.0.2
liquid_pull_to_refresh: ^3.0.0
cupertino_icons: ^1.0.3

Figma

Link to design system on figma to view UI elements

Dowload Canton Design System source code on GitHub

https://github.com/31Carlton7/canton_design_system