use fixed color values

add material animation to menu button
add draft of preview pages

lib/CollapseDrawer.dart

@@ -2,12 +2,12 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:notes/drawer_item.dart';
 
-enum View {
+enum View { all, shared, recycle, folders }
-  all, shared, recycle, folders
-}
 
 class CollapseDrawer extends StatefulWidget {
-  const CollapseDrawer({Key? key, required this.onPageChange, required this.activePage}) : super(key: key);
+  const CollapseDrawer(
+      {Key? key, required this.onPageChange, required this.activePage})
+      : super(key: key);
   final void Function(View newPage) onPageChange;
   final View activePage;
 
@@ -36,11 +36,13 @@ class _CollapseDrawerState extends State<CollapseDrawer>
 
   @override
   Widget build(BuildContext context) {
-    return ClipRRect(
+    return Container(
+      color: const Color(0xff0d0d0d),
+      child: ClipRRect(
         borderRadius: const BorderRadius.only(
             topRight: Radius.circular(10), bottomRight: Radius.circular(10)),
         child: Container(
-        color: const Color.fromRGBO(0, 0, 0, .75),
+          color: const Color(0xff3f3f3f),
           child: ConstrainedBox(
             constraints: BoxConstraints.expand(width: collapseAnimation.value),
             child: Column(
@@ -54,25 +56,35 @@ class _CollapseDrawerState extends State<CollapseDrawer>
                     const SizedBox(
                       width: 8,
                     ),
-                  IconButton(
+                    Material(
+                      color: Colors.transparent,
+                      shape: const CircleBorder(),
+                      clipBehavior: Clip.hardEdge,
+                      child: IconButton(
+                        icon: const Icon(Icons.menu),
+                        iconSize: 28,
+                        color: const Color(0xffcfcfcf),
                         onPressed: () {
-                        collapsed ? controller.forward() : controller.reverse();
+                          collapsed
+                              ? controller.forward()
+                              : controller.reverse();
                           setState(() => collapsed = !collapsed);
                         },
-                      icon: const Icon(
+                      ),
-                        Icons.menu,
+                    ),
-                        size: 28,
-                        color: Color.fromRGBO(255, 255, 255, .75),
-                      )),
                     if (!collapsed) ...[
                       const Expanded(child: SizedBox()),
-                    IconButton(
+                      Material(
+                        color: Colors.transparent,
+                        shape: const CircleBorder(),
+                        clipBehavior: Clip.hardEdge,
+                        child: IconButton(
+                          icon: const Icon(Icons.settings_outlined),
+                          iconSize: 26,
+                          color: const Color(0xffa8a8a8),
                           onPressed: () {},
-                        icon: const Icon(
+                        ),
-                          Icons.settings_outlined,
+                      ),
-                          size: 26,
-                          color: Color.fromRGBO(255, 255, 255, .55),
-                        )),
                       const SizedBox(
                         width: 15,
                       )
@@ -86,22 +98,23 @@ class _CollapseDrawerState extends State<CollapseDrawer>
                     child: ListView(
                   children: [
                     DrawerItem(
-                      dta: ItemData("All Notes", Icons.book),
+                        dta: ItemData('All Notes', Icons.book),
                         collapsed: collapsed,
+                        endText: '7',
                         active: widget.activePage == View.all,
                         onTap: () => widget.onPageChange(View.all)),
                     DrawerItem(
-                      dta: ItemData("Shared Notebooks", Icons.person_outline),
+                        dta: ItemData('Shared Notebooks', Icons.person_outline),
                         collapsed: collapsed,
                         active: widget.activePage == View.shared,
                         onTap: () => widget.onPageChange(View.shared)),
                     DrawerItem(
-                      dta: ItemData("Recycle bin", CupertinoIcons.trash),
+                        dta: ItemData('Recycle bin', CupertinoIcons.trash),
                         collapsed: collapsed,
                         active: widget.activePage == View.recycle,
                         onTap: () => widget.onPageChange(View.recycle)),
                     DrawerItem(
-                      dta: ItemData("Folders", Icons.folder_outlined),
+                        dta: ItemData('Folders', Icons.folder_outlined),
                         collapsed: collapsed,
                         active: widget.activePage == View.folders,
                         onTap: () => widget.onPageChange(View.folders)),
@@ -111,6 +124,7 @@ class _CollapseDrawerState extends State<CollapseDrawer>
             ),
           ),
         ),
+      ),
     );
   }
 }

lib/all_notes_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:notes/note_tile.dart';
 
 class AllNotesPage extends StatefulWidget {
   const AllNotesPage({Key? key}) : super(key: key);
@@ -21,7 +22,7 @@ class _AllNotesPageState extends State<AllNotesPage> {
               width: 20,
             ),
             const Text(
-              "All notes",
+              'All notes',
               style: TextStyle(
                   color: Color.fromRGBO(255, 255, 255, .85), fontSize: 22),
             ),
@@ -64,7 +65,24 @@ class _AllNotesPageState extends State<AllNotesPage> {
             )
           ],
         ),
+        Row(
+          children: const [Text('date modified..')],
+        ),
+        _buildNoteTiles()
       ],
     );
   }
+
+  Widget _buildNoteTiles() {
+    return Expanded(
+      child: GridView.builder(
+        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 5,
+        ),
+        padding: const EdgeInsets.all(2),
+        itemBuilder: (BuildContext context, int index) => const NoteTile(),
+        itemCount: 3,
+      ),
+    );
+  }
 }

lib/drawer_item.dart

@@ -1,10 +1,13 @@
 import 'package:flutter/material.dart';
 
-import 'CollapseDrawer.dart';
-
 class DrawerItem extends StatelessWidget {
   const DrawerItem(
-      {Key? key, required this.dta, this.endText, required this.collapsed, required this.active, required this.onTap})
+      {Key? key,
+      required this.dta,
+      this.endText,
+      required this.collapsed,
+      required this.active,
+      required this.onTap})
       : super(key: key);
   final ItemData dta;
   final String? endText;
@@ -21,15 +24,16 @@ class DrawerItem extends StatelessWidget {
         child: ClipRRect(
           borderRadius: BorderRadius.circular(10),
           child: Container(
-            color: active ? const Color.fromRGBO(255,255,255,.25) : Colors.transparent,
+            color: active ? const Color(0xff6e6e6e) : Colors.transparent,
             child: Padding(
-              padding: const EdgeInsets.only(left: 9, top: 7, bottom: 7, right: 9),
+              padding:
+                  const EdgeInsets.only(left: 9, top: 7, bottom: 7, right: 9),
               child: Row(
                 children: [
                   Icon(
                     dta.icon,
                     size: 26,
-                    color: const Color.fromRGBO(255, 255, 255, .75),
+                    color: const Color(0xffdbdbdb),
                   ),
                   if (!collapsed) ...[
                     const SizedBox(
@@ -37,14 +41,12 @@ class DrawerItem extends StatelessWidget {
                     ),
                     Text(
                       dta.name,
-                      style:
+                      style: const TextStyle(color: Color(0xffe9e9e9)),
-                          const TextStyle(color: Color.fromRGBO(255, 255, 255, .85)),
                     ),
                     Expanded(child: Container()),
                     Text(
-                      endText ?? "",
+                      endText ?? '',
-                      style:
+                      style: const TextStyle(color: Color(0xffafafaf)),
-                          const TextStyle(color: Color.fromRGBO(255, 255, 255, .45)),
                     ),
                     const SizedBox(
                       width: 15,

lib/main.dart

@@ -38,14 +38,21 @@ class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      floatingActionButton: FloatingActionButton(
+          onPressed: () {},
+          backgroundColor: const Color(0xff3f3f3f),
+          child:
+              const Icon(Icons.edit_calendar_outlined, color: Colors.orange)),
       body: Row(
         children: [
           CollapseDrawer(
             onPageChange: (View newPage) =>
-                  setState(() => activePage = newPage), activePage: activePage,),
+                setState(() => activePage = newPage),
+            activePage: activePage,
+          ),
           Expanded(
               child: Container(
-                color: const Color.fromRGBO(0, 0, 0, .95),
+            color: const Color(0xff0d0d0d),
             child: _buildPage(),
           ))
         ],
@@ -58,11 +65,20 @@ class _MyHomePageState extends State<MyHomePage> {
       case View.all:
         return const AllNotesPage();
       case View.shared:
-        return const Text("Todo1", style: TextStyle(color: Colors.white),);
+        return const Text(
+          'Todo1',
+          style: TextStyle(color: Colors.white),
+        );
       case View.recycle:
-        return const Text("Todo", style: TextStyle(color: Colors.white),);
+        return const Text(
+          'Todo',
+          style: TextStyle(color: Colors.white),
+        );
       case View.folders:
-        return const Text("Todo", style: TextStyle(color: Colors.white),);
+        return const Text(
+          'Todo',
+          style: TextStyle(color: Colors.white),
+        );
     }
   }
 }

lib/note_tile.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+class NoteTile extends StatelessWidget {
+  const NoteTile({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 100,
+      child: Column(
+        children: [
+          SizedBox(
+            height: 150,
+            width: 100,
+            child: Container(
+              color: Colors.white,
+            ),
+          ),
+          const Text(
+            'This is a very long text mimimim lolo',
+            style: TextStyle(color: Colors.white),
+            overflow: TextOverflow.ellipsis,
+          ),
+          const Text('11:40')
+        ],
+      ),
+    );
+  }
+}