wid_design_system 1.0.0

A collection of widgets, colors, styles, providers and asorted utils for implementing the Wid Design System.

Wid Design System

A collection of widgets, colors, styles, providers and asorted utils for implementing the Wid Design System.

Roadmap

• Tests
• More widgets
• Performance improvements

How to use

Just import the package and you´ll get a WidAppTheme.light light theme and a WidAppTheme.dark dark theme out of the box. Check out the example for more detail.

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: WidAppTheme.dark,
      theme: WidAppTheme.light,
      home: const MyHomePage(title: 'My App'),
    );
  }
}

You can also add this to your pubspec.yaml to include the Quicksand font provided by this package:

flutter:
  uses-material-design: true
  generate: true

  fonts:
    - family: Quicksand
      fonts:
        - asset: packages/wid_design_system/fonts/Quicksand-Bold.ttf
          weight: 700
        - asset: packages/wid_design_system/fonts/Quicksand-SemiBold.ttf
          weight: 600
        - asset: packages/wid_design_system/fonts/Quicksand-Medium.ttf
          weight: 500
        - asset: packages/wid_design_system/fonts/Quicksand-Regular.ttf
          weight: 400
        - asset: packages/wid_design_system/fonts/Quicksand-Light.ttf
          weight: 300

Installation 💻

❗ In order to start using Wid Design System you must have the Flutter SDK installed on your machine.

Add wid_design_system to your pubspec.yaml:

dependencies:
  wid_design_system:

Install it:

flutter packages get

---

Continuous Integration 🤖

Wid Design System comes with a built-in GitHub Actions workflow powered by Very Good Workflows but you can also add your preferred CI/CD solution.

Out of the box, on each pull request and push, the CI formats, lints, and tests the code. This ensures the code remains consistent and behaves correctly as you add functionality or make changes. The project uses Very Good Analysis for a strict set of analysis options used by our team. Code coverage is enforced using the Very Good Workflows.

---

Running Tests 🧪

For first time users, install the very_good_cli:

dart pub global activate very_good_cli

To run all unit tests:

very_good test --coverage

To view the generated coverage report you can use lcov.

# Generate Coverage Report
genhtml coverage/lcov.info -o coverage/

# Open Coverage Report
open coverage/index.html