marp	true

Baatu - Modern Communication Platform

Table of Contents

• Overview
• Features
• Project Architecture
• Technical Implementation
• Getting Started
• Dependencies
• Code Examples
• Contributing
• Contact
• Acknowledgments

Overview

Baatu is a comprehensive communication platform designed to connect users through multiple channels. Built with Flutter, it offers a seamless cross-platform experience with a focus on performance, usability, and modern design principles.

Features

• Login and Registration: Secure authentication with user-friendly interfaces..
• Content Sections: Explore various topics including grammar, music, and travel.
• Interactive Navigation: Easily navigate through different screens using the navigation bar.
• Real-time Messaging: Connect with other users through instant messaging.
• Audio & Video Calls: High-quality communication with multiple participant support.
• Content Sharing: Share media and documents seamlessly.
• Offline Support: Access key features even without an internet connection.
• Cross-Platform: Available on iOS, Android, Web, macOS, Windows, and Linux.

Project Architecture

Baatu follows a modular architecture pattern to ensure maintainability, scalability, and separation of concerns.

Screenshots

Screenshots

Authentication	Account Management	Main Features	User Experience

Technical Implementation

Baatu is built using Flutter, a popular open-source UI toolkit for building natively compiled applications for mobile, web, desktop, and embedded devices. The app follows a clean architecture pattern to ensure maintainability, scalability, and separation of concerns.

Project Architecture

Baatu follows a modular architecture pattern to ensure maintainability, scalability, and separation of concerns.

Folder Structure

baatu/
├── android/ # Android-specific configuration
├── ios/ # iOS-specific configuration
├── lib/
│ ├── config/ # App configuration files
│ │ ├── constants/ # App constants
│ │ ├── routes/ # Route definitions
│ │ └── themes/ # Theme configurations
│ ├── core/ # Core functionality
│ │ ├── error/ # Error handling
│ │ ├── network/ # Network services
│ │ └── utils/ # Utility functions
│ ├── data/
│ │ ├── models/ # Data models
│ │ ├── repositories/ # Data repositories
│ │ └── services/ # API services
│ ├── modules/ # Feature modules
│ │ ├── auth/ # Authentication module
│ │ │ ├── components/ # UI components
│ │ │ ├── screens/ # Screens
│ │ │ ├── services/ # Module-specific services
│ │ │ └── models/ # Module-specific models
│ │ ├── chat/ # Chat module
│ │ ├── calls/ # Calls module
│ │ │ ├── audio_call/ # Audio call functionality
│ │ │ └── video_call/ # Video call functionality
│ │ └── profile/ # Profile module
│ ├── shared/
│ │ ├── components/ # Shared UI components
│ │ ├── widgets/ # Reusable widgets
│ │ └── helpers/ # Helper functions
│ └── main.dart # Application entry point
├── assets/ # Static assets
│ ├── images/ # Image assets
│ ├── fonts/ # Font files
│ └── icons/ # Icon assets
├── test/ # Test files
└── pubspec.yaml # Dependencies and app metadata

Module Structure

Each module follows a consistent structure:

module_name/
├── components/ # UI components specific to the module
├── screens/ # Screen widgets
├── services/ # Module-specific services
├── models/ # Data models for the module
└── module_name.dart # Module entry point

Technical Implementation

State Management

Baatu uses a combination of state management solutions:

// Example of state management with ProviderclassUserProviderextendsChangeNotifier {
User? _currentUser;
User?get currentUser => _currentUser;
voidsetUser(User user) {
_currentUser = user;
notifyListeners();
}
voidlogout() {
_currentUser =null;
notifyListeners();
}
}

Theme Management

The app implements a consistent theming system:

// Theme configurationclassAppTheme {
staticThemeData lightTheme =ThemeData(
primaryColor:AppColors.primary,
colorScheme:ColorScheme.light(
primary:AppColors.primary,
secondary:AppColors.secondary,
background:AppColors.background,
),
textTheme:TextTheme(
headlineLarge:TextStyle(
fontSize:24,
fontWeight:FontWeight.bold,
color:AppColors.textPrimary,
),
// ... other text styles
),
// ... other theme properties
);
staticThemeData darkTheme =ThemeData(
// Dark theme configuration
);
}

Navigation

The app uses named routes for navigation:

// Route configurationclassAppRoutes {
staticconstString splash ='/';
staticconstString login ='/login';
staticconstString register ='/register';
staticconstString home ='/home';
staticconstString chat ='/chat';
staticconstString videoCall ='/video_call';
staticconstString audioCall ='/audio_call';
staticconstString profile ='/profile';
staticMap<String, WidgetBuilder> getRoutes() {
return {
splash: (context) =>constSplashScreen(),
login: (context) =>constLoginScreen(),
register: (context) =>constRegisterScreen(),
home: (context) =>constHomeScreen(),
chat: (context) =>constChatScreen(),
videoCall: (context) =>constVideoCallScreen(),
audioCall: (context) =>constAudioCallScreen(),
profile: (context) =>constProfileScreen(),
};
}
}

API Integration

The app uses a service-based approach for API integration:

// API service exampleclassApiService {
finalString baseUrl ='https://api.baatu.com';
final http.Client client;
ApiService({http.Client? client}) : client = client ?? http.Client();
Future<dynamic> get(String endpoint) async {
final response =await client.get(
Uri.parse('$baseUrl/$endpoint'),
headers: {'Content-Type':'application/json'},
);
if (response.statusCode ==200) {
returnjsonDecode(response.body);
} else {
throwException('Failed to load data: ${response.statusCode}');
}
}
// Other HTTP methods (post, put, delete, etc.)
}

Real-time Communication

For real-time features like chat and calls, the app uses WebSockets and the Agora SDK:

// Audio call implementationclassAudioCallScreenextendsStatefulWidget {
finalString channelName;
finalClientRoleType role;
constAudioCallScreen({
Key? key,
requiredthis.channelName,
requiredthis.role,
}) :super(key: key);
@overrideState<AudioCallScreen> createState() =>_AudioCallScreenState();
}
class_AudioCallScreenStateextendsState<AudioCallScreen> {
latefinalRtcEngine _engine;
bool _muted =false;
@overridevoidinitState() {
super.initState();
_initializeAgora();
}
Future<void> _initializeAgora() async {
// Initialize Agora SDK
_engine =createAgoraRtcEngine();
await _engine.initialize(RtcEngineContext(
appId:AppConstants.agoraAppId,
channelProfile:ChannelProfileType.channelProfileLiveBroadcasting,
));
// Enable audioawait _engine.enableAudio();
// Join channelawait _engine.joinChannel(
token:'',
channelId: widget.channelName,
uid:0,
options:ChannelMediaOptions(
clientRoleType: widget.role,
),
);
}
// ... rest of implementation
}

Getting Started

Prerequisites

• Flutter SDK: ^3.6.0
• Dart SDK: ^3.0.0
• Android Studio / Xcode for native development

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/baatu.git

2. Navigate to the project directory:

   cd baatu

3. Install dependencies:

   flutter pub get

4. Run the app:

   flutter run

Dependencies

• Flutter SDK: ^3.6.0
• Cupertino Icons: ^1.0.8
• Flutter SVG: ^2.0.9
• Google Fonts: ^6.1.0
• HTTP: ^1.1.0
• Provider: ^6.0.5
• Agora RTC Engine: ^6.2.0
• Firebase Core: ^2.15.0
• Firebase Auth: ^4.7.2
• Cloud Firestore: ^4.8.4
• Shared Preferences: ^2.2.0
• Path Provider: ^2.1.0
• Image Picker: ^1.0.2

Code Examples

Custom Button Component

classCustomButtonextendsStatelessWidget {
finalString text;
finalVoidCallback onPressed;
finalbool isLoading;
finalColor? backgroundColor;
finalColor? textColor;
constCustomButton({
Key? key,
requiredthis.text,
requiredthis.onPressed,
this.isLoading =false,
this.backgroundColor,
this.textColor,
}) :super(key: key);
@overrideWidgetbuild(BuildContext context) {
final theme =Theme.of(context);
returnElevatedButton(
onPressed: isLoading ?null: onPressed,
style:ElevatedButton.styleFrom(
backgroundColor: backgroundColor ?? theme.primaryColor,
padding:constEdgeInsets.symmetric(vertical:16),
shape:RoundedRectangleBorder(
borderRadius:BorderRadius.circular(8),
),
),
child: isLoading
?constCircularProgressIndicator(color:Colors.white)
:Text(
text,
style:TextStyle(
color: textColor ??Colors.white,
fontSize:16,
fontWeight:FontWeight.bold,
),
),
);
}
}

Firebase Authentication Service

classAuthService {
finalFirebaseAuth _auth =FirebaseAuth.instance;
// Get current userUser?get currentUser => _auth.currentUser;
// Auth state changes streamStream<User?> get authStateChanges => _auth.authStateChanges();
// Sign in with email and passwordFuture<UserCredential> signInWithEmailAndPassword({
requiredString email,
requiredString password,
}) async {
try {
returnawait _auth.signInWithEmailAndPassword(
email: email,
password: password,
);
} catch (e) {
throwException('Failed to sign in: $e');
}
}
// Register with email and passwordFuture<UserCredential> registerWithEmailAndPassword({
requiredString email,
requiredString password,
}) async {
try {
returnawait _auth.createUserWithEmailAndPassword(
email: email,
password: password,
);
} catch (e) {
throwException('Failed to register: $e');
}
}
// Sign outFuture<void> signOut() async {
await _auth.signOut();
}
}

Contributing

Contributions are welcome! Please fork the repository and submit a pull request for any enhancements or bug fixes.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Contact

For any inquiries, please contact the project maintainers.

Acknowledgments

Special thanks to all contributors and the Flutter community for their support.

---

© 2023 Baatu. All rights reserved.