From 8e7456021ae504c6ce4249fa49dad93c60145851 Mon Sep 17 00:00:00 2001 From: MarcioQuimbundo Date: Sun, 5 Jul 2020 12:10:17 +0100 Subject: [PATCH] refactoring the code --- .../lib/src/ui/home/home_page.dart | 253 +----------------- .../ui/home/widgets/bottom_video_clipper.dart | 27 ++ .../src/ui/home/widgets/menu_dark_tile.dart | 41 +++ .../home/widgets/notification_top_menu.dart | 32 +++ .../ui/home/widgets/photo_user_meeting.dart | 35 +++ .../widgets/user_photo_border_gradient.dart | 53 ++++ .../widgets/workspace_selection_card.dart | 58 ++++ 7 files changed, 256 insertions(+), 243 deletions(-) create mode 100644 zoom_desktop_flutter/lib/src/ui/home/widgets/bottom_video_clipper.dart create mode 100644 zoom_desktop_flutter/lib/src/ui/home/widgets/menu_dark_tile.dart create mode 100644 zoom_desktop_flutter/lib/src/ui/home/widgets/notification_top_menu.dart create mode 100644 zoom_desktop_flutter/lib/src/ui/home/widgets/photo_user_meeting.dart create mode 100644 zoom_desktop_flutter/lib/src/ui/home/widgets/user_photo_border_gradient.dart create mode 100644 zoom_desktop_flutter/lib/src/ui/home/widgets/workspace_selection_card.dart diff --git a/zoom_desktop_flutter/lib/src/ui/home/home_page.dart b/zoom_desktop_flutter/lib/src/ui/home/home_page.dart index 20bd4c4..e42a2e4 100644 --- a/zoom_desktop_flutter/lib/src/ui/home/home_page.dart +++ b/zoom_desktop_flutter/lib/src/ui/home/home_page.dart @@ -1,12 +1,16 @@ -import 'dart:math'; - import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter_reaction_button/flutter_reaction_button.dart'; -import 'package:zoom_desktop_flutter/src/cons/global_const.dart'; -import 'package:zoom_desktop_flutter/src/data/reaction_video_data.dart'; -import 'package:zoom_desktop_flutter/src/ui/home/widgets/profile_photo.dart'; -import 'package:zoom_desktop_flutter/src/ui/home/widgets/sprite_painter.dart'; +import '../../cons/global_const.dart'; +import '../../data/reaction_video_data.dart'; +import '../../ui/home/widgets/profile_photo.dart'; +import '../../ui/home/widgets/sprite_painter.dart'; +import 'widgets/menu_dark_tile.dart'; +import 'widgets/user_photo_border_gradient.dart'; +import 'widgets/bottom_video_clipper.dart'; +import 'widgets/notification_top_menu.dart'; +import 'widgets/workspace_selection_card.dart'; +import 'widgets/photo_user_meeting.dart'; class HomePage extends StatefulWidget { @override @@ -839,240 +843,3 @@ class _HomePageState extends State ); } } - -class WorkSpaceSelectionCard extends StatelessWidget { - final bool isActive; - final Function onTap; - final String image; - WorkSpaceSelectionCard({this.isActive = false, this.onTap, this.image}); - - @override - Widget build(BuildContext context) { - return GestureDetector( - onTap: onTap, - child: Stack( - children: [ - Center( - child: MouseRegion( - cursor: SystemMouseCursors.click, - child: Container( - width: 60, - height: 60, - margin: EdgeInsets.only(top: 10), - decoration: BoxDecoration( - boxShadow: [ - BoxShadow( - color: Colors.black38, - blurRadius: 15.0, - offset: Offset(0.0, 0.75)) - ], - image: DecorationImage( - image: NetworkImage( - image, - ), - fit: BoxFit.cover), - borderRadius: BorderRadius.all(Radius.circular(10))), - ), - ), - ), - isActive - ? Positioned( - top: 30, - child: Container( - height: 20, - width: 6, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.only( - bottomRight: Radius.circular(5), - topRight: Radius.circular(5), - )), - ), - ) - : Container() - ], - ), - ); - } -} - -class PhotoUserMeeting extends StatelessWidget { - final String image; - final String name; - PhotoUserMeeting({this.image, this.name}); - - @override - Widget build(BuildContext context) { - return Container( - margin: EdgeInsets.only(left: 10), - child: Column( - children: [ - Container( - height: 110, - width: 100, - decoration: BoxDecoration( - color: Colors.transparent, - image: DecorationImage( - image: NetworkImage(image), fit: BoxFit.cover), - border: Border.all(color: Colors.white, width: 3), - borderRadius: BorderRadius.circular(6)), - ), - SizedBox( - height: 5, - ), - Text( - name ?? "", - style: TextStyle(color: Colors.white), - ) - ], - ), - ); - } -} - -class BottomVideoClipper extends CustomClipper { - @override - Path getClip(Size size) { - var path = Path(); - - path.lineTo(0.0, size.height); - - path.lineTo(size.width, size.height); - - path.lineTo(size.width, 0); - - path.lineTo(size.width / 2 + 100, 0); - - path.quadraticBezierTo( - size.width / 2, size.height - 20, size.width / 2 - 100, 0); - - path.close(); - return path; - } - - @override - bool shouldReclip(CustomClipper oldClipper) => false; -} - -class NotificationTopMenu extends StatelessWidget { - final String title; - final Color color; - final IconData icon; - - const NotificationTopMenu({this.title, this.color, this.icon}); - - @override - Widget build(BuildContext context) { - return Container( - margin: EdgeInsets.only(right: 40), - child: Row( - children: [ - Icon( - icon, - color: color, - size: 16, - ), - SizedBox( - width: 5, - ), - Text( - title ?? "", - style: TextStyle(color: color, fontSize: 12), - ) - ], - ), - ); - } -} - -class UserPhotoBorderGradient extends StatelessWidget { - final bool isGradient; - final Color firstColor; - final Color secondColor; - final String photo; - final String name; - UserPhotoBorderGradient( - {this.isGradient, - this.firstColor, - this.secondColor, - this.name, - this.photo}); - - @override - Widget build(BuildContext context) { - return Container( - margin: EdgeInsets.only(bottom: 20), - child: Column( - children: [ - Container( - padding: EdgeInsets.all(2.5), - decoration: BoxDecoration( - gradient: LinearGradient(colors: [ - isGradient ? firstColor : Colors.transparent, - isGradient ? secondColor : Colors.transparent - ]), - borderRadius: BorderRadius.circular(32), - ), - child: Container( - height: 50, - width: 50, - decoration: BoxDecoration( - color: Color(0xFFD6E4ED), - image: DecorationImage( - image: NetworkImage(photo), - ), - borderRadius: BorderRadius.all( - Radius.circular(50), - ), - ), - ), - ), - Text( - name ?? "", - style: TextStyle(color: isGradient ? secondColor : Colors.grey), - ) - ], - ), - ); - } -} - -class MenuDarkTile extends StatelessWidget { - const MenuDarkTile({this.active, this.icon, this.title, this.onTap}); - final bool active; - final IconData icon; - final String title; - final Function onTap; - - @override - Widget build(BuildContext context) { - return GestureDetector( - onTap: onTap, - child: Container( - margin: EdgeInsets.symmetric(vertical: 5, horizontal: 25), - padding: EdgeInsets.only(top: 12, bottom: 12, left: 25), - decoration: BoxDecoration( - color: active ? Color(0xFF0F1736) : Colors.transparent, - borderRadius: BorderRadius.circular(10)), - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Icon( - icon, - color: active ? Color(0xFF37D2F8) : Colors.white24, - size: 18, - ), - SizedBox( - width: 10, - ), - Text( - title ?? "", - style: TextStyle( - color: active ? Colors.white : Colors.white24, fontSize: 12), - ) - ], - ), - ), - ); - } -} diff --git a/zoom_desktop_flutter/lib/src/ui/home/widgets/bottom_video_clipper.dart b/zoom_desktop_flutter/lib/src/ui/home/widgets/bottom_video_clipper.dart new file mode 100644 index 0000000..1a9052e --- /dev/null +++ b/zoom_desktop_flutter/lib/src/ui/home/widgets/bottom_video_clipper.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; + +class BottomVideoClipper extends CustomClipper { + @override + Path getClip(Size size) { + var path = Path(); + + path.lineTo(0.0, size.height); + + path.lineTo(size.width, size.height); + + path.lineTo(size.width, 0); + + path.lineTo(size.width / 2 + 100, 0); + + path.quadraticBezierTo( + size.width / 2, size.height - 20, size.width / 2 - 100, 0); + + path.close(); + return path; + } + + @override + bool shouldReclip(CustomClipper oldClipper) => false; +} + + diff --git a/zoom_desktop_flutter/lib/src/ui/home/widgets/menu_dark_tile.dart b/zoom_desktop_flutter/lib/src/ui/home/widgets/menu_dark_tile.dart new file mode 100644 index 0000000..6811ad6 --- /dev/null +++ b/zoom_desktop_flutter/lib/src/ui/home/widgets/menu_dark_tile.dart @@ -0,0 +1,41 @@ +import 'package:flutter/material.dart'; + +class MenuDarkTile extends StatelessWidget { + const MenuDarkTile({this.active, this.icon, this.title, this.onTap}); + final bool active; + final IconData icon; + final String title; + final Function onTap; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onTap, + child: Container( + margin: EdgeInsets.symmetric(vertical: 5, horizontal: 25), + padding: EdgeInsets.only(top: 12, bottom: 12, left: 25), + decoration: BoxDecoration( + color: active ? Color(0xFF0F1736) : Colors.transparent, + borderRadius: BorderRadius.circular(10)), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Icon( + icon, + color: active ? Color(0xFF37D2F8) : Colors.white24, + size: 18, + ), + SizedBox( + width: 10, + ), + Text( + title ?? "", + style: TextStyle( + color: active ? Colors.white : Colors.white24, fontSize: 12), + ) + ], + ), + ), + ); + } +} \ No newline at end of file diff --git a/zoom_desktop_flutter/lib/src/ui/home/widgets/notification_top_menu.dart b/zoom_desktop_flutter/lib/src/ui/home/widgets/notification_top_menu.dart new file mode 100644 index 0000000..52e365d --- /dev/null +++ b/zoom_desktop_flutter/lib/src/ui/home/widgets/notification_top_menu.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; + +class NotificationTopMenu extends StatelessWidget { + final String title; + final Color color; + final IconData icon; + + const NotificationTopMenu({this.title, this.color, this.icon}); + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(right: 40), + child: Row( + children: [ + Icon( + icon, + color: color, + size: 16, + ), + SizedBox( + width: 5, + ), + Text( + title ?? "", + style: TextStyle(color: color, fontSize: 12), + ) + ], + ), + ); + } +} \ No newline at end of file diff --git a/zoom_desktop_flutter/lib/src/ui/home/widgets/photo_user_meeting.dart b/zoom_desktop_flutter/lib/src/ui/home/widgets/photo_user_meeting.dart new file mode 100644 index 0000000..e331f53 --- /dev/null +++ b/zoom_desktop_flutter/lib/src/ui/home/widgets/photo_user_meeting.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; + +class PhotoUserMeeting extends StatelessWidget { + final String image; + final String name; + PhotoUserMeeting({this.image, this.name}); + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(left: 10), + child: Column( + children: [ + Container( + height: 110, + width: 100, + decoration: BoxDecoration( + color: Colors.transparent, + image: DecorationImage( + image: NetworkImage(image), fit: BoxFit.cover), + border: Border.all(color: Colors.white, width: 3), + borderRadius: BorderRadius.circular(6)), + ), + SizedBox( + height: 5, + ), + Text( + name ?? "", + style: TextStyle(color: Colors.white), + ) + ], + ), + ); + } +} \ No newline at end of file diff --git a/zoom_desktop_flutter/lib/src/ui/home/widgets/user_photo_border_gradient.dart b/zoom_desktop_flutter/lib/src/ui/home/widgets/user_photo_border_gradient.dart new file mode 100644 index 0000000..4a4c622 --- /dev/null +++ b/zoom_desktop_flutter/lib/src/ui/home/widgets/user_photo_border_gradient.dart @@ -0,0 +1,53 @@ +import 'package:flutter/material.dart'; + +class UserPhotoBorderGradient extends StatelessWidget { + final bool isGradient; + final Color firstColor; + final Color secondColor; + final String photo; + final String name; + UserPhotoBorderGradient( + {this.isGradient, + this.firstColor, + this.secondColor, + this.name, + this.photo}); + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(bottom: 20), + child: Column( + children: [ + Container( + padding: EdgeInsets.all(2.5), + decoration: BoxDecoration( + gradient: LinearGradient(colors: [ + isGradient ? firstColor : Colors.transparent, + isGradient ? secondColor : Colors.transparent + ]), + borderRadius: BorderRadius.circular(32), + ), + child: Container( + height: 50, + width: 50, + decoration: BoxDecoration( + color: Color(0xFFD6E4ED), + image: DecorationImage( + image: NetworkImage(photo), + ), + borderRadius: BorderRadius.all( + Radius.circular(50), + ), + ), + ), + ), + Text( + name ?? "", + style: TextStyle(color: isGradient ? secondColor : Colors.grey), + ) + ], + ), + ); + } +} \ No newline at end of file diff --git a/zoom_desktop_flutter/lib/src/ui/home/widgets/workspace_selection_card.dart b/zoom_desktop_flutter/lib/src/ui/home/widgets/workspace_selection_card.dart new file mode 100644 index 0000000..bf7101f --- /dev/null +++ b/zoom_desktop_flutter/lib/src/ui/home/widgets/workspace_selection_card.dart @@ -0,0 +1,58 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; + +class WorkSpaceSelectionCard extends StatelessWidget { + final bool isActive; + final Function onTap; + final String image; + WorkSpaceSelectionCard({this.isActive = false, this.onTap, this.image}); + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onTap, + child: Stack( + children: [ + Center( + child: MouseRegion( + cursor: SystemMouseCursors.click, + child: Container( + width: 60, + height: 60, + margin: EdgeInsets.only(top: 10), + decoration: BoxDecoration( + boxShadow: [ + BoxShadow( + color: Colors.black38, + blurRadius: 15.0, + offset: Offset(0.0, 0.75)) + ], + image: DecorationImage( + image: NetworkImage( + image, + ), + fit: BoxFit.cover), + borderRadius: BorderRadius.all(Radius.circular(10))), + ), + ), + ), + isActive + ? Positioned( + top: 30, + child: Container( + height: 20, + width: 6, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + bottomRight: Radius.circular(5), + topRight: Radius.circular(5), + )), + ), + ) + : Container() + ], + ), + ); + } +} \ No newline at end of file