Barber Buddy UI Template

Informações do produto

$102.69
cart Adicionar ao carrinho Favoritos
Guia do usuário Visualização ao vivo

inspectedProduto inspecionado pela PieceX

Desenvolvedor

Ninety23
Solicitar amostra de código Mensagem direta

Sep 27, 2024

Chat público

Detalhes do produto




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

Árvore de arquivos

  • 📁 Barber Buddy UI Template

Instruções de instalação

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`

Instruções de alteração e adaptação

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.

Informações de preço

Estatísticas de preço

Maior preço
$NA
Preço médio
$NA
Menor preço
$NA
Previsão de preço de IA
$NA

Insights

Apenas visualização limitada


O produto real contém todos os arquivos e o código completo

Verificar dependências

Ver dependências externas do produto

Arquivo de amostra selecionado aleatoriamente

Estatísticas do arquivo do projeto

Hierarquia

Escolha um arquivo de amostra
X

Fique em contato

  • Obtenha dicas práticas para empresas e desenvolvedores.
  • Saiba mais sobre as necessidades da comunidade PieceX para projetos de código-fonte.
  • Seja o primeiro a conhecer os mais novos projetos de código gratuito da comunidade PieceX.
PieceX Logo