use fixed color values

add material animation to menu button
add draft of preview pages
This commit is contained in:
lukas-heiligenbrunner 2022-10-23 17:57:59 +02:00
parent e71f891e5d
commit 0a987facc8
5 changed files with 175 additions and 96 deletions

View File

@ -2,12 +2,12 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:notes/drawer_item.dart'; import 'package:notes/drawer_item.dart';
enum View { enum View { all, shared, recycle, folders }
all, shared, recycle, folders
}
class CollapseDrawer extends StatefulWidget { 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 void Function(View newPage) onPageChange;
final View activePage; final View activePage;
@ -36,78 +36,92 @@ class _CollapseDrawerState extends State<CollapseDrawer>
@override @override
Widget build(BuildContext context) { 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( 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)),
],
)),
],
),
), ),
), ),
), ),

View File

@ -1,4 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:notes/note_tile.dart';
class AllNotesPage extends StatefulWidget { class AllNotesPage extends StatefulWidget {
const AllNotesPage({Key? key}) : super(key: key); const AllNotesPage({Key? key}) : super(key: key);
@ -21,7 +22,7 @@ class _AllNotesPageState extends State<AllNotesPage> {
width: 20, width: 20,
), ),
const Text( const Text(
"All notes", 'All notes',
style: TextStyle( style: TextStyle(
color: Color.fromRGBO(255, 255, 255, .85), fontSize: 22), 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,
),
);
}
} }

View File

@ -1,10 +1,13 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'CollapseDrawer.dart';
class DrawerItem extends StatelessWidget { class DrawerItem extends StatelessWidget {
const DrawerItem( 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); : super(key: key);
final ItemData dta; final ItemData dta;
final String? endText; final String? endText;
@ -21,15 +24,16 @@ class DrawerItem extends StatelessWidget {
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
child: Container( child: Container(
color: active ? const Color.fromRGBO(255,255,255,.25) : Colors.transparent, color: active ? const Color(0xff6e6e6e) : Colors.transparent,
child: Padding( 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( child: Row(
children: [ children: [
Icon( Icon(
dta.icon, dta.icon,
size: 26, size: 26,
color: const Color.fromRGBO(255, 255, 255, .75), color: const Color(0xffdbdbdb),
), ),
if (!collapsed) ...[ if (!collapsed) ...[
const SizedBox( const SizedBox(
@ -37,14 +41,12 @@ class DrawerItem extends StatelessWidget {
), ),
Text( Text(
dta.name, dta.name,
style: style: const TextStyle(color: Color(0xffe9e9e9)),
const TextStyle(color: Color.fromRGBO(255, 255, 255, .85)),
), ),
Expanded(child: Container()), Expanded(child: Container()),
Text( Text(
endText ?? "", endText ?? '',
style: style: const TextStyle(color: Color(0xffafafaf)),
const TextStyle(color: Color.fromRGBO(255, 255, 255, .45)),
), ),
const SizedBox( const SizedBox(
width: 15, width: 15,
@ -70,4 +72,4 @@ class ItemData {
String toString() { String toString() {
return 'ItemData{name: $name, icon: $icon}'; return 'ItemData{name: $name, icon: $icon}';
} }
} }

View File

@ -38,16 +38,23 @@ class _MyHomePageState extends State<MyHomePage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff3f3f3f),
child:
const Icon(Icons.edit_calendar_outlined, color: Colors.orange)),
body: Row( body: Row(
children: [ children: [
CollapseDrawer( CollapseDrawer(
onPageChange: (View newPage) => onPageChange: (View newPage) =>
setState(() => activePage = newPage), activePage: activePage,), setState(() => activePage = newPage),
activePage: activePage,
),
Expanded( Expanded(
child: Container( 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: case View.all:
return const AllNotesPage(); return const AllNotesPage();
case View.shared: case View.shared:
return const Text("Todo1", style: TextStyle(color: Colors.white),); return const Text(
'Todo1',
style: TextStyle(color: Colors.white),
);
case View.recycle: case View.recycle:
return const Text("Todo", style: TextStyle(color: Colors.white),); return const Text(
'Todo',
style: TextStyle(color: Colors.white),
);
case View.folders: case View.folders:
return const Text("Todo", style: TextStyle(color: Colors.white),); return const Text(
'Todo',
style: TextStyle(color: Colors.white),
);
} }
} }
} }

29
lib/note_tile.dart Normal file
View File

@ -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')
],
),
);
}
}