Skip to content

Commit 9693d88

Browse files
TeeWrathTeeWrath
authored
Merge pull request #26 from swarno-tech/rewrite
dashboard responsive
2 parents d53c349 + 809c00e commit 9693d88

File tree

9 files changed

+589
-70
lines changed

9 files changed

+589
-70
lines changed

‎lib/core/helpers/responsive_layout.helper.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ enum DeviceType { mobile, tab, desktop }
44

55
class ResponsiveLayoutHelper {
66
static const int mobileMaxWidth = 375;
7-
static const int tabletMaxWidth = 600;
7+
static const int tabletMaxWidth = 720;
88
static const int desktopMaxWidth = 1024;
99

1010
static DeviceType getDeviceType(BuildContext context) {

‎lib/features/dashboard/pages/desktop/dashboard_desktop.dart‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import 'package:cookethflow/core/theme/colors.dart';
1+
22
import 'package:cookethflow/features/dashboard/providers/dashboard_provider.dart';
33
import 'package:cookethflow/features/dashboard/widgets/dashboard_drawer.dart';
44
import 'package:cookethflow/features/dashboard/widgets/project_card.dart';
55
import 'package:cookethflow/features/dashboard/widgets/start_project.dart';
66
import 'package:flutter/material.dart';
77
import 'package:flutter_screenutil/flutter_screenutil.dart';
8-
import 'package:phosphor_flutter/phosphor_flutter.dart';
98
import 'package:provider/provider.dart';
109
import 'package:cookethflow/core/helpers/responsive_layout.helper.dart' as rh;
1110

@@ -29,7 +28,7 @@ class DashboardDesktop extends StatelessWidget {
2928
provider.isDrawerOpen
3029
? constraints.maxHeight
3130
: 0.185.sh,
32-
width: deviceType == rh.DeviceType.desktop ? 400.w : 600.w,
31+
width: deviceType == rh.DeviceType.desktop ? 0.24.sw : deviceType == rh.DeviceType.tab ? 0.257.sw : 600.w,
3332
child: const DashboardDrawer(),
3433
),
3534

@@ -49,7 +48,7 @@ class DashboardDesktop extends StatelessWidget {
4948
const SizedBox(height: 32),
5049
Expanded(
5150
// NEW: Conditionally build the main content area
52-
child: _buildMainContent(provider),
51+
child: _buildMainContent(provider,context),
5352
),
5453
],
5554
),
@@ -63,7 +62,7 @@ class DashboardDesktop extends StatelessWidget {
6362
}
6463

6564
// NEW: Helper widget to build content based on the selected tab
66-
Widget _buildMainContent(DashboardProvider provider) {
65+
Widget _buildMainContent(DashboardProvider provider,BuildContext context) {
6766
switch (provider.tabIndex) {
6867
case 2: // Trash Tab
6968
return Center(
@@ -108,7 +107,7 @@ class DashboardDesktop extends StatelessWidget {
108107
),
109108
);
110109
}
111-
110+
rh.DeviceType deviceType = rh.ResponsiveLayoutHelper.getDeviceType(context);
112111
return GridView.builder(
113112
shrinkWrap: true,
114113
itemCount: displayedWorkspaces.length,
@@ -117,7 +116,7 @@ class DashboardDesktop extends StatelessWidget {
117116
crossAxisCount: 3,
118117
crossAxisSpacing: 20.w,
119118
mainAxisSpacing: 20.h,
120-
childAspectRatio: 4.5 / 3,
119+
childAspectRatio: deviceType == rh.DeviceType.desktop ? 4.0/3 : 3.3/ 3,
121120
),
122121
itemBuilder: (context, index) {
123122
final workspace = displayedWorkspaces[index];

‎lib/features/dashboard/pages/mobile/dashboard_mobile.dart‎

Lines changed: 142 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,152 @@
1+
import 'package:cookethflow/features/dashboard/pages/mobile/drawer_mobile.dart';
12
import 'package:cookethflow/features/dashboard/providers/dashboard_provider.dart';
23
import 'package:cookethflow/features/dashboard/widgets/dashboard_drawer.dart';
4+
import 'package:cookethflow/features/dashboard/widgets/project_card.dart';
5+
import 'package:cookethflow/features/dashboard/widgets/start_project.dart';
36
import 'package:flutter/material.dart';
7+
import 'package:flutter_screenutil/flutter_screenutil.dart';
48
import 'package:provider/provider.dart';
59

6-
class DashboardMobile extends StatelessWidget {
10+
import 'package:cookethflow/core/helpers/responsive_layout.helper.dart' as rh;
11+
12+
class DashboardMobile extends StatefulWidget {
713
const DashboardMobile({super.key});
814

15+
@override
16+
State<DashboardMobile> createState() => _DashboardMobileState();
17+
}
18+
19+
class _DashboardMobileState extends State<DashboardMobile> {
20+
bool is_Visible = false;
921
@override
1022
Widget build(BuildContext context) {
11-
return Consumer<DashboardProvider>(builder: (context, provider, child) =>
12-
Scaffold(drawer: DashboardDrawer(),appBar: AppBar(),body: Container(),),);
23+
rh.DeviceType deviceType = rh.ResponsiveLayoutHelper.getDeviceType(context);
24+
return Consumer<DashboardProvider>(
25+
builder: (context, provider, child) {
26+
return LayoutBuilder(
27+
builder: (context, constraints) {
28+
return Container(
29+
padding: EdgeInsets.only(left: 20,right: 16),
30+
child: Stack(
31+
children: [
32+
Column(
33+
crossAxisAlignment: CrossAxisAlignment.start,
34+
children: [
35+
Row(
36+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
37+
children: [
38+
Container(
39+
padding: EdgeInsets.all(10),
40+
decoration: BoxDecoration(
41+
border: Border.all(color: Colors.black),
42+
borderRadius: BorderRadius.circular(8),
43+
),
44+
child: InkWell(
45+
onTap: () {
46+
setState(() {
47+
is_Visible = !is_Visible;
48+
});
49+
},
50+
child: Icon(Icons.menu, size: 30),
51+
),
52+
),
53+
const StartProject(),
54+
],
55+
),
56+
const SizedBox(height: 34),
57+
Expanded(
58+
// NEW: Conditionally build the main content area
59+
child: _buildMainContent(provider),
60+
),
61+
],
62+
),
63+
Visibility(
64+
visible: is_Visible,
65+
child: Positioned(
66+
top: 90.h,
67+
left: 8.w,
68+
child: AnimatedContainer(
69+
curve: Curves.easeInOut,
70+
duration: const Duration(milliseconds: 500),
71+
height: provider.isDrawerOpen ? 0.8.sh : 0.185.sh,
72+
width:
73+
deviceType == rh.DeviceType.desktop ? 400.w : 0.70.sw,
74+
child: const DashboardDrawerMob(),
75+
),
76+
),
77+
),
78+
]
79+
),
80+
);
81+
},
82+
);
83+
},
84+
);
85+
}
86+
87+
88+
// NEW: Helper widget to build content based on the selected tab
89+
Widget _buildMainContent(DashboardProvider provider) {
90+
switch (provider.tabIndex) {
91+
case 2: // Trash Tab
92+
return Center(
93+
child: Text(
94+
'Feature Coming Soon',
95+
style: TextStyle(
96+
fontFamily: 'Fredrik',
97+
fontSize: 45.sp,
98+
fontWeight: FontWeight.w600,
99+
color: Colors.grey[600],
100+
),
101+
),
102+
);
103+
case 3: // About Us Tab
104+
return SingleChildScrollView(
105+
padding: EdgeInsets.symmetric(horizontal: 40.w, vertical: 20.h),
106+
child: Text(
107+
"Cooketh Flow is an open-source, powerful visual thinking tool designed for teams and individuals to brainstorm, sketch, and organize ideas effortlessly. Whether you're mapping out ideas, designing user flows, or organizing tasks, Cooketh Flow provides an intuitive drag-and-drop interface that makes building and refining workflows effortless.\n\nWith features like customizable nodes and cloud sync with Supabase, Cooketh Flow is built to streamline complex processes and enhance productivity. Developed with Flutter for cross-platform support, it offers a fast, responsive, and visually engaging experience.\n\nAs an open-source project, Cooketh Flow is community-driven and extensible, inviting developers and creators to contribute, innovate, and shape the future of workflow automation.",
108+
textAlign: TextAlign.justify,
109+
style: TextStyle(
110+
fontFamily: 'Fredrik',
111+
fontSize: 40.sp,
112+
height: 1.6,
113+
color: Colors.black.withOpacity(0.75),
114+
),
115+
),
116+
);
117+
default: // All and Starred Tabs
118+
final displayedWorkspaces = provider.displayedWorkspaces;
119+
120+
// Show a message if the "Starred" tab is empty
121+
if (displayedWorkspaces.isEmpty && provider.tabIndex == 1) {
122+
return Center(
123+
child: Text(
124+
'No starred workspaces yet!',
125+
style: TextStyle(
126+
fontFamily: 'Fredrik',
127+
fontSize: 45.sp,
128+
fontWeight: FontWeight.w600,
129+
color: Colors.grey[600],
130+
),
131+
),
132+
);
133+
}
134+
135+
return GridView.builder(
136+
shrinkWrap: true,
137+
itemCount: displayedWorkspaces.length,
138+
gridDelegate:
139+
SliverGridDelegateWithFixedCrossAxisCount(
140+
crossAxisCount: 1,
141+
crossAxisSpacing: 20.w,
142+
mainAxisSpacing: 20.h,
143+
childAspectRatio: 1.8,
144+
),
145+
itemBuilder: (context, index) {
146+
final workspace = displayedWorkspaces[index];
147+
return ProjectCard(workspaceId: workspace.id);
148+
},
149+
);
150+
}
13151
}
14-
}
152+
}

0 commit comments

Comments
 (0)