Skip to content

kingavatar/stepper

Repository files navigation

⚙️ Stepper Widgets for Flutter

This repository contains two custom stepper widgets - HorizontalStepper and VerticalStepper - for Flutter. These widgets can be used to enhance the UI/UX of your Flutter app by displaying information in a visually appealing manner.

🚀 Features

↔️ Horizontal Stepper

The HorizontalStepper widget displays flight status information, including current time and location (departure and arrival), terminal, duration, flight name and logo, number of jumps to different destinations, and in-between waiting duration.

↕️ Vertical Stepper

The VerticalStepper widget displays cancellation window and charges for booking status, taking inputs of two lists of strings that represent date-time strings and charges respectively.

📊 Architecture and Design

The architecture and design of this project were carefully considered to ensure a streamlined development process with minimal dependencies. The two custom stepper widgets, HorizontalStepper and VerticalStepper, were designed from scratch with no additional dependencies.

The widgets were created using Flutter's built-in widgets and custom-painted using the Flutter drawing framework. This approach allowed for full customization of the widgets' designs and functionalities.

The HorizontalStepper widget was designed to display flight status information, including the current time and location (departure and arrival), terminal, duration, flight name and logo, number of jumps to different destinations, and in-between waiting duration. This widget was designed with the aim of enhancing the UI/UX of the Flutter app and providing users with a visually pleasing and intuitive way to view their flight status information.

On the other hand, the VerticalStepper widget was designed to display cancellation window and charges for booking status, taking inputs of two lists of strings that represent date-time strings and charges respectively. This widget provides a sleek and organized way to display booking status information and allows users to easily view cancellation windows and charges for their bookings.

Both widgets are displayed in a centered column in the Flutter app and can be easily integrated into any Flutter project. The widgets are designed to be fully customizable and responsive allowing developers to modify the design and functionality to fit their specific project needs.

We stress that no additional dependencies were used to create these custom stepper widgets, ensuring that the widgets remain lightweight, efficient and responsive. This approach provides a streamlined and efficient development process, allowing developers to easily integrate the widgets into their projects without worrying about additional dependencies.

Overall, the architecture and design of this project were carefully considered to ensure a robust and efficient development process while providing users with visually pleasing and intuitive custom stepper widgets.

📱 Screenshots

Widgets in Android Emulator
Widgets in Android
Vertical Stepper
Vertical Widget
Horizontal Stepper
Horizontal Widget

📜 Usage

To use these widgets in your Flutter app, follow these steps:

  1. Clone this repository
  2. Copy the stepper/widgets and stepper/models folder into your Flutter project
  3. Import the widgets in your Dart file.

⭐️ Contributions and Feedback

Thank you for taking the time to view my project. Contributions and feedback are always welcome. If you like this project, please give it a star and fork it to show your support.