Barber Buddy UI Template

Product Information

$102.69
cart Add to cart Favorites
User Guide Live Preview

inspectedProduct inspected by PieceX

Developer

Ninety23
Request Code Sample Direct message

Sep 27, 2024

Public chat

Product Details




Barber Buddy


Barber Buddy UI kit, a comprehensive Flutter solution for building modern, feature-rich apps for barbershops and salons. This kit covers everything from login and sign-up flows to a robust dashboard displaying next client information and a calendar view of schedules. With advanced features like appointment management, customisable barber settings, and client lists, it s built using Bloc for efficient state management and clean architecture for scalability. Additionally, it supports dark and light themes, providing a flexible and seamless user experience



Android QR Code


Features


Login Feature


The login screen allows users to securely access their account using their email and password. They can also recover their password using the "Forgot Password" link if needed.


Login Or Register Screen


Sign-Up Feature


New users can create an account by entering their name, email, and a secure password. The "Sign Up" button registers the user in the system.


  • User Personal Information
    1. Full Name

    2. Email

    3. Password

    4. Phone

    5. Address


  • Profile Picture

  • Preferred & Availability
    1. Preferred Barber

    2. Preferred Time

    3. Preferred Date


  • Terms & Conditions


Login Or Register Screen


Dashboard Screen


The Dashboard Screen offers a quick overview of the barber's upcoming clients and scheduled appointments. At the top, barbers can see details of their next client's appointment, including time, service type, and client information. Below, a calendar provides an overview of daily or weekly schedules, highlighting booked slots. Each scheduled appointment includes key details like service duration, client name, and any special requests, allowing barbers to efficiently manage their day. This streamlined layout ensures barbers stay organized and prepared for their upcoming appointments.


Login Or Register Screen


Message Feature


The message screen allows barbers to communicate with their clients. Barbers can view and respond to messages from clients, providing updates on appointment availability, service options, and more. The message screen also includes a search bar for easy navigation, ensuring barbers can quickly find and respond to client inquiries.


Message Screen Image 1


Appointment Details


The appointment details screen provides users with information about their upcoming appointments, including the date, time, and location.


Message Screen Image 1


Setting Feature


The setting screen allows users to customize their account settings, including profile information, notification preferences, and security settings. Users can update their name, email, and password, as well as manage their notification settings for appointment reminders and special offers. The setting screen also includes options.


Setting Screen Image 1


Account Deletion Feature


The account deletion screen allows users to permanently delete their account.


Account Deletion Screen


State Management


Bloc

Conclusion


Streamline your app development with the Barber UI kit, designed for efficiency and scalability. With a clean architecture, Bloc for state management, and fully customization components, this kit helps you deliver a high-quality app experience for barbershops. Get started today and create a polished, professional app with ease, featuring dark and light mode support to enhance user interaction!

- Login Screen
- Sign-Up Screen
- User Personal Information
- Full Name
- Email
- Password
- Phone
- Address
- Profile Picture
- Preferred & Availability
- Preferred Barber
- Preferred Time
- Preferred Date
- Terms & Conditions
- Dashboard Screen
- Message Screen
- Appointment Details Screen
- Setting Screen
- Barber Setting Screen
- Client Setting Screen
- Account Deletion Screen

File Tree

  • 📁 Barber Buddy UI Template

Installation Instructions

If your system does not have the Flutter SDK installed, follow the steps in the official installation guide available at flutter.dev.

Note: This project uses Flutter 3.24.1. Please ensure that the same version is installed on your system.

Environment Details:
- Flutter: 3.24.1
- Dart: 3.5.1
- DevTools: 2.37.2

Steps to Run the Project:
1. Download and extract the project files.
2. Open the "Roamify" folder in your preferred IDE.
3. In the terminal, navigate to the project folder and run the command to install dependencies: `flutter pub get`.
4. Run the app using one of the following modes:
- Release Mode: `flutter run --release`
- Profile Mode: `flutter run --profile`
- Debug Mode: `flutter run`

Change and Adaptation Instructions

Change Application Name
1. Go to the AndroidManifest.xml file located in the android/app/src/main/ directory.
2. Change `android:label="Barber Buddy"` to your application’s name, for example, `android:label="Your_APPLICATION_NAME"`.
3. Then, go to the constants.dart file in the lib/core/shared/ directory and update the application name:
- Change `const appName = "Barber Buddy";` to `const appName = "Your_APPLICATION_NAME";`.

Change Your Bundle Identifier
Run the following command to change the package name:
`flutter pub run change_app_package_name:main com.new.package.name`

Change Application Colors
In the scheme.dart file located in the lib/core/shared/theme/ directory, all the app colors are defined. There are two types of color schemes: Light and Dark. You can customize these colors as needed.

Change Application Theme
In the config.dart file located in lib/core/config/, the application themes are initialized. The app supports both Light and Dark themes using Material 3. For example, if you want to change the ElevatedButton style across the entire app, you can configure it here to avoid repeating the code in multiple places.

Folder Structure
After extracting the root folder, you will find two folders:
1. Source Code: This contains all the project files.
2. Documentation: Inside this folder, you will find detailed instructions on how to set up and customize the application.

Price Information

Price Statistics

Highest Price
$NA
Average Price
$NA
Lowest Price
$NA
AI Price Forecast
$NA

Insights

Limited Preview Only


Real Product Contains All Files And Full Code

Check dependencies

See product external dependencies

Randomly Selected Sample File

Project File Statistics

Hierarchy

Choose a sample file
X

Stay in touch

  • Get Practical Tips For Business and Developers.
  • Learn about PieceX Community Needs for Source Code Projects.
  • Be the First to Know PieceX Newest Free Community Code Projects.
PieceX Logo