Barber Buddy UI Template
제품 세부 정보
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
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.
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
- Full Name
- Password
- Phone
- Address
- Profile Picture
- Preferred & Availability
- Preferred Barber
- Preferred Time
- Preferred Date
- Terms & Conditions
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.
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.
Appointment Details
The appointment details screen provides users with information about their upcoming appointments, including the date, time, and location.
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.
Account Deletion Feature
The account deletion screen allows users to permanently delete their account.
State Management
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
- 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
설치 지침
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`
변경 및 적응 지침
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.