From 0a987facc8ea3fd3a53a21794d3374830a79348b Mon Sep 17 00:00:00 2001 From: lukas-heiligenbrunner Date: Sun, 23 Oct 2022 17:57:59 +0200 Subject: [PATCH] use fixed color values add material animation to menu button add draft of preview pages --- lib/CollapseDrawer.dart | 164 ++++++++++++++++++++++------------------ lib/all_notes_page.dart | 20 ++++- lib/drawer_item.dart | 26 ++++--- lib/main.dart | 32 ++++++-- lib/note_tile.dart | 29 +++++++ 5 files changed, 175 insertions(+), 96 deletions(-) create mode 100644 lib/note_tile.dart diff --git a/lib/CollapseDrawer.dart b/lib/CollapseDrawer.dart index 66d733e..1402b35 100644 --- a/lib/CollapseDrawer.dart +++ b/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 { - all, shared, recycle, folders -} +enum View { 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 @override Widget build(BuildContext context) { - return ClipRRect( - borderRadius: const BorderRadius.only( - topRight: Radius.circular(10), bottomRight: Radius.circular(10)), - child: Container( - color: const Color.fromRGBO(0, 0, 0, .75), - child: ConstrainedBox( - constraints: BoxConstraints.expand(width: collapseAnimation.value), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - const SizedBox( - height: 10, - ), - Row( - children: [ - const SizedBox( - width: 8, - ), - 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), - )), + 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(0xff3f3f3f), + child: ConstrainedBox( + constraints: BoxConstraints.expand(width: collapseAnimation.value), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + const SizedBox( + height: 10, + ), + Row( + children: [ const SizedBox( - width: 15, - ) - ] - ], - ), - const SizedBox( - height: 40, - ), - Expanded( - child: ListView( - children: [ - DrawerItem( - dta: ItemData("All Notes", Icons.book), - collapsed: collapsed, - 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)), - ], - )), - ], + width: 8, + ), + 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(); + setState(() => collapsed = !collapsed); + }, + ), + ), + if (!collapsed) ...[ + const Expanded(child: SizedBox()), + 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: () {}, + ), + ), + 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)), + ], + )), + ], + ), ), ), ), diff --git a/lib/all_notes_page.dart b/lib/all_notes_page.dart index 6507464..6669839 100644 --- a/lib/all_notes_page.dart +++ b/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 { 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 { ) ], ), + 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, + ), + ); + } } diff --git a/lib/drawer_item.dart b/lib/drawer_item.dart index 8d137ca..758b90f 100644 --- a/lib/drawer_item.dart +++ b/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: - const TextStyle(color: Color.fromRGBO(255, 255, 255, .85)), + style: const TextStyle(color: Color(0xffe9e9e9)), ), Expanded(child: Container()), Text( - endText ?? "", - style: - const TextStyle(color: Color.fromRGBO(255, 255, 255, .45)), + endText ?? '', + style: const TextStyle(color: Color(0xffafafaf)), ), const SizedBox( width: 15, @@ -70,4 +72,4 @@ class ItemData { String toString() { return 'ItemData{name: $name, icon: $icon}'; } -} \ No newline at end of file +} diff --git a/lib/main.dart b/lib/main.dart index 85da859..82d5081 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -38,16 +38,23 @@ class _MyHomePageState extends State { @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,), + onPageChange: (View newPage) => + setState(() => activePage = newPage), + activePage: activePage, + ), Expanded( child: Container( - color: const Color.fromRGBO(0, 0, 0, .95), - child: _buildPage(), - )) + color: const Color(0xff0d0d0d), + child: _buildPage(), + )) ], ), ); @@ -58,11 +65,20 @@ class _MyHomePageState extends State { 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), + ); } } } diff --git a/lib/note_tile.dart b/lib/note_tile.dart new file mode 100644 index 0000000..1e4a745 --- /dev/null +++ b/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') + ], + ), + ); + } +}