added the language toggle functionality in the drawer section #338
Conversation
WalkthroughThis update introduces a dedicated Changes
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🔇 Additional comments (5)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
lib/controllers/language_controller.dart (1)
1-15: Good implementation of language toggle functionalityThe LanguageController class is well-structured and correctly implements a simple language toggle between English and Hindi using GetX's reactive state management.
I have a few suggestions for improvements:
Consider adding the following enhancements:
- Add documentation comments to describe the class and method purpose
- Implement persistence of language preference across app restarts
- Make the implementation more extensible for supporting additional languages in the future
import 'package:get/get.dart'; import 'package:flutter/material.dart'; +import 'package:shared_preferences/shared_preferences.dart'; +/// Controller responsible for managing application language/locale +/// Currently supports toggling between English and Hindi class LanguageController extends GetxController { final currentLocale = const Locale('en').obs; + static const String _localeKey = 'app_locale'; + + @override + void onInit() { + super.onInit(); + _loadSavedLocale(); + } + + Future<void> _loadSavedLocale() async { + final prefs = await SharedPreferences.getInstance(); + final savedLocale = prefs.getString(_localeKey); + if (savedLocale != null) { + currentLocale.value = Locale(savedLocale); + Get.updateLocale(currentLocale.value); + } + } + /// Toggles the application language between English and Hindi void toggleLanguage() { if (currentLocale.value.languageCode == 'en') { currentLocale.value = const Locale('hi'); } else { currentLocale.value = const Locale('en'); } Get.updateLocale(currentLocale.value); + _saveLocale(currentLocale.value.languageCode); + } + + Future<void> _saveLocale(String languageCode) async { + final prefs = await SharedPreferences.getInstance(); + await prefs.setString(_localeKey, languageCode); } }lib/ui/components/cv_drawer.dart (1)
46-139: Well-implemented language toggle UI with smooth animationsThe language toggle UI implementation aligns with the PR objectives, featuring a custom-designed segmented control with stylized buttons, a translate icon, and smooth animations.
Consider these improvements to enhance maintainability and accessibility:
- Extract the repeated container styles into a reusable widget to reduce code duplication
- Use localized strings instead of hardcoded text labels
- Add semantic labels for accessibility
Obx(() { final langController = Get.find<LanguageController>(); final isEnglish = langController.currentLocale.value.languageCode == 'en'; return Padding( padding: const EdgeInsets.symmetric( horizontal: 16, vertical: 10, ), child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Icon( Icons.translate_sharp, color: CVTheme.drawerIcon( context, - ), // You can pick any color + ), + semanticLabel: 'Language selection icon', ), const SizedBox( width: 12, - ), // spacing between icon and toggle + ), Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(30), ), padding: const EdgeInsets.all(4), child: Row( children: [ - GestureDetector( - onTap: () { - if (!isEnglish) langController.toggleLanguage(); - }, - child: AnimatedContainer( - duration: const Duration(milliseconds: 250), - curve: Curves.easeInOut, - padding: const EdgeInsets.symmetric( - horizontal: 16, - vertical: 8, - ), - decoration: BoxDecoration( - color: - isEnglish - ? CVTheme.primaryColor - : Colors.transparent, - borderRadius: BorderRadius.circular(20), - ), - child: Text( - 'English', - style: TextStyle( - color: - isEnglish - ? Colors.white - : CVTheme.textColor(context), - ), - ), - ), - ), - GestureDetector( - onTap: () { - if (isEnglish) langController.toggleLanguage(); - }, - child: AnimatedContainer( - duration: const Duration(milliseconds: 250), - curve: Curves.easeInOut, - padding: const EdgeInsets.symmetric( - horizontal: 16, - vertical: 8, - ), - decoration: BoxDecoration( - color: - !isEnglish - ? CVTheme.primaryColor - : Colors.transparent, - borderRadius: BorderRadius.circular(20), - ), - child: Text( - 'हिंदी', - style: TextStyle( - color: - !isEnglish - ? Colors.white - : CVTheme.textColor(context), - ), - ), - ), - ), + _buildLanguageButton( + label: 'English', + isSelected: isEnglish, + onTap: () => !isEnglish ? langController.toggleLanguage() : null, + context: context, + ), + _buildLanguageButton( + label: 'हिंदी', + isSelected: !isEnglish, + onTap: () => isEnglish ? langController.toggleLanguage() : null, + context: context, + ), ], ), ), ], ), ); }),Add this helper method after the build method:
Widget _buildLanguageButton({ required String label, required bool isSelected, required VoidCallback? onTap, required BuildContext context, }) { return Semantics( button: true, selected: isSelected, label: 'Switch to $label', child: GestureDetector( onTap: onTap, child: AnimatedContainer( duration: const Duration(milliseconds: 250), curve: Curves.easeInOut, padding: const EdgeInsets.symmetric( horizontal: 16, vertical: 8, ), decoration: BoxDecoration( color: isSelected ? CVTheme.primaryColor : Colors.transparent, borderRadius: BorderRadius.circular(20), ), child: Text( label, style: TextStyle( color: isSelected ? Colors.white : CVTheme.textColor(context), ), ), ), ), ); }lib/main.dart (1)
81-87: Proper configuration of localization settingsThe localization settings are correctly configured with the LanguageController. Setting the fallback locale to English is appropriate, and removing the debug banner enhances the app's appearance.
For better separation of concerns, consider moving the controller initialization to a dedicated setup method:
Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); // Register all the models and services before the app starts await setupLocator(); // Init Hive await locator<DatabaseService>().init(); - Get.put(LanguageController()); + _initializeControllers(); runApp(const CircuitVerseMobile()); } +// Initialize GetX controllers +void _initializeControllers() { + Get.put(LanguageController()); + // Add other controllers here as needed +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
lib/controllers/language_controller.dart(1 hunks)lib/main.dart(3 hunks)lib/ui/components/cv_drawer.dart(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: build (macos-latest)
- GitHub Check: build (windows-latest)
- GitHub Check: build (ubuntu-latest)
🔇 Additional comments (1)
lib/main.dart (1)
7-7: Good integration of the LanguageControllerThe import and initialization of the LanguageController is properly implemented.
Also applies to: 23-23
…style for language selection
1 participant
Fixes #
Describe the changes you have made in this PR -
This PR improves the language switcher in the app drawer by turning it into a custom-designed toggle-like segmented control. Instead of a standard switch, it uses two stylized buttons ("English" and "हिंदी") to clearly represent the current language. The switcher is placed on the left side with an accompanying translate icon for better visual context.
Screenshots of the changes (If any) -
Note: Please check Allow edits from maintainers. if you would like us to assist in the PR.
Summary by CodeRabbit
New Features
Localization Updates