From 8e4ab7ffdd5396aa4c03ba1fedbbd31db171e2e0 Mon Sep 17 00:00:00 2001 From: amit-k-umar <61649790+amit-k-umar@users.noreply.github.com> Date: Fri, 2 Oct 2020 13:17:30 +0530 Subject: [PATCH 1/2] make doc page --- notes/assets/icons/folder.png | Bin 0 -> 3039 bytes notes/lib/components/folderCard.dart | 56 ++++++++++++ notes/lib/constants/image_constants.dart | 1 + notes/lib/model/folderData.dart | 6 ++ notes/lib/routes/documents.dart | 104 ++++++++++++++++++++++- 5 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 notes/assets/icons/folder.png create mode 100644 notes/lib/components/folderCard.dart create mode 100644 notes/lib/model/folderData.dart diff --git a/notes/assets/icons/folder.png b/notes/assets/icons/folder.png new file mode 100644 index 0000000000000000000000000000000000000000..daca38f320c900472df830ee6c70c222a85f5c16 GIT binary patch literal 3039 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 literal 0 HcmV?d00001 diff --git a/notes/lib/components/folderCard.dart b/notes/lib/components/folderCard.dart new file mode 100644 index 0000000..58227db --- /dev/null +++ b/notes/lib/components/folderCard.dart @@ -0,0 +1,56 @@ +import 'package:flutter/material.dart'; +import 'package:notes/constants/image_constants.dart'; +import 'package:notes/model/folderData.dart'; +class FolderCard extends StatelessWidget { + FolderCard({ this.data,this.isList}) ; + final bool isList; + final FolderData data; + + @override + Widget build(BuildContext context) { + return Card( + elevation:8, + + child: Flex( + direction: Axis.vertical, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + + children: [ + Image.asset(ImageConstants.kFolder, width: 100,height: 80,), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + SizedBox(width: 2,height: 2,), + + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + + Text( + data.title, + + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, + + ), + ), + Text( + data.date, + style: TextStyle( + fontSize: 14, + + ), + ) + ], + ), + Icon( + Icons.more_vert + ) + ], + ) + ], + ), + ); + } +} diff --git a/notes/lib/constants/image_constants.dart b/notes/lib/constants/image_constants.dart index c51a916..c9a9a64 100644 --- a/notes/lib/constants/image_constants.dart +++ b/notes/lib/constants/image_constants.dart @@ -15,5 +15,6 @@ class ImageConstants { static String kReportIssue='assets/icons/new_releases-24px.png'; static String kPrivacy='assets/icons/privacy_tip-24px.png'; static String kUpdate='assets/icons/system_update-24px.png'; + static String kFolder='assets/icons/folder.png'; } diff --git a/notes/lib/model/folderData.dart b/notes/lib/model/folderData.dart new file mode 100644 index 0000000..8fa6e88 --- /dev/null +++ b/notes/lib/model/folderData.dart @@ -0,0 +1,6 @@ +class FolderData { + String title; + String date; + + FolderData({this.title, this.date}); +} \ No newline at end of file diff --git a/notes/lib/routes/documents.dart b/notes/lib/routes/documents.dart index c155f23..5186f8a 100644 --- a/notes/lib/routes/documents.dart +++ b/notes/lib/routes/documents.dart @@ -1,14 +1,114 @@ import 'package:flutter/material.dart'; +import 'package:notes/components/folderCard.dart'; +import 'package:notes/components/header.dart'; +import 'package:notes/constants/text_style_constants.dart'; +import 'package:notes/model/folderData.dart'; class Documents extends StatefulWidget { @override _DocumentsState createState() => _DocumentsState(); } class _DocumentsState extends State { + List _list=[]; + bool isList=true;// to check list view or grid view + @override + void initState() { + // TODO: implement initState + super.initState(); + + + List data=[ + FolderData(title:'Open source',date: '8 sep 2019'), + FolderData(title:'Open source',date: '15 sep 2019'), + FolderData(title:'Open source',date: '7 sep 2019'), + FolderData(title:'Open source',date: '9 sep 2019'), + FolderData(title:'Open source',date: '10 sep 2019'), + + ];// sample data + data.forEach((element) { _list.add(element);});// updating _list + + + } @override Widget build(BuildContext context) { - return Container( - child: Text('document'), + return Scaffold( + appBar: header( + Text('ACCOUNT', style: TextStyleConstants.kAppbarTextStyle), + SizedBox(width: 2,) + ), + body: Padding( + padding: const EdgeInsets.only(left: 27,right: 27,top: 10), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + + children: [ + Text( + 'Subject (${_list.length})', + style: TextStyle( + fontSize: 25, + color: Colors.black, + fontWeight: FontWeight.w800, + fontFamily: 'Manrope' + + ), + ), + Row( + children: [ + Container( + padding: EdgeInsets.all(5), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(5)), + color: isList?Color(0xFFb56eff):Colors.white + + + + ), + child: Icon( + Icons.view_agenda, + size: 25, + color: isList?Colors.white: Color(0xff67349C), + ), + ), + SizedBox( + width: 5.0 + ), + Container( + padding: EdgeInsets.all(5), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(5)), + color: !isList?Color(0xFFb56eff):Colors.white + + + + ), + child: Icon( + Icons.view_module, + size: 25, + color: !isList?Colors.white: Color(0xff67349C), + ), + ), + ], + ) + ], + ), + SizedBox(height: 10,), + Flexible( + child: new GridView.count( + crossAxisCount: 2, + childAspectRatio: 1.0, + padding: const EdgeInsets.all(4.0), + mainAxisSpacing: 6.0, + crossAxisSpacing: 6.0, + children: _list.map((e) => FolderCard(isList: isList,data: e,)).toList(), + ), + ), + ]), + ) + + ); } } + From acecbecb3bc0fd31e8a56a55540bdb0ef03520a5 Mon Sep 17 00:00:00 2001 From: amit-k-umar <61649790+amit-k-umar@users.noreply.github.com> Date: Sat, 3 Oct 2020 13:36:20 +0530 Subject: [PATCH 2/2] make doc page more closer to UI and functional --- notes/lib/components/folderCard.dart | 85 +++++++++++++++++++--------- notes/lib/routes/documents.dart | 74 +++++++++++++----------- 2 files changed, 99 insertions(+), 60 deletions(-) diff --git a/notes/lib/components/folderCard.dart b/notes/lib/components/folderCard.dart index 58227db..48a2452 100644 --- a/notes/lib/components/folderCard.dart +++ b/notes/lib/components/folderCard.dart @@ -5,49 +5,78 @@ class FolderCard extends StatelessWidget { FolderCard({ this.data,this.isList}) ; final bool isList; final FolderData data; + final String str='Updated on : '; + + @override Widget build(BuildContext context) { + return Card( elevation:8, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(isList?12:6))), child: Flex( - direction: Axis.vertical, - mainAxisAlignment: MainAxisAlignment.spaceEvenly, + direction: isList?Axis.horizontal: Axis.vertical, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisSize: MainAxisSize.max, + + children: [ - Image.asset(ImageConstants.kFolder, width: 100,height: 80,), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - SizedBox(width: 2,height: 2,), + if(!isList)SizedBox(height: 5,width: 4,), + if(!isList)Image.asset(ImageConstants.kFolder,height: isList? 40: 80,), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ + Container( + color: isList? Colors.white:Color(0xffE6E6E6), + width: MediaQuery.of(context).size.width-50, - Text( - data.title, - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, + height: 54, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisSize: MainAxisSize.max, + + children: [ + SizedBox(width: 4,), + if(isList)Image.asset(ImageConstants.kFolder,height: 32,), - ), - ), - Text( - data.date, - style: TextStyle( - fontSize: 14, + + + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + + Text( + data.title, + + style: TextStyle( + fontSize: isList?22:18, + fontWeight: FontWeight.bold, + + ), ), - ) - ], - ), - Icon( - Icons.more_vert - ) - ], + Text( + isList?str+data.date:data.date, + style: TextStyle( + fontSize: 14, + color: Colors.grey[700] + + ), + ) + ], + ), + SizedBox(width: 2,), + SizedBox(width: 2,), + + Icon( + Icons.more_vert, + color: Color(0xffDE6FA1), + ) + ], + ), ) ], ), diff --git a/notes/lib/routes/documents.dart b/notes/lib/routes/documents.dart index 5186f8a..f7cd4ff 100644 --- a/notes/lib/routes/documents.dart +++ b/notes/lib/routes/documents.dart @@ -33,11 +33,11 @@ class _DocumentsState extends State { Widget build(BuildContext context) { return Scaffold( appBar: header( - Text('ACCOUNT', style: TextStyleConstants.kAppbarTextStyle), + Text('DOCUMENT', style: TextStyleConstants.kAppbarTextStyle), SizedBox(width: 2,) ), body: Padding( - padding: const EdgeInsets.only(left: 27,right: 27,top: 10), + padding: const EdgeInsets.only(left: 17,right: 17,top: 10), child: Column( children: [ Row( @@ -45,48 +45,58 @@ class _DocumentsState extends State { children: [ Text( - 'Subject (${_list.length})', + 'SUBJECT (${_list.length})', style: TextStyle( fontSize: 25, color: Colors.black, - fontWeight: FontWeight.w800, + fontWeight: FontWeight.w500, fontFamily: 'Manrope' ), ), Row( children: [ - Container( - padding: EdgeInsets.all(5), - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(5)), - color: isList?Color(0xFFb56eff):Colors.white - - - - ), - child: Icon( - Icons.view_agenda, - size: 25, - color: isList?Colors.white: Color(0xff67349C), + GestureDetector( + onTap:(){ if(!isList){setState(() { + isList=true; + });}}, + child: Container( + padding: EdgeInsets.all(5), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10)), + color: isList?Color(0xFFb56eff):Colors.white + + + + ), + child: Icon( + Icons.view_agenda, + size: 25, + color: isList?Colors.white: Color(0xff67349C), + ), ), ), SizedBox( width: 5.0 ), - Container( - padding: EdgeInsets.all(5), - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(5)), - color: !isList?Color(0xFFb56eff):Colors.white - - - - ), - child: Icon( - Icons.view_module, - size: 25, - color: !isList?Colors.white: Color(0xff67349C), + GestureDetector( + onTap: (){ if(isList){setState(() { + isList=false; + });}}, + child: Container( + padding: EdgeInsets.all(5), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10)), + color: !isList?Color(0xFFb56eff):Colors.white + + + + ), + child: Icon( + Icons.view_module, + size: 25, + color: !isList?Colors.white: Color(0xff67349C), + ), ), ), ], @@ -96,8 +106,8 @@ class _DocumentsState extends State { SizedBox(height: 10,), Flexible( child: new GridView.count( - crossAxisCount: 2, - childAspectRatio: 1.0, + crossAxisCount: isList?1:2, + childAspectRatio: isList?3.5:1.0, padding: const EdgeInsets.all(4.0), mainAxisSpacing: 6.0, crossAxisSpacing: 6.0,