From 80270e219f6f513a76f4c584d0630e4ff2081d28 Mon Sep 17 00:00:00 2001 From: aslight0013 Date: Tue, 4 May 2021 08:29:31 +0600 Subject: [PATCH] half done --- lib/screens/dashboard/components/chart.dart | 79 ++++++++++++++++ lib/screens/dashboard/components/header.dart | 93 ++++++++++++++++++ .../dashboard/components/storage_details.dart | 60 ++++++++++++ .../components/storage_info_card.dart | 63 +++++++++++++ lib/screens/dashboard/dashboard_screen.dart | 39 ++++++++ lib/screens/main/components/side_menu.dart | 94 +++++++++++++++++++ lib/screens/main/main_screen.dart | 24 ++++- 7 files changed, 451 insertions(+), 1 deletion(-) create mode 100644 lib/screens/dashboard/components/chart.dart create mode 100644 lib/screens/dashboard/components/header.dart create mode 100644 lib/screens/dashboard/components/storage_details.dart create mode 100644 lib/screens/dashboard/components/storage_info_card.dart create mode 100644 lib/screens/dashboard/dashboard_screen.dart create mode 100644 lib/screens/main/components/side_menu.dart diff --git a/lib/screens/dashboard/components/chart.dart b/lib/screens/dashboard/components/chart.dart new file mode 100644 index 0000000..6b931b0 --- /dev/null +++ b/lib/screens/dashboard/components/chart.dart @@ -0,0 +1,79 @@ +import 'package:fl_chart/fl_chart.dart'; +import 'package:flutter/material.dart'; + +import '../../../constants.dart'; + +class Chart extends StatelessWidget { + const Chart({ + Key key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return SizedBox( + height: 200, + child: Stack( + children: [ + PieChart( + PieChartData( + sectionsSpace: 0, + centerSpaceRadius: 70, + startDegreeOffset: -90, + sections: paiChartSelectionDatas, + ), + ), + Positioned.fill( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox(height: defaultPadding), + Text( + "29.1", + style: Theme.of(context).textTheme.headline4.copyWith( + color: Colors.white, + fontWeight: FontWeight.w600, + height: 0.5, + ), + ), + Text("of 128GB") + ], + ), + ), + ], + ), + ); + } +} + +List paiChartSelectionDatas = [ + PieChartSectionData( + color: primaryColor, + value: 25, + showTitle: false, + radius: 25, + ), + PieChartSectionData( + color: Color(0xFF26E5FF), + value: 20, + showTitle: false, + radius: 22, + ), + PieChartSectionData( + color: Color(0xFFFFCF26), + value: 10, + showTitle: false, + radius: 19, + ), + PieChartSectionData( + color: Color(0xFFEE2727), + value: 15, + showTitle: false, + radius: 16, + ), + PieChartSectionData( + color: primaryColor.withOpacity(0.1), + value: 25, + showTitle: false, + radius: 13, + ), +]; diff --git a/lib/screens/dashboard/components/header.dart b/lib/screens/dashboard/components/header.dart new file mode 100644 index 0000000..890f10e --- /dev/null +++ b/lib/screens/dashboard/components/header.dart @@ -0,0 +1,93 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +import '../../../constants.dart'; + +class Header extends StatelessWidget { + const Header({ + Key key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Row( + children: [ + Text( + "Dashboard", + style: Theme.of(context).textTheme.headline6, + ), + Spacer(flex: 2), + Expanded(child: SearchField()), + ProfileCard() + ], + ); + } +} + +class ProfileCard extends StatelessWidget { + const ProfileCard({ + Key key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(left: defaultPadding), + padding: EdgeInsets.symmetric( + horizontal: defaultPadding, + vertical: defaultPadding / 2, + ), + decoration: BoxDecoration( + color: secondaryColor, + borderRadius: const BorderRadius.all(Radius.circular(10)), + border: Border.all(color: Colors.white10), + ), + child: Row( + children: [ + Image.asset( + "assets/images/profile_pic.png", + height: 38, + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: defaultPadding / 2), + child: Text("Angelina Joli"), + ), + Icon(Icons.keyboard_arrow_down), + ], + ), + ); + } +} + +class SearchField extends StatelessWidget { + const SearchField({ + Key key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return TextField( + decoration: InputDecoration( + hintText: "Search", + fillColor: secondaryColor, + filled: true, + border: OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: const BorderRadius.all(Radius.circular(10)), + ), + suffixIcon: InkWell( + onTap: () {}, + child: Container( + padding: EdgeInsets.all(defaultPadding * 0.75), + margin: EdgeInsets.symmetric(horizontal: defaultPadding / 2), + decoration: BoxDecoration( + color: primaryColor, + borderRadius: const BorderRadius.all(Radius.circular(10)), + ), + child: SvgPicture.asset("assets/icons/Search.svg"), + ), + ), + ), + ); + } +} diff --git a/lib/screens/dashboard/components/storage_details.dart b/lib/screens/dashboard/components/storage_details.dart new file mode 100644 index 0000000..d19b09b --- /dev/null +++ b/lib/screens/dashboard/components/storage_details.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; + +import '../../../constants.dart'; +import 'chart.dart'; +import 'storage_info_card.dart'; + +class StarageDetails extends StatelessWidget { + const StarageDetails({ + Key key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.all(defaultPadding), + decoration: BoxDecoration( + color: secondaryColor, + borderRadius: const BorderRadius.all(Radius.circular(10)), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Storage Details", + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.w500, + ), + ), + SizedBox(height: defaultPadding), + Chart(), + StorageInfoCard( + svgSrc: "assets/icons/Documents.svg", + title: "Documents Files", + amountOfFiles: "1.3GB", + numOfFiles: 1328, + ), + StorageInfoCard( + svgSrc: "assets/icons/media.svg", + title: "Media Files", + amountOfFiles: "15.3GB", + numOfFiles: 1328, + ), + StorageInfoCard( + svgSrc: "assets/icons/folder.svg", + title: "Other Files", + amountOfFiles: "1.3GB", + numOfFiles: 1328, + ), + StorageInfoCard( + svgSrc: "assets/icons/unknown.svg", + title: "Unknown", + amountOfFiles: "1.3GB", + numOfFiles: 140, + ), + ], + ), + ); + } +} diff --git a/lib/screens/dashboard/components/storage_info_card.dart b/lib/screens/dashboard/components/storage_info_card.dart new file mode 100644 index 0000000..23682b9 --- /dev/null +++ b/lib/screens/dashboard/components/storage_info_card.dart @@ -0,0 +1,63 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +import '../../../constants.dart'; + +class StorageInfoCard extends StatelessWidget { + const StorageInfoCard({ + Key key, + @required this.title, + @required this.svgSrc, + @required this.amountOfFiles, + @required this.numOfFiles, + }) : super(key: key); + + final String title, svgSrc, amountOfFiles; + final int numOfFiles; + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(top: defaultPadding), + padding: EdgeInsets.all(defaultPadding), + decoration: BoxDecoration( + border: Border.all(width: 2, color: primaryColor.withOpacity(0.15)), + borderRadius: const BorderRadius.all( + Radius.circular(defaultPadding), + ), + ), + child: Row( + children: [ + SizedBox( + height: 20, + width: 20, + child: SvgPicture.asset(svgSrc), + ), + Expanded( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: defaultPadding), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + title, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + Text( + "$numOfFiles Files", + style: Theme.of(context) + .textTheme + .caption + .copyWith(color: Colors.white70), + ), + ], + ), + ), + ), + Text(amountOfFiles) + ], + ), + ); + } +} diff --git a/lib/screens/dashboard/dashboard_screen.dart b/lib/screens/dashboard/dashboard_screen.dart new file mode 100644 index 0000000..a780e77 --- /dev/null +++ b/lib/screens/dashboard/dashboard_screen.dart @@ -0,0 +1,39 @@ +import 'package:flutter/material.dart'; + +import '../../constants.dart'; +import 'components/header.dart'; +import 'components/storage_details.dart'; + +class DashboardScreen extends StatelessWidget { + @override + Widget build(BuildContext context) { + return SafeArea( + child: SingleChildScrollView( + padding: EdgeInsets.all(defaultPadding), + child: Column( + children: [ + Header(), + SizedBox(height: defaultPadding), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + flex: 5, + child: Container( + height: 500, + color: Colors.white, + ), + ), + SizedBox(width: defaultPadding), + Expanded( + flex: 2, + child: StarageDetails(), + ), + ], + ) + ], + ), + ), + ); + } +} diff --git a/lib/screens/main/components/side_menu.dart b/lib/screens/main/components/side_menu.dart new file mode 100644 index 0000000..b8fea0c --- /dev/null +++ b/lib/screens/main/components/side_menu.dart @@ -0,0 +1,94 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +class SideMenu extends StatelessWidget { + const SideMenu({ + Key key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Drawer( + child: SingleChildScrollView( + // it enables scrolling + child: Column( + children: [ + DrawerHeader( + child: Image.asset("assets/images/logo.png"), + ), + DrawerListTile( + title: "Dashbord", + svgSrc: "assets/icons/menu_dashbord.svg", + press: () {}, + ), + DrawerListTile( + title: "Transaction", + svgSrc: "assets/icons/menu_tran.svg", + press: () {}, + ), + DrawerListTile( + title: "Task", + svgSrc: "assets/icons/menu_task.svg", + press: () {}, + ), + DrawerListTile( + title: "Documents", + svgSrc: "assets/icons/menu_doc.svg", + press: () {}, + ), + DrawerListTile( + title: "Store", + svgSrc: "assets/icons/menu_store.svg", + press: () {}, + ), + DrawerListTile( + title: "Notification", + svgSrc: "assets/icons/menu_notification.svg", + press: () {}, + ), + DrawerListTile( + title: "Profile", + svgSrc: "assets/icons/menu_profile.svg", + press: () {}, + ), + DrawerListTile( + title: "Settings", + svgSrc: "assets/icons/menu_setting.svg", + press: () {}, + ), + ], + ), + ), + ); + } +} + +class DrawerListTile extends StatelessWidget { + const DrawerListTile({ + Key key, + // For selecting those three line once press "Command+D" + @required this.title, + @required this.svgSrc, + @required this.press, + }) : super(key: key); + + final String title, svgSrc; + final VoidCallback press; + + @override + Widget build(BuildContext context) { + return ListTile( + onTap: press, + horizontalTitleGap: 0.0, + leading: SvgPicture.asset( + svgSrc, + color: Colors.white54, + height: 16, + ), + title: Text( + title, + style: TextStyle(color: Colors.white54), + ), + ); + } +} diff --git a/lib/screens/main/main_screen.dart b/lib/screens/main/main_screen.dart index 077f98d..709c740 100644 --- a/lib/screens/main/main_screen.dart +++ b/lib/screens/main/main_screen.dart @@ -1,8 +1,30 @@ +import 'package:admin/screens/dashboard/dashboard_screen.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; + +import 'components/side_menu.dart'; class MainScreen extends StatelessWidget { @override Widget build(BuildContext context) { - return Scaffold(); + return Scaffold( + body: SafeArea( + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + // default flex = 1 + // and it takes 1/6 part of the screen + child: SideMenu(), + ), + Expanded( + // It takes 5/6 part of the screen + flex: 5, + child: DashboardScreen(), + ), + ], + ), + ), + ); } }