Frontend Architecture
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The frontend of the fikak_app is built using the Flutter framework, designed to provide a cross-platform mobile experience. It follows a reactive programming model where the user interface is a function of the application state. The architecture focuses on modularity, separating the UI layer from the business logic and state management.
The application leverages a provider-based pattern for state management, ensuring that data is propagated efficiently throughout the widget tree. This structure allows for clear separation of concerns, making the codebase maintainable and scalable as features are added.
Core Framework and Dependencies
The application utilizes Flutter as its primary UI toolkit. The dependency management is handled via pubspec.yaml, which defines the external libraries required for navigation, state management, and asynchronous operations.
| Dependency | Purpose |
|---|---|
flutter | Core UI framework for building the mobile application. |
provider | State management library used to inject and track data across widgets. |
http | Handles network requests to external APIs. |
shared_preferences | Local persistence for user settings and session tokens. |
Sources: pubspec.yaml
State Management and Data Flow
The fikak_app employs the Provider pattern to manage global application state. This is primarily centered around authentication and user session management. The AuthProvider serves as the central hub for handling login states and user profile data.
Authentication Flow
The authentication flow involves checking local storage for existing session tokens upon application startup. If a token is found, the user is directed to the home screen; otherwise, they are presented with the login interface.
The logic for this flow is initialized within the main.dart file, which wraps the root widget in a MultiProvider.
Sources: lib/main.dart, lib/providers/auth_provider.dart
UI Component Structure
The UI is organized into screens and reusable widgets. The entry point of the application sets up the basic theme and routing.
Navigation and Routing
Navigation is managed through Flutter's built-in Navigator API. The main.dart file defines the initial route and the mapping between route names and screen widgets.
HomeScreen Layout
The HomeScreen is the primary interface for users post-authentication. It is structured using a Scaffold that includes a BottomNavigationBar for navigating between different functional modules of the application.
| UI Component | Description |
|---|---|
Scaffold | The basic visual layout structure of the screen. |
AppBar | Displays the title and contextual actions. |
Body | Dynamically switches content based on the selected index of the bottom bar. |
BottomNavigationBar | Provides quick access to main features like Feed, Profile, and Settings. |
Sources: lib/screens/home_screen.dart
Implementation Details
Provider Injection
In lib/main.dart, the application is wrapped in a ChangeNotifierProvider to make state accessible to all descendants in the widget tree.
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => AuthProvider()),
],
child: MyApp(),
),
);
}
Sources: lib/main.dart:1-12
Local Data Persistence
The AuthProvider interacts with shared_preferences to ensure that user sessions persist across application restarts. When a user logs in, the token is saved locally; during logout, the token is cleared, and the provider notifies all listeners to trigger a UI update.
Sources: lib/providers/auth_provider.dart
Conclusion
The frontend architecture of fikak_app leverages Flutter's modularity and the Provider pattern to create a responsive and maintainable mobile application. By decoupling state management from the UI components, the system ensures that data flows predictably, and the user interface remains synchronized with the underlying application logic.