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,78 +36,92 @@ class _CollapseDrawerState extends State<CollapseDrawer>
 
   @override
   Widget build(BuildContext context) {
-    return ClipRRect(
+    return Container(
-      borderRadius: const BorderRadius.only(
+      color: const Color(0xff0d0d0d),
-          topRight: Radius.circular(10), bottomRight: Radius.circular(10)),
+      child: ClipRRect(
-      child: Container(
+        borderRadius: const BorderRadius.only(
-        color: const Color.fromRGBO(0, 0, 0, .75),
+            topRight: Radius.circular(10), bottomRight: Radius.circular(10)),
-        child: ConstrainedBox(
+        child: Container(
-          constraints: BoxConstraints.expand(width: collapseAnimation.value),
+          color: const Color(0xff3f3f3f),
-          child: Column(
+          child: ConstrainedBox(
-            mainAxisAlignment: MainAxisAlignment.start,
+            constraints: BoxConstraints.expand(width: collapseAnimation.value),
-            children: [
+            child: Column(
-              const SizedBox(
+              mainAxisAlignment: MainAxisAlignment.start,
-                height: 10,
+              children: [
-              ),
+                const SizedBox(
-              Row(
+                  height: 10,
-                children: [
+                ),
-                  const SizedBox(
+                Row(
-                    width: 8,
+                  children: [
-                  ),
-                  IconButton(
-                      onPressed: () {
-                        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(
-                        onPressed: () {},
-                        icon: const Icon(
-                          Icons.settings_outlined,
-                          size: 26,
-                          color: Color.fromRGBO(255, 255, 255, .55),
-                        )),
                     const SizedBox(
-                      width: 15,
+                      width: 8,
-                    )
+                    ),
-                  ]
+                    Material(
-                ],
+                      color: Colors.transparent,
-              ),
+                      shape: const CircleBorder(),
-              const SizedBox(
+                      clipBehavior: Clip.hardEdge,
-                height: 40,
+                      child: IconButton(
-              ),
+                        icon: const Icon(Icons.menu),
-              Expanded(
+                        iconSize: 28,
-                  child: ListView(
+                        color: const Color(0xffcfcfcf),
-                children: [
+                        onPressed: () {
-                  DrawerItem(
+                          collapsed
-                      dta: ItemData("All Notes", Icons.book),
+                              ? controller.forward()
-                      collapsed: collapsed,
+                              : controller.reverse();
-                      active: widget.activePage == View.all,
+                          setState(() => collapsed = !collapsed);
-                      onTap: () => widget.onPageChange(View.all)),
+                        },
-                  DrawerItem(
+                      ),
-                      dta: ItemData("Shared Notebooks", Icons.person_outline),
+                    ),
-                      collapsed: collapsed,
+                    if (!collapsed) ...[
-                      active: widget.activePage == View.shared,
+                      const Expanded(child: SizedBox()),
-                      onTap: () => widget.onPageChange(View.shared)),
+                      Material(
-                  DrawerItem(
+                        color: Colors.transparent,
-                      dta: ItemData("Recycle bin", CupertinoIcons.trash),
+                        shape: const CircleBorder(),
-                      collapsed: collapsed,
+                        clipBehavior: Clip.hardEdge,
-                      active: widget.activePage == View.recycle,
+                        child: IconButton(
-                      onTap: () => widget.onPageChange(View.recycle)),
+                          icon: const Icon(Icons.settings_outlined),
-                  DrawerItem(
+                          iconSize: 26,
-                      dta: ItemData("Folders", Icons.folder_outlined),
+                          color: const Color(0xffa8a8a8),
-                      collapsed: collapsed,
+                          onPressed: () {},
-                      active: widget.activePage == View.folders,
+                        ),
-                      onTap: () => widget.onPageChange(View.folders)),
+                      ),
-                ],
+                      const SizedBox(
-              )),
+                        width: 15,
-            ],
+                      )
+                    ]
+                  ],
+                ),
+                const SizedBox(
+                  height: 40,
+                ),
+                Expanded(
+                    child: ListView(
+                  children: [
+                    DrawerItem(
+                        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),
+                        collapsed: collapsed,
+                        active: widget.activePage == View.shared,
+                        onTap: () => widget.onPageChange(View.shared)),
+                    DrawerItem(
+                        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),
+                        collapsed: collapsed,
+                        active: widget.activePage == View.folders,
+                        onTap: () => widget.onPageChange(View.folders)),
+                  ],
+                )),
+              ],
+            ),
           ),
         ),
       ),

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,
@@ -70,4 +72,4 @@ class ItemData {
   String toString() {
     return 'ItemData{name: $name, icon: $icon}';
   }
-}
+}

lib/main.dart

@@ -38,16 +38,23 @@ 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) =>
+            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(),
+            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')
+        ],
+      ),
+    );
+  }
+}