homepage, create a note, and edit a note screen

fzaahra · fzaahra · commit b12b676443d5 · 2022-10-06T14:02:30.000+04:00
diff --git a/assets/icons/drawer.png b/assets/icons/drawer.png
diff --git a/assets/images/homepage/no-content-homepage.png b/assets/images/homepage/no-content-homepage.png
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:notely/screens/createNoteScreens/createNoteScreen.dart';
 import 'package:notely/screens/homepageScreens/homepageScreen.dart';
+import 'package:notely/screens/homepageScreens/noContentHomepage.dart';
 import 'package:notely/screens/registrationScreens/registrationScreen.dart';
 
 import 'screens/loginScreens/loginScreen.dart';
@@ -24,7 +26,9 @@ class MyApp extends StatelessWidget {
         '/': (context) => const OnboardingScreen(),
         '/registration': (context) => RegistrationScreen(),
         '/login': (context) => LoginScreen(),
+        '/initial-homepage': (context) => NoContentHomePage(),
         '/homepage': (context) => HomePageScreen(),
+        '/create-note': (context) => CreateNoteScreen(),
       },
     );
   }
diff --git a/lib/screens/createNoteScreens/createNoteScreen.dart b/lib/screens/createNoteScreens/createNoteScreen.dart
@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:notely/utils/colors.dart';
+import 'package:notely/utils/fonts.dart';
+import 'package:notely/widgets/common/appbarsCommon.dart';
+import 'package:notely/widgets/editNote/editNoteTextField.dart';
+import 'package:notely/widgets/registration/registrationTextField.dart';
+
+class CreateNoteScreen extends StatefulWidget {
+  const CreateNoteScreen({super.key});
+
+  @override
+  State<CreateNoteScreen> createState() => _CreateNoteScreenState();
+}
+
+class _CreateNoteScreenState extends State<CreateNoteScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Scaffold(
+        backgroundColor: ColorsConstant.backgroundColor,
+        appBar: PreferredSize(
+          preferredSize: const Size.fromHeight(64.0),
+          child: AppBarCommon(
+            leadingIcon: GestureDetector(
+              onTap: () {
+                Navigator.of(context).pop();
+              },
+              child: const Icon(
+                Icons.arrow_back_ios,
+                color: Colors.black,
+              ),
+            ),
+            title: "Edit Note",
+            actionIcon: const Icon(
+              Icons.more_vert,
+              color: Colors.black,
+            ),
+          ),
+        ),
+        body: Column(
+          children: [
+            const Gap(30),
+            EditNoteTextField(
+              hintText: "Note title",
+            ),
+            const Gap(12),
+            Expanded(
+              child: EditNoteTextField(
+                hintText: "Note Content",
+                height: MediaQuery.of(context).size.height,
+                keyboardType: TextInputType.multiline,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/homepageScreens/noContentHomepage.dart b/lib/screens/homepageScreens/noContentHomepage.dart
@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:notely/utils/colors.dart';
+import 'package:notely/utils/fonts.dart';
+import 'package:notely/widgets/common/appbarsCommon.dart';
+import 'package:notely/widgets/onboarding/onboardingButton.dart';
+
+class NoContentHomePage extends StatelessWidget {
+  const NoContentHomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Scaffold(
+        appBar: PreferredSize(
+          preferredSize: Size.fromHeight(64.0),
+          child: AppBarCommon(
+            // TODO change to drawer
+            leadingIcon: IconButton(
+              icon: Icon(
+                Icons.menu,
+                color: Colors.black,
+              ),
+              onPressed: () => Scaffold.of(context).openDrawer(),
+            ),
+            title: "All Notes",
+            actionIcon: Icon(
+              Icons.search,
+              color: Colors.black,
+            ),
+          ),
+        ),
+        backgroundColor: ColorsConstant.backgroundColor,
+        body: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 44.0),
+          child: SingleChildScrollView(
+            child: Column(
+              children: [
+                Gap(100),
+                Image.asset("assets/images/homepage/no-content-homepage.png"),
+                Gap(40),
+                Text(
+                  "Create your first note",
+                  style: Fonts.onboardingTitle.bodyLarge,
+                ),
+                Gap(12),
+                Text(
+                  "Add a note about anything (your thoughts on climate change, or your history essay) and share it witht the world.",
+                  style: Fonts.onboardingTitle.bodyMedium,
+                  textAlign: TextAlign.center,
+                ),
+                const Gap(78),
+                OnboardingButton(
+                  title: "Create a note",
+                  moveTo: "/create-note",
+                ),
+                const Gap(20),
+                GestureDetector(
+                  onTap: () {},
+                  child: Text(
+                    "Import Notes",
+                    style: Fonts.onboardingLinks.bodyMedium,
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/loginScreens/loginScreen.dart b/lib/screens/loginScreens/loginScreen.dart
@@ -48,7 +48,8 @@ class LoginScreen extends StatelessWidget {
                 textTitle: 'Password',
               ),
               const Gap(44),
-              const OnboardingButton(title: "Login", moveTo: "/homepage"),
+              const OnboardingButton(
+                  title: "Login", moveTo: "/initial-homepage"),
               const Gap(20),
               GestureDetector(
                 onTap: () {
diff --git a/lib/screens/registrationScreens/registrationScreen.dart b/lib/screens/registrationScreens/registrationScreen.dart
@@ -59,7 +59,7 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
               ),
               const Gap(56),
               const OnboardingButton(
-                  title: "Create Account", moveTo: "/homepage"),
+                  title: "Create Account", moveTo: "/initial-homepage"),
               const Gap(20),
               GestureDetector(
                 onTap: () {
diff --git a/lib/utils/fonts.dart b/lib/utils/fonts.dart
@@ -43,4 +43,13 @@ class Fonts {
       color: ColorsConstant.TextTitleColor,
     ),
   );
+
+  static const TextTheme editNoteTitle = TextTheme(
+    titleSmall: TextStyle(
+      fontFamily: "Nunito-Bold",
+      fontSize: 14,
+      fontWeight: FontWeight.w900,
+      color: ColorsConstant.TextTitleColor,
+    ),
+  );
 }
diff --git a/lib/widgets/common/appbarsCommon.dart b/lib/widgets/common/appbarsCommon.dart
@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:notely/utils/fonts.dart';
+
+class AppBarCommon extends StatelessWidget {
+  dynamic leadingIcon, title, actionIcon;
+  AppBarCommon({
+    super.key,
+    this.leadingIcon,
+    this.title,
+    this.actionIcon,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      centerTitle: true,
+      backgroundColor: Colors.transparent,
+      elevation: 0,
+      leading: leadingIcon,
+      title: Text(
+        title,
+        style: Fonts.editNoteTitle.titleSmall,
+      ),
+      actions: [
+        actionIcon,
+      ],
+    );
+  }
+}
diff --git a/lib/widgets/editNote/editNoteTextField.dart b/lib/widgets/editNote/editNoteTextField.dart
@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:notely/utils/colors.dart';
+import 'package:notely/utils/fonts.dart';
+
+class EditNoteTextField extends StatelessWidget {
+  dynamic hintText, height, keyboardType;
+  EditNoteTextField({
+    super.key,
+    this.hintText,
+    this.height,
+    this.keyboardType,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      height: height,
+      child: TextField(
+        decoration: InputDecoration(
+          hintText: hintText,
+          hintStyle: Fonts.hintTheme.bodyMedium,
+          enabledBorder: InputBorder.none,
+          focusedBorder: InputBorder.none,
+          filled: true,
+          fillColor: ColorsConstant.backgroundColor,
+        ),
+      ),
+    );
+  }
+}
diff --git a/pubspec.lock b/pubspec.lock
@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.8.2"
+    version: "2.9.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -21,21 +21,14 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
-  charcode:
-    dependency: transitive
-    description:
-      name: charcode
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.3.1"
+    version: "1.2.1"
   clock:
     dependency: transitive
     description:
       name: clock
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   collection:
     dependency: transitive
     description:
@@ -63,7 +56,7 @@ packages:
       name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   ffi:
     dependency: transitive
     description:
@@ -136,28 +129,28 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.11"
+    version: "0.12.12"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.4"
+    version: "0.1.5"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.7.0"
+    version: "1.8.0"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.1"
+    version: "1.8.2"
   path_provider:
     dependency: transitive
     description:
@@ -239,7 +232,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.2"
+    version: "1.9.0"
   stack_trace:
     dependency: transitive
     description:
@@ -260,21 +253,21 @@ packages:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.1"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.9"
+    version: "0.4.12"
   typed_data:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -60,6 +60,7 @@ flutter:
   # To add assets to your application, add an assets section, like this:
   assets:
     - assets/images/onboarding/onboarding1.png
+    - assets/images/homepage/no-content-homepage.png
   #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see
