Project Sipencari : Android

Published by Ardhi Ramadhani on June 13, 2022

Introduction

Sipencari is a forum discussion platform designed to connect users where users can post about lost or missing items, helping each other recover lost belongings like pets, personal items, or other goods.

Note: This post focuses on the Android design & implementation.

Technical Overview

Sipencari is a Flutter application that implements a robust state management solution using Provider pattern. The application is built with scalability and maintainability in mind, utilizing multiple providers to manage different aspects of the application state.

User Interface Design

Sipencari features a thoughtfully designed user interface that prioritizes user experience and functionality. The app includes several key screens and features:

Authentication Flow

1. Welcome Screen

   • Clean, minimalist design with logo
   • "Tandai dan dapatkan bantuan untuk menemukan yang hilang dengan sipencari" tagline

2. Login/Register Screens

   • Simple login form with email and password
   • Registration form with full name and password confirmation
   • Easy navigation between login and registration

3. User Settings

   • Profile management
   • Password change option
   • Feedback submission
   • About section
   • Logout functionality

Core Features

Missing Items Management

1. Missing List View

   • Grid layout of missing items
   • Category filters (Manusia, Benda, Hewan)
   • Location-based organization

2. Post Missing Item

   • Category selection
   • Location setting with map integration
   • Title and content fields
   • Status selection (Found/Lost)
   • Multiple image upload capability
   • Post submission button

3. Missing Item Detail

   • Detailed item information
   • Location display with map
   • Image gallery
   • Interaction buttons (like, share, comment)
   • Status indicator

4. Edit Missing Item

   • Pre-filled form for editing
   • Image management
   • Status update options
   • Location modification

Navigation and Layout

1. Bottom Navigation Bar

   • Home
   • Missing items
   • Profile
   • Settings

2. Location Services

   • Map integration
   • "Get Location" functionality
   • Near Missing items

3. Content Organization

   • Clean card-based layout
   • Clear typography hierarchy
   • Consistent spacing and alignment
   • Intuitive navigation patterns

Technical Implementation

Directory Structure

lib/
├── models/
│   ├── category.dart
│   ├── finite_state.dart
│   ├── image.dart
│   └── status.dart
├── page/
│   ├── auth/
│   ├── detail/
│   ├── home_page/
│   ├── main_page/
│   ├── missing_page/
│   ├── my_missing_page/
│   ├── setting_page/
│   ├── splash_screen/
│   └── welcome_page/
├── service/
├── shared/
├── util/
├── view_model/
└── widgets/

State Management

The app uses Provider pattern for state management, handling:

• Authentication state
• User profile data
• Discussion threads
• Location services
• Comments system
• Missing items data

Key Components

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => AuthViewModel()),
    ChangeNotifierProvider(create: (context) => ProfileProvider()),
    // ... additional providers
  ],
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      backgroundColor: whiteColor,
    ),
    home: SplashScreen(),
  ),
)

Provider Implementation

The application uses MultiProvider for state management, organizing different functionalities into separate providers:

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => AuthViewModel()),
    ChangeNotifierProvider(create: (context) => ProfileProvider()),
    ChangeNotifierProvider(create: (context) => DiscussionProvider()),
    ChangeNotifierProvider(create: (context) => LocationProvider()),
    ChangeNotifierProvider(create: (context) => CommentProvider()),
    ChangeNotifierProvider(create: (context) => MissingViewModel()),
    ChangeNotifierProvider(create: (context) => CommentViewModel()),
  ],
  // ...
)

Core State Management Components

1. Authentication State Management

   • AuthViewModel: Handles user authentication states and operations
   • Manages login, registration, and session states

2. User Profile Management

   • ProfileProvider: Manages user profile data and updates
   • Handles user-specific information and preferences

3. Discussion Management

   • DiscussionProvider: Controls forum discussion states
   • Manages creation, updating, and deletion of discussions

4. Location Features

   • LocationProvider: Handles location-based functionalities
   • Manages geolocation services and location data

5. Comment System

   • CommentProvider & CommentViewModel: Dual-layer comment management
   • Handles comment creation, updates, and threading

6. Missing Items Management

   • MissingViewModel: Controls missing items reporting and tracking
   • Manages the lost and found functionality

Architecture Benefits

1. State Management

• Centralized state management using Provider
• Clear separation of concerns between different state providers
• Efficient state updates and rebuilds

2. Scalability

• Independent providers for different features
• Easy to add new functionality through additional providers
• Modular approach to feature development

3. Maintainability

• Clean separation between UI and business logic
• Organized state management structure
• Easy to debug and test individual components

Features Implementation

Authentication System

• Managed through AuthViewModel
• Handles user sessions and authentication states
• Provides login and registration functionality

Discussion Forum

• Controlled by DiscussionProvider
• Manages forum posts and interactions
• Handles discussion creation and updates

Comment System

• Dual-layer implementation with CommentProvider and CommentViewModel
• Comment updates

Location Services

• Integrated through LocationProvider
• Location-based features and tracking
• Geographical information management

Missing Items Functionality

• Implemented via MissingViewModel
• Lost and found item reporting
• Item tracking and status updates

Conclusion

Sipencari demonstrates a well-structured approach to creating a modern discussion platform using Flutter. The app's MVC architecture, combined with clear code organization and separation of concerns, makes it both maintainable and scalable.

Although this is my first app developed with Flutter, I focused on best practices to ensure a smooth user experience and efficient development process.

Link to the repository: sipencari-app repository