Skip to content

Commit

Permalink
Merge pull request #2 from giadeveloper/tablet_layouting
Browse files Browse the repository at this point in the history
Tablet layouting
  • Loading branch information
giadeveloper authored Nov 1, 2021
2 parents 3d52dbd + 73cb441 commit 6ff0230
Show file tree
Hide file tree
Showing 4 changed files with 224 additions and 73 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
part of dashboard;

class DashboardController extends GetxController {
final scaffoldKey = GlobalKey<ScaffoldState>();

void openDrawer() {
if (scaffoldKey.currentState != null) {
scaffoldKey.currentState!.openDrawer();
}
}

// Data
_Profile getProfil() {
return const _Profile(
Expand Down
120 changes: 78 additions & 42 deletions lib/app/features/dashboard/views/components/overview_header.dart
Original file line number Diff line number Diff line change
Expand Up @@ -3,60 +3,96 @@ part of dashboard;
class _OverviewHeader extends StatelessWidget {
const _OverviewHeader({
required this.onSelected,
this.axis = Axis.horizontal,
Key? key,
}) : super(key: key);

final Function(TaskType? task) onSelected;

final Axis axis;
@override
Widget build(BuildContext context) {
final Rx<TaskType?> task = Rx(null);

return Obx(
() => Row(
children: [
const Text(
"Task Overview",
style: TextStyle(fontWeight: FontWeight.w600),
),
const Spacer(),
_button(
selected: task.value == null,
label: "All",
onPressed: () {
task.value = null;
onSelected(null);
},
),
_button(
selected: task.value == TaskType.todo,
label: "To do",
onPressed: () {
task.value = TaskType.todo;
onSelected(TaskType.todo);
},
),
_button(
selected: task.value == TaskType.inProgress,
label: "In progress",
onPressed: () {
task.value = TaskType.inProgress;
onSelected(TaskType.inProgress);
},
),
_button(
selected: task.value == TaskType.done,
label: "Done",
onPressed: () {
task.value = TaskType.done;
onSelected(TaskType.done);
},
),
],
),
() => (axis == Axis.horizontal)
? Row(
children: [
const Text(
"Task Overview",
style: TextStyle(fontWeight: FontWeight.w600),
),
const Spacer(),
..._listButton(
task: task.value,
onSelected: (value) {
task.value = value;
onSelected(value);
},
)
],
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Task Overview",
style: TextStyle(fontWeight: FontWeight.w600),
),
const SizedBox(height: 10),
Row(
children: _listButton(
task: task.value,
onSelected: (value) {
task.value = value;
onSelected(value);
},
),
),
],
),
);
}

List<Widget> _listButton({
required TaskType? task,
required Function(TaskType? value) onSelected,
}) {
return [
_button(
selected: task == null,
label: "All",
onPressed: () {
task = null;
onSelected(null);
},
),
_button(
selected: task == TaskType.todo,
label: "To do",
onPressed: () {
task = TaskType.todo;
onSelected(TaskType.todo);
},
),
_button(
selected: task == TaskType.inProgress,
label: "In progress",
onPressed: () {
task = TaskType.inProgress;
onSelected(TaskType.inProgress);
},
),
_button(
selected: task == TaskType.done,
label: "Done",
onPressed: () {
task = TaskType.done;
onSelected(TaskType.done);
},
),
];
}

Widget _button({
required bool selected,
required String label,
Expand Down
4 changes: 4 additions & 0 deletions lib/app/features/dashboard/views/components/profile_tile.dart
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,14 @@ class _ProfilTile extends StatelessWidget {
title: Text(
data.name,
style: TextStyle(fontSize: 14, color: kFontColorPallets[0]),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
data.email,
style: TextStyle(fontSize: 12, color: kFontColorPallets[2]),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
trailing: IconButton(
onPressed: onPressedNotification,
Expand Down
165 changes: 134 additions & 31 deletions lib/app/features/dashboard/views/screens/dashboard_screen.dart
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ class DashboardScreen extends GetView<DashboardController> {
@override
Widget build(BuildContext context) {
return Scaffold(
key: controller.scaffoldKey,
drawer: (ResponsiveBuilder.isDesktop(context))
? null
: Drawer(child: _Sidebar(data: controller.getSelectedProject())),
body: SingleChildScrollView(
child: ResponsiveBuilder(
mobileBuilder: (context, constraints) {
Expand All @@ -54,8 +58,70 @@ class DashboardScreen extends GetView<DashboardController> {
);
},
tabletBuilder: (context, constraints) {
return const Center(
child: Text("Tablet"),
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
flex: (constraints.maxWidth < 950) ? 6 : 9,
child: Column(
children: [
const SizedBox(height: kSpacing),
_buildHeader(onPressedMenu: () => controller.openDrawer()),
const SizedBox(height: kSpacing * 2),
_buildProgress(
axis: (constraints.maxWidth < 950)
? Axis.vertical
: Axis.horizontal,
),
const SizedBox(height: kSpacing * 2),
_buildTaskOverview(
data: controller.getAllTask(),
headerAxis: (constraints.maxWidth < 850)
? Axis.vertical
: Axis.horizontal,
crossAxisCount: 6,
crossAxisCellCount: (constraints.maxWidth < 950)
? 6
: (constraints.maxWidth < 1100)
? 3
: 2,
),
const SizedBox(height: kSpacing * 2),
_buildActiveProject(
data: controller.getActiveProject(),
crossAxisCount: 6,
crossAxisCellCount: (constraints.maxWidth < 950)
? 6
: (constraints.maxWidth < 1100)
? 3
: 2,
),
const SizedBox(height: kSpacing),
],
),
),
Flexible(
flex: 4,
child: Column(
children: [
const SizedBox(height: kSpacing / 2),
_buildProfile(data: controller.getProfil()),
const Divider(thickness: 1),
const SizedBox(height: kSpacing),
_buildTeamMember(data: controller.getMember()),
const SizedBox(height: kSpacing),
Padding(
padding: const EdgeInsets.symmetric(horizontal: kSpacing),
child: GetPremiumCard(onPressed: () {}),
),
const SizedBox(height: kSpacing),
const Divider(thickness: 1),
const SizedBox(height: kSpacing),
_buildRecentMessages(data: controller.getChatting()),
],
),
)
],
);
},
desktopBuilder: (context, constraints) {
Expand Down Expand Up @@ -123,50 +189,86 @@ class DashboardScreen extends GetView<DashboardController> {
);
}

Widget _buildHeader() {
return const Padding(
padding: EdgeInsets.symmetric(horizontal: kSpacing),
child: _Header(),
);
}

Widget _buildProgress() {
Widget _buildHeader({Function()? onPressedMenu}) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: kSpacing),
child: Row(
children: [
Flexible(
flex: 5,
child: ProgressCard(
data: const ProgressCardData(
totalUndone: 10,
totalTaskInProress: 2,
if (onPressedMenu != null)
Padding(
padding: const EdgeInsets.only(right: kSpacing),
child: IconButton(
onPressed: onPressedMenu,
icon: const Icon(EvaIcons.menu),
tooltip: "menu",
),
onPressedCheck: () {},
),
),
const SizedBox(width: kSpacing / 2),
const Flexible(
flex: 4,
child: ProgressReportCard(
data: ProgressReportCardData(
title: "1st Sprint",
doneTask: 5,
percent: .3,
task: 3,
undoneTask: 2,
),
),
),
const Expanded(child: _Header()),
],
),
);
}

Widget _buildProgress({Axis axis = Axis.horizontal}) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: kSpacing),
child: (axis == Axis.horizontal)
? Row(
children: [
Flexible(
flex: 5,
child: ProgressCard(
data: const ProgressCardData(
totalUndone: 10,
totalTaskInProress: 2,
),
onPressedCheck: () {},
),
),
const SizedBox(width: kSpacing / 2),
const Flexible(
flex: 4,
child: ProgressReportCard(
data: ProgressReportCardData(
title: "1st Sprint",
doneTask: 5,
percent: .3,
task: 3,
undoneTask: 2,
),
),
),
],
)
: Column(
children: [
ProgressCard(
data: const ProgressCardData(
totalUndone: 10,
totalTaskInProress: 2,
),
onPressedCheck: () {},
),
const SizedBox(height: kSpacing / 2),
const ProgressReportCard(
data: ProgressReportCardData(
title: "1st Sprint",
doneTask: 5,
percent: .3,
task: 3,
undoneTask: 2,
),
),
],
),
);
}

Widget _buildTaskOverview({
required List<TaskCardData> data,
int crossAxisCount = 6,
int crossAxisCellCount = 2,
Axis headerAxis = Axis.horizontal,
}) {
return StaggeredGridView.countBuilder(
crossAxisCount: crossAxisCount,
Expand All @@ -179,6 +281,7 @@ class DashboardScreen extends GetView<DashboardController> {
? Padding(
padding: const EdgeInsets.only(bottom: kSpacing),
child: _OverviewHeader(
axis: headerAxis,
onSelected: (task) {},
),
)
Expand Down

0 comments on commit 6ff0230

Please sign in to comment.