Visa Product Design System - Nova Flutter #

• About
• Security
• Install
• Usage
• Why Nova Flutter?
• Testing
• Maintainers
• Thanks
• Contributing
• License

Nova Flutter #

Accessible Visa Product Design System components built for Flutter

Nova Flutter is a comprehensive library of accessible components designed to align with the Visa Product Design System. It provides developers with a set of reusable UI elements that can be easily integrated into Flutter applications. With Nova Flutter, developers can quickly build visually consistent and user-friendly interfaces that adhere to accessibility best practices.

Key Features #

• Wide range of components: Includes buttons, content cards, navigation drawer, and more.
• Customizable: Built on Flutter Material and ThemeExtension, allowing for extensive theming and customization.
• Accessibility: Adheres to accessibility best practices to ensure inclusive user experiences.
• Flexible state management: Supports bring-your-own state, enabling custom services and classes.

Whether you are building a small project or a large-scale application, Nova Flutter offers a robust foundation for creating visually appealing and accessible user interfaces.

Security #

Our package follows security best practices and ensures the safety of user data. It relies on a minimal number of dependencies, minimizing potential vulnerabilities.

Install #

Nova Flutter and Nova Icons Flutter supports Dart 2.19 and up with null safety, and our current Flutter SDK version is 3.27.2. It is available through the pub.flutter-io.cn.

Dart:

flutter pub add visa_nova_flutter
flutter pub add visa_nova_icons_flutter

To add the dependency manually to your project, import it in pubspec.yaml under dependencies like this:

dependencies:
  visa_nova_flutter: ^8.2.0
  visa_nova_icons_flutter: ^4.0.3

Dependencies #

View our pubspec.yaml for the most up-to-date dependencies, including peer dependencies and dev dependencies.

Usage #

Import VPDS Component Library to Your Project #

Import the library into your Dart code.

import 'package:visa_nova_flutter/visa_nova_flutter.dart';

Add icons (optional) #

We’ve created a dedicated widget, VIcon, to seamlessly integrate the SVG icon library with the components library. To best use Nova icons, import the library along side our visa_nova_flutter library.

import 'package:visa_nova_icons_flutter/visa_nova_icons_flutter.dart';
import 'package:visa_nova_flutter/visa_nova_flutter.dart';
import 'package:flutter/material.dart';

class MyGenericIconWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: VIcon(
        svgIcon: VIconsGeneric.profileLow,
      ),
    );
  }
}

class MyVisaIconWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: VIcon(
        iconColor: VColors.positiveGraphics,
        svgIcon: VIcons.successTiny,
      ),
    );
  }
}

Use the components #

After adding Nova icons, you’re ready to use Flutter components by copying and pasting the example code into your application. Check out Button to give it a try.

Why Nova Flutter? #

Light Weight #

We've reduced our library to basic markup components and functional hooks for a lighter, simpler, and more flexible experience.

Building Blocks #

No more waiting on feature requests. We provide the building blocks for you to easily create and customize your own components.

Built For Developers #

Nova Flutter is sleek and unobtrusive. Our beautifully designed components allow any developer to create stunning apps with ease.

Testing #

Our Approach #

We conduct rigorous testing using Flutter's built-in testing framework to ensure our components are accessible and meet our high standards. Our testing strategy includes unit tests, and widget tests(golden tests). Unit tests verify the correctness of individual functions, methods, or classes under various conditions. Golden tests ensure that the UI looks and interacts as expected and compare widgets with reference images to guarantee visual consistency, similar to snapshot testing in React/React Native.

While we strive to achieve 100% test coverage for all components, we recognize that it is an ongoing process. Our pipeline safeguards against merging any code that fails our tests, ensuring that we capture as many issues as possible before they reach end users. We are continually working to enhance our testing suite and improve our coverage. By combining these testing strategies, we aim to deliver robust and reliable components that meet our high standards of quality and accessibility.

Maintainers #

This project is maintained by the Visa Product Design System engineering team. If you need to get in touch please reach out to us via any of our options on our support page.

Thanks #

Thanks to all those who have contributed and to the Visa Product Design team for all of the hours and thought that have gone into making the design system as easy to use as possible.

Contributing #

SEE CONTRIBUTING.md

License #

SEE LICENSE IN LICENSE