<!-- https://dartpad.dev/d03f9d2ce254594cb8ed84d49e7bec45 --> # Flutter <!-- Put the link to this slide here so people can follow --> slide: https://hackmd.io/@dsciztech/ry6RqPNuP --- ## Who am I? - Front-end developer - DSCIZTECH Lead - Computer Science Student - Freelancer --- ## What is Flutter? Flutter is the Google's Framework for Mobile, web and desktop development  --- ## Theme Options   --- ## BBTasks Links | GitHub | https://github.com/burakcbdn/BBTasks | |-|-| | APK | [appdistribution.firebase.dev/i/6731431c3d62a60b](https://appdistribution.firebase.dev/i/6731431c3d62a60b) | --- ### Theme Controller ```dart class ThemeController with ChangeNotifier { ThemeController() { if (box.containsKey("currentTheme")){ isDark = box.get("currentTheme"); }else { box.put("currentTheme", isDark); } } bool isDark = false; ThemeMode currentTheme() { return isDark ? ThemeMode.dark : ThemeMode.light; } void switchToLight(){ if (isDark){ isDark = false; box.put("currentTheme", isDark); notifyListeners(); } } void switchToDark(){ if (!isDark){ isDark = true; box.put("currentTheme", isDark); notifyListeners(); } } } ``` --- ### Listening for the Changes ```dart void initState() { themeController.addListener(() { print("theme changed"); setState(() {}); }); super.initState(); } ``` --- ### Theme Modes ```dart MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), darkTheme: ThemeData( primarySwatch: Colors.grey, primaryColor: Color(0xFF212121), scaffoldBackgroundColor: Color(0xFF303030), ), themeMode: themeController.currentTheme(), home: HomePage()); } ``` --- ### Using Controller ```dart onPressed: () { if (themeController.isDark) { themeController.switchToLight(); } else { themeController.switchToDark(); } }, ``` --- # Challenges! --- https://dartpad.dev/d03f9d2ce254594cb8ed84d49e7bec45 --- ## Change the Color of App Bar in light mode --- ```dart theme: ThemeData( primarySwatch: Colors.amber, ), ``` --- ## Change the Background Color in light mode --- ```dart theme: ThemeData( primarySwatch: Colors.blue, scaffoldBackgroundColor: Colors.purple ), ``` --- ## Change the Text Color in Dark Mode --- ```dart darkTheme: ThemeData( primarySwatch: Colors.grey, primaryColor: Color(0xFF212121), scaffoldBackgroundColor: Color(0xFF303030), textTheme: TextTheme(bodyText2: TextStyle(color: Colors.white)) ), ``` --- ## Q&A for Theme Options --- # Firebase Offline Mode --- ## What is Firebase? Firebase is Google’s mobile application development platform --- - NoSQL Database - Realtime Database - Authentication - Cloud Funcitons - Machine Learning - Storage - Hosting --- - Crashlitycs - Analytics - Test Lab (Performance and bugs) - App Distribution - push notifications - Admob - predictions --- ## Offline? --- ### Cloud Firestore How it works offline? ___ --- ```dart void addNewTask({User user, Task task }) aysnc { DocumentReference documentReference = await FirebaseFirestore.instance.collection("users").doc(user.uid).collection("tasks").doc(); await documentReference.set({ "title": task.title, "description": task.description, "color": task.colorValue, "isCompleted":task.isCompleted, "timeStampCreated":task.timeStampCreated, "timeStampLastEdited":task.timeStampLastEdited, "id": documentReference.id, }); } ``` --- ```dart void addNewTask({User user, Task task }){ DocumentReference documentReference = FirebaseFirestore.instance.collection("users").doc(user.uid).collection("tasks").doc(); documentReference.set({ "title": task.title, "description": task.description, "color": task.colorValue, "isCompleted":task.isCompleted, "timeStampCreated":task.timeStampCreated, "timeStampLastEdited":task.timeStampLastEdited, "id": documentReference.id, }); } ``` --- ## Q&A For Firebase Offline Mode --- ## Thank You! if you want to reach me: github: @burakcbdn linkedin: /in/burakcbdn instagram: @burakcbdn twitter @Burakcbdn https://burakcabadan.com DSCIZTECH Instagram: @dsciztech DSCIZTECH Twitter: @dsciztech https://dsciztech.com/ ---