feat: added side navigation bar

android/app/src/main/AndroidManifest.xml

@@ -42,5 +42,13 @@
             <action android:name="android.intent.action.PROCESS_TEXT"/>
             <data android:mimeType="text/plain"/>
         </intent>
+        <intent>
+            <action android:name="android.support.customtabs.action.CustomTabsService" />
+        </intent>
+        <intent>
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.BROWSABLE" />
+            <data android:scheme="https" />
+        </intent>
     </queries>
 </manifest>

ios/Runner/Info.plist

@@ -41,6 +41,11 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
+	<key>LSApplicationQueriesSchemes</key>
+		<array>
+			<string>sms</string>
+			<string>tel</string>
+		</array>
 	<key>CADisableMinimumFrameDurationOnPhone</key>
 	<true/>
 	<key>UIApplicationSupportsIndirectInputEvents</key>

lib/constants/asset_paths.dart

@@ -5,4 +5,7 @@ class ImageAssets {
   static const String blackBoard = 'assets/canvas/black.png';
   static const String epaper37Bwr = 'assets/images/displays/epaper_3.7_bwr.png';
   static const String epaper37Bw = 'assets/images/displays/epaper_3.7_bw.PNG';
+  static const String tempIcon = 'assets/icons/icon.png';
+  static const String githubIcon = 'assets/icons/github.png';
+  static const String badgeIcon = 'assets/icons/badge.png';
 }

lib/constants/string_constants.dart

@@ -1,5 +1,27 @@
 class StringConstants {
   static const String appName = 'Magic epaper';
+
+  static const String aboutUsDescription =
+      'Magic ePaper is an app designed to control and update ePaper displays.'
+      'The goal is to provide tools for customizing and transferring images, text, and patterns to ePaper screens using NFC.'
+      'Data transfer from the smartphone to the ePaper hardware is done wirelessly via NFC. The project is built on top of custom firmware and display drivers for seamless communication and efficient image rendering.';
+  static const String developedBy = 'Developed by';
+  static const String fossasiaContributors = 'FOSSASIA contributors';
+  static const String contactWithUs = 'Contact With Us';
+  static const String github = 'GitHub';
+  static const String githubSubtitle =
+      'Fork the repo and push changes or submit new issues.';
+  static const String license = 'License';
+  static const String licenseSubtitle =
+      'Check Apache License 2.0 terms used on Magic ePaper.';
+  static const String selectDisplay = 'Select Display';
+  static const String selectDisplayType = 'Select your ePaper display type';
+  static const String settings = 'Settings';
+  static const String aboutUs = 'About Us';
+  static const String other = 'Other';
+  static const String buyBadge = 'Buy Badge';
+  static const String feedbackBugReports = 'Feedback/Bug Reports';
+  static const String continueButton = 'Continue';
   static const String noImageSelectedFeedback = 'Import an image first!';
   static const String adjustButtonLabel = 'Adjust';
   static const String importImageButtonLabel = 'Import New';

lib/main.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:magic_epaper_app/provider/getitlocator.dart';
 import 'package:magic_epaper_app/provider/image_loader.dart';
+import 'package:magic_epaper_app/view/about_us_screen.dart';
+import 'package:magic_epaper_app/view/settings_screen.dart';
 import 'package:provider/provider.dart';
 import 'package:magic_epaper_app/view/display_selection_screen.dart';
 
@@ -16,9 +18,18 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const MaterialApp(
+    return MaterialApp(
       title: 'Magic Epaper',
-      home: DisplaySelectionScreen(),
+      initialRoute: '/',
+      routes: {
+        '/': (context) => const DisplaySelectionScreen(),
+        '/aboutUs': (context) => const AboutUsScreen(),
+        '/settings': (context) => const SettingsScreen(),
+      },
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+        visualDensity: VisualDensity.adaptivePlatformDensity,
+      ),
     );
   }
 }

lib/util/orientation_util.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/services.dart';
+
+/// Sets the preferred orientation to portrait only (up and down).
+Future<void> setPortraitOrientation() async {
+  await SystemChrome.setPreferredOrientations([
+    DeviceOrientation.portraitUp,
+    DeviceOrientation.portraitDown,
+  ]);
+}

lib/util/url_util.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+Future<void> openUrl(BuildContext context, String url) async {
+  try {
+    final uri = Uri.tryParse(url);
+    if (uri != null && await canLaunchUrl(uri)) {
+      await launchUrl(uri);
+    } else {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('Could not open the link.')),
+      );
+    }
+  } catch (e) {
+    ScaffoldMessenger.of(context).showSnackBar(
+      const SnackBar(
+          content: Text('An error occurred while opening the link.')),
+    );
+  }
+}

lib/view/about_us_screen.dart

@@ -0,0 +1,244 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:magic_epaper_app/constants/asset_paths.dart';
+import 'package:magic_epaper_app/constants/string_constants.dart';
+import 'package:magic_epaper_app/util/orientation_util.dart';
+import 'package:magic_epaper_app/util/url_util.dart';
+import 'package:magic_epaper_app/view/widget/common_scaffold_widget.dart';
+
+class AboutUsScreen extends StatefulWidget {
+  const AboutUsScreen({super.key});
+
+  @override
+  State<AboutUsScreen> createState() => _AboutUsScreenState();
+}
+
+class _AboutUsScreenState extends State<AboutUsScreen> {
+  @override
+  void initState() {
+    setPortraitOrientation();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CommonScaffold(
+      index: 5,
+      body: SingleChildScrollView(
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(10),
+                  boxShadow: const [
+                    BoxShadow(
+                      color: Colors.grey,
+                      offset: Offset(0, 1),
+                      blurRadius: 2.0,
+                    ),
+                  ],
+                ),
+                child: Padding(
+                  padding: const EdgeInsets.all(16.0),
+                  child: Column(
+                    children: [
+                      const SizedBox(
+                        height: 25,
+                      ),
+                      Center(
+                        child: Image.asset(
+                          ImageAssets.tempIcon,
+                          height: 100,
+                          fit: BoxFit.contain,
+                        ),
+                      ),
+                      const SizedBox(height: 30),
+                      Text(
+                        StringConstants.aboutUsDescription,
+                        textAlign: TextAlign.justify,
+                        style: GoogleFonts.sora(
+                          wordSpacing: 3,
+                          fontWeight: FontWeight.w400,
+                          color: Colors.black,
+                          fontSize: 12,
+                        ),
+                        softWrap: true,
+                      ),
+                      const SizedBox(height: 16),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Flexible(
+                            child: Text(
+                              StringConstants.developedBy,
+                              style: GoogleFonts.sora(
+                                fontWeight: FontWeight.w500,
+                                color: Colors.grey,
+                              ),
+                              overflow: TextOverflow.ellipsis,
+                            ),
+                          ),
+                          const SizedBox(width: 10),
+                          Flexible(
+                            child: GestureDetector(
+                              onTap: () => openUrl(context,
+                                  'https://github.com/fossasia/magic-epaper-app/graphs/contributors'),
+                              child: Text(
+                                StringConstants.fossasiaContributors,
+                                style: GoogleFonts.sora(
+                                  fontWeight: FontWeight.w500,
+                                  color: Colors.red,
+                                  decoration: TextDecoration.underline,
+                                ),
+                                overflow: TextOverflow.ellipsis,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+              const SizedBox(height: 10),
+              Container(
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  boxShadow: const [
+                    BoxShadow(
+                      blurRadius: 1,
+                      color: Colors.grey,
+                      offset: Offset(0, 1),
+                    )
+                  ],
+                  borderRadius: BorderRadius.circular(6),
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.only(left: 12.0, top: 12.0),
+                      child: Text(
+                        StringConstants.contactWithUs,
+                        style: GoogleFonts.sora(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w500,
+                          color: Colors.grey,
+                        ),
+                      ),
+                    ),
+                    ListTile(
+                      leading: Image.asset(
+                        ImageAssets.githubIcon,
+                        height: 40,
+                        fit: BoxFit.contain,
+                      ),
+                      title: Text(
+                        StringConstants.github,
+                        style: GoogleFonts.sora(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w500,
+                          color: Colors.black,
+                        ),
+                      ),
+                      subtitle: Text(
+                        StringConstants.githubSubtitle,
+                        style: GoogleFonts.sora(
+                          fontSize: 12,
+                          fontWeight: FontWeight.w500,
+                          color: Colors.grey,
+                        ),
+                        softWrap: true,
+                      ),
+                      onTap: () => openUrl(context,
+                          'https://github.com/fossasia/magic-epaper-app'),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 10),
+              Container(
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  boxShadow: const [
+                    BoxShadow(
+                      blurRadius: 1,
+                      color: Colors.grey,
+                      offset: Offset(0, 1),
+                    )
+                  ],
+                  borderRadius: BorderRadius.circular(6),
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.all(12.0),
+                      child: Text(
+                        StringConstants.license,
+                        style: GoogleFonts.sora(
+                          fontSize: 18,
+                          fontWeight: FontWeight.w500,
+                          color: Colors.grey,
+                        ),
+                      ),
+                    ),
+                    ListTile(
+                      leading: Image.asset(
+                        ImageAssets.badgeIcon,
+                        height: 40,
+                        fit: BoxFit.contain,
+                      ),
+                      title: Text(
+                        StringConstants.license,
+                        style: GoogleFonts.sora(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w500,
+                          color: Colors.black,
+                        ),
+                      ),
+                      subtitle: Text(
+                        StringConstants.licenseSubtitle,
+                        style: GoogleFonts.sora(
+                          fontSize: 12,
+                          fontWeight: FontWeight.w500,
+                          color: Colors.grey,
+                        ),
+                        softWrap: true,
+                      ),
+                      onTap: () => openUrl(context,
+                          'https://github.com/fossasia/magic-epaper-app/blob/main/LICENSE.md'),
+                    ),
+                    // ListTile(
+                    //   leading: Image.asset('assets/icons/book.png', height: 40),
+                    //   title: Text(
+                    //     'Library Licenses',
+                    //     style: GoogleFonts.sora(
+                    //         fontSize: 16,
+                    //         fontWeight: FontWeight.w500,
+                    //         color: Colors.black),
+                    //   ),
+                    //   subtitle: Text(
+                    //     'Check third-party libs used on Badge Magic.',
+                    //     style: GoogleFonts.sora(
+                    //         fontSize: 12,
+                    //         fontWeight: FontWeight.w500,
+                    //         color: Colors.grey),
+                    //   ),
+                    //   onTap: () => showLicenseDialog(context),
+                    // ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+      title: StringConstants.appName,
+    );
+  }
+}