Ecommerce App

    Flutter Ecommerce App built clean architecture & bloc state management

    DeepikaBy Updated:No Comments5 Mins Read

    Flutter ecommerce app built with clean architecture and bloc state management

    Piiicks

    Piiicks is a Flutter e-commerce app, meticulously crafted with clean architecture and powered by the efficient BLoC state management ensuring scalability, maintainability, and optimal performance. Dive into a seamless coding experience with a sleek interface and robust features designed to elevate the online shopping journey.

    Directory Structure.

    • lib
      • main.dart: Entry point of the application.
      • 📂application ──📂blocs/cubits: Houses the BLoC (Business Logic Component) or Cubit classes responsible for managing the application’s state.
      • 📂core: Contains core functionalities and utilities shared across the application.
      • 📂configs: Holds configuration files for the project.
      • 📂di: Dependency Injection setup for managing dependencies and services.
      • 📂data: Manages data sources, repositories, and data models.
      • 📂domain: Defines the domain entities, use cases, and interfaces.
      • 📂presentation ──📂screens/widgets: Contains UI components, screens, and widgets for the application.

    Features

    1. Clean Architecture: Ensure a modular and scalable architecture for long-term maintainability.
    2. BLoC State Management: Efficient state management for a smooth and predictable user experiences flutter ecommerce app.

    User Interface

    1. Product Screen: User-friendly display of products for effortless browsing.
    2. Categories: Seamless navigation through various product categories.
    3. Product Details: In-depth information for a comprehensive view of products.
    4. Search Functionality: Robust search feature for quick product discovery.
    5. Search Results: Clear and relevant search results for user convenience.
    6. Home Screen: Engaging showcase of featured products and categories.
    7. Filter Options: Intuitive product filtering options for a customized shopping experience.
    8. Splash Screen: Captivating initial loading screen setting the tone for the app.
    9. Addresses: Effortlessly manage and edit user addresses for smooth order processing.
    10. Pagination: Implement pagination for efficient loading of large sets of data, ensuring a smoother user experience.

    User Interaction

    1. Sort Products: Options to sort products based on criteria such as price.
    2. Notifications: Keep users informed with updates on order status and more.

    User Management

    1. Login/SignUp: Secure user authentication for a personalized experience.
    2. Shopping Cart: Seamless and intuitive management of selected items before purchase.
    3. User Profile: Dedicated section for managing addresses, viewing order history, and personalizing preferences.

    Additional Features

    1. Image Caching and Loading Optimization: Utilize the cached_network_image package for efficient loading and caching of network images, enhancing performance.
    2. SVG Support: Leverage the flutter_svg package for supporting SVG images, providing a scalable and crisp user interface.
    3. Data Caching: Use the shared_preferences package for caching small amounts of data, improving the user experience by maintaining certain states.
    4. Authentication and Secure Storage: Implement secure user authentication with the flutter_secure_storage package, ensuring sensitive user data is stored securely.
    5. Stateful UI with Shimmer Effect: Enhance the user interface by incorporating the shimmering effect using the shimmer package, providing a polished loading experience.
    6. Dynamic Page Indicators: Implement dynamic page indicators using the dots_indicator package, providing visual cues for users when navigating through different screens.
    7. HTTP Requests and API Integration: Leverage the http package for making HTTP requests and seamlessly integrate with external APIs for fetching and updating data.
    8. Network Connectivity Check: Utilize the internet_connection_checker package to ensure a smooth user experience by checking and handling network connectivity.
    9. Dependency Injection: Leverage the get_it package for efficient dependency injection, improving code maintainability and managing dependencies effectively.
    10. Functional Programming Principles: Explore and implement functional programming principles from the dartz package, enhancing code clarity and error handling.

    Dependencies

    environment:
  sdk: '>=3.0.5 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
 # the last versions.
  equatable: # Package for handling value equality without explicit overrides
  dartz:  # Functional programming library for Dart
  shared_preferences: # Plugin for reading and writing key-value pairs to persistent storage
  http: # Package for making HTTP requests
  internet_connection_checker: # Library for checking internet connectivity
  flutter_bloc: # State management library for Flutter applications
  get_it: # Simple service locator for Dart and Flutter projects
  shimmer:  # Package for adding shimmering effect to Flutter applications
  cached_network_image:  # Library for loading and caching network images
  flutter_svg: # Library for rendering SVG files in Flutter applications
  dots_indicator: # Customizable dots indicator for PageView in Flutter
  flutter_secure_storage: # Secure storage plugin for Flutter
  photo_view: # Package for displaying images in Flutter with zooming and panning capabilities
  dotted_border: # Package for creating dotted borders in Flutter
  flutter_local_notifications: # Package for displaying local notifications in Flutter applications

    Screens.

    <img decoding=
    flutter ecommerce app

    Flutter ecommerce app
    Flutter ecommerce app

    Done:

    • Products.
    • Categories.
    • Product Details.
    • Search.
    • Search Result.
    • Home.
    • Filter.
    • Login.
    • SignUp.
    • Splash.
    • Cart.
    • Profile.
    • Adresses.
    • Add/Edit Adress.
    • Sort Products.
    • Notifications.

    ToDo:

    • Orders.
    • Checkout.
    • Payment.

    Demos.

    home.mp4

    filter.mp4

    details.mp4

    Getting Started

    1. Clone the repository.
    2. Navigate to the project directory.
    3. Run flutter pub get to fetch the dependencies.
    4. Open the project in your preferred Flutter IDE.
    5. Run the app on your desired emulator or physical device.

    Resources Used:

    You can check out the entire code of this App here:

    Get Full Source Code

    View Github

    download source code

    Conclusion

    This was all about a quick go through the basic flutter App UI Screen. If you need any assistance regarding flutter app development, you can consult a flutter developer from FlutterDesk. We would love to be of help. Still, if you feel any difficult while dealing with Flutter app development projects, you can reach out to us or hire Flutter developers to outsource any of your app development project.

    Do like & share my Facebook page. if you find this post helpful. Thank you!!

    Happy coding! 😉

    Related Articles:

    READ MORE

    Share.

    Related Posts

    Leave A Reply