flutter_albe 0.0.46

This package provides custom Flutter components developed by Zanichelli for a consistent, high-quality user experience in our apps.

Zanichelli - Flutter Components

This package provides a set of custom Flutter components, developed and maintained by Zanichelli to ensure a consistent, high-quality user experience across our applications.

✨ Key Features

• Custom UI components – A set of predefined widgets to speed up user interface development.
• Consistent styling – Maintains a uniform look and feel across all Zanichelli applications.
• Easy integration – Designed to be quickly integrated into any Flutter project.

📦 Installation

1. Add the package to your pubspec.yaml file:

dependencies:
  flutter_albe: ^0.0.46

OR use the command:

flutter pub add flutter_albe

2. After adding the dependency, run:

flutter pub get

🎨 Theme Configuration

To use the components included in the package, it is important to configure the theme correctly.
Below is an example of how to apply the flutter_albe theme to your application:

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    final AppThemeData currentTheme = AppThemeData.light;

    return AppTheme(
      data: currentTheme,
      child: const MaterialApp(home: HomeScreen()),
    );
  }
}

Make sure to apply AppTheme to the entire application.

🚀 Usage

To use the components, import the package into your Dart file:

import 'package:flutter_albe/flutter_albe.dart';

You can now use the components directly in your code:

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ZButton(
          buttonText: 'Outlined Button',
          buttonType: ButtonType.outlined,
          onPressed: () {},
        ),
      ),
    );
  }
}

📖 Widgetbook

Widgetbook is a Flutter package inspired by Storybook.js that simplifies widget cataloging to create a custom design system.
It also allows you to test widgets in different configurations.

🚀 Starting Widgetbook

To start Widgetbook in the project, follow these steps:

1. Navigate to the widgetbook folder:

cd widgetbook

2. Install dependencies:

flutter pub get

3. Launch Widgetbook on Chrome:

flutter run -d chrome

🔄 Updating Components

If you create new components, make sure to run the following command to regenerate the main.directories.g.dart file and ensure that the new widgets are correctly included in the system:

dart run build_runner build -d

🏗️ Local Development

You can use the widgetbook for quick reference of your local changes.

If you want to see your components in action in a differen project, follow these steps:

1) Organize folders

Create a structure similar to this:

/projects
  /flutter_albe
  /my_project

2) Configure dependencies

Edit the dependency in your own project's pubspec.yaml to point to the local path of flutter_albe:

dependencies:
  flutter_albe:
    path: ../flutter_albe

3) Update dependencies

Run the command:

flutter pub get

Whenever you make changes to flutter_albe, you can immediately see them in your project by running:

flutter pub get && flutter run

✅ Running tests

To run all the tests in the package, use the following command:

flutter test test

📦 Publishing the Package

To publish the package on pub.dev, follow these steps:

Update the CHANGELOG.md

Update pubspec.yaml

Enter the widgetbook and run pub get

cd widgetbook
flutter pub get

Remember to exit widgetbook before proceeding with the publication

cd ..

1) Verify the package before publishing

Before publishing, it is recommended to run a dry-run to check for any issues:

flutter pub publish --dry-run

This command performs a check without actually publishing the package, showing any errors or warnings.

2) Authenticate on pub.dev

If you are not logged in yet, run:

dart pub login

Follow the instructions to authenticate with your Google account associated with pub.dev.

3) Publish the package

If the dry-run did not report any issues, you can proceed with publishing:

flutter pub publish

4) Verify publication

After a few minutes, the package will be available on pub.dev. You can verify the publication by visiting:

https://pub.dev/packages/flutter_albe

5) Deploy widgetbook

If you edit or add new components to the package, you may want to update the online version.

Visit our widgetbook to see the current state of this Design System.