Skip to content

Commit

Permalink
layout responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
Santos-Enoque committed Jun 10, 2021
1 parent b605853 commit 6295006
Show file tree
Hide file tree
Showing 14 changed files with 461 additions and 117 deletions.
Binary file added assets/images/profile.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions lib/helpers/local_navigator.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter_web_dashboard/constants/controllers.dart';
import 'package:flutter_web_dashboard/routing/router.dart';
import 'package:flutter_web_dashboard/routing/routes.dart';

Navigator localNavigator() => Navigator(
key: navigationController.navigatorKey,
onGenerateRoute: generateRoute,
initialRoute: overviewPageRoute,
);
62 changes: 62 additions & 0 deletions lib/helpers/reponsiveness.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import 'package:flutter/material.dart';

const int extraLargeScreenSize = 1920;
const int largeScreenSize = 1366;
const int mediumScreenSize = 768;
const int smallSceenSize = 360;
const int customScreenSize = 1100;




class ResponsiveWidget extends StatelessWidget {
final Widget largeScreen;
final Widget mediumScreen;
final Widget smallScreen;

const ResponsiveWidget({
Key key,
@required this.largeScreen,
this.mediumScreen,
this.smallScreen,
}) : super(key: key);

static bool isSmallScreen(BuildContext context) {
return MediaQuery.of(context).size.width < mediumScreenSize;
}

static bool isMediumScreen(BuildContext context) {
return MediaQuery.of(context).size.width >= mediumScreenSize &&
MediaQuery.of(context).size.width < largeScreenSize;
}

static bool isLargeScreen(BuildContext context) {
return MediaQuery.of(context).size.width >= largeScreenSize &&
MediaQuery.of(context).size.width < extraLargeScreenSize;
}

static bool isExtraLargeScreen(BuildContext context) {
return MediaQuery.of(context).size.width >= extraLargeScreenSize;
}

static bool isCustomSize(BuildContext context) {
return MediaQuery.of(context).size.width <= customScreenSize &&
MediaQuery.of(context).size.width >= mediumScreenSize;
}

@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= largeScreenSize) {
return largeScreen;
} else if (constraints.maxWidth < largeScreenSize &&
constraints.maxWidth >= mediumScreenSize) {
return mediumScreen ?? largeScreen;
} else {
return smallScreen ?? largeScreen;
}
},
);
}
}
79 changes: 20 additions & 59 deletions lib/layout.dart
Original file line number Diff line number Diff line change
@@ -1,71 +1,32 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:flutter_web_dashboard/constants/controllers.dart';
import 'package:flutter_web_dashboard/constants/style.dart';
import 'package:flutter_web_dashboard/routing/router.dart';
import 'package:flutter_web_dashboard/routing/routes.dart';
import 'package:flutter_web_dashboard/helpers/local_navigator.dart';
import 'package:flutter_web_dashboard/helpers/reponsiveness.dart';
import 'package:flutter_web_dashboard/widgets/custom_text.dart';
import 'package:flutter_web_dashboard/widgets/side_menu_item.dart';
import 'package:flutter_web_dashboard/widgets/large_screen.dart';
import 'package:flutter_web_dashboard/widgets/side_menu.dart';

import 'widgets/top_nav.dart';


class SiteLayout extends StatelessWidget {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
return Scaffold(
body: Row(
children: [
Expanded(
child: Container(
color: dark,
child: ListView(
children: [
SizedBox(
height: 40,
),
Row(
children: [
SizedBox(width: _width / 48),
Padding(
padding: const EdgeInsets.only(right: 12),
child: SvgPicture.asset("assets/icons/logo.svg"),
),
Flexible(
child: CustomText(
text: "Admin Panel",
size: 20,
weight: FontWeight.bold,
color: lightGrey,
),
)
],
),
SizedBox(
height: 40,
),
Column(
mainAxisSize: MainAxisSize.min,
children: sideMenuItemRoutes
.map((itemName) => SideMenuItem(
itemName: itemName,
onTap: () {
if (!menuController.isActive(itemName)) {
menuController.changeActiveItemTo(itemName);
navigationController.navigateTo(itemName);
}
}))
.toList(),
)
],
),
)),
Expanded(
flex: 5,
child: Navigator(
key: navigationController.navigatorKey,
onGenerateRoute: generateRoute,
initialRoute: overviewPageRoute,
)),
],
key: scaffoldKey,
extendBodyBehindAppBar: true,
appBar: topNavigationBar(context, scaffoldKey),
drawer: Drawer(
child: SideMenu(),
),
body: ResponsiveWidget(
largeScreen: LargeScreen(),
smallScreen: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: localNavigator(),
),
),
);
}
Expand Down
3 changes: 2 additions & 1 deletion lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Dashboard',
theme: ThemeData(
scaffoldBackgroundColor: light,
Expand Down
23 changes: 18 additions & 5 deletions lib/pages/clients/clients.dart
Original file line number Diff line number Diff line change
@@ -1,17 +1,30 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/constants/controllers.dart';
import 'package:flutter_web_dashboard/helpers/reponsiveness.dart';
import 'package:flutter_web_dashboard/widgets/custom_text.dart';
import 'package:get/get.dart';

class ClientsPage extends StatelessWidget {
const ClientsPage({ Key key }) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
children: [
Obx(() => Row(
children: [
Container(
margin: EdgeInsets.only(top:
ResponsiveWidget.isSmallScreen(context) ? 56 : 6),
child: CustomText(text: menuController.activeItem.value, size: 24, weight: FontWeight.bold,)),
],
),),

Expanded(child: Container()),

Text(
MediaQuery.of(context).size.width.toString() +
"Clients",
MediaQuery.of(context).size.width.toString() ,
style: TextStyle(fontSize: 39))
],
),
Expand Down
23 changes: 18 additions & 5 deletions lib/pages/drivers/drivers.dart
Original file line number Diff line number Diff line change
@@ -1,17 +1,30 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/constants/controllers.dart';
import 'package:flutter_web_dashboard/helpers/reponsiveness.dart';
import 'package:flutter_web_dashboard/widgets/custom_text.dart';
import 'package:get/get.dart';

class DriversPage extends StatelessWidget {
const DriversPage({ Key key }) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
children: [
Obx(() => Row(
children: [
Container(
margin: EdgeInsets.only(top:
ResponsiveWidget.isSmallScreen(context) ? 56 : 6),
child: CustomText(text: menuController.activeItem.value, size: 24, weight: FontWeight.bold,)),
],
),),

Expanded(child: Container()),

Text(
MediaQuery.of(context).size.width.toString() +
"Drivers",
MediaQuery.of(context).size.width.toString() ,
style: TextStyle(fontSize: 39))
],
),
Expand Down
23 changes: 18 additions & 5 deletions lib/pages/overview/overview.dart
Original file line number Diff line number Diff line change
@@ -1,17 +1,30 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/constants/controllers.dart';
import 'package:flutter_web_dashboard/helpers/reponsiveness.dart';
import 'package:flutter_web_dashboard/widgets/custom_text.dart';
import 'package:get/get.dart';

class OverviewPage extends StatelessWidget {
const OverviewPage({ Key key }) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
children: [
Obx(() => Row(
children: [
Container(
margin: EdgeInsets.only(top:
ResponsiveWidget.isSmallScreen(context) ? 56 : 6),
child: CustomText(text: menuController.activeItem.value, size: 24, weight: FontWeight.bold,)),
],
),),

Expanded(child: Container()),

Text(
MediaQuery.of(context).size.width.toString() +
"Overview",
MediaQuery.of(context).size.width.toString() ,
style: TextStyle(fontSize: 39))
],
),
Expand Down
54 changes: 54 additions & 0 deletions lib/widgets/horizontal_menu_item.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/constants/controllers.dart';
import 'package:get/get.dart';
import 'package:flutter_web_dashboard/constants/style.dart';

import 'custom_text.dart';

class HorizontalMenuItem extends StatelessWidget {
final String itemName;
final Function onTap;
const HorizontalMenuItem({ Key key, this.itemName, this.onTap }) : super(key: key);

@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;

return InkWell(
onTap: onTap,
onHover: (value){
value ?
menuController.onHover(itemName) : menuController.onHover("not hovering");
},
child: Obx(() => Container(
color: menuController.isHovering(itemName) ? lightGrey.withOpacity(.1) : Colors.transparent,
child: Row(
children: [
Visibility(
visible: menuController.isHovering(itemName) || menuController.isActive(itemName),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
child: Container(
width: 6,
height: 40,
color: Colors.white,
),
),
SizedBox(width:_width / 88),

Padding(
padding: const EdgeInsets.all(16),
child: menuController.returnIconFor(itemName),
),
if(!menuController.isActive(itemName))
Flexible(child: CustomText(text: itemName , color: menuController.isHovering(itemName) ? Colors.white : lightGrey,))
else
Flexible(child: CustomText(text: itemName , color: Colors.white , size: 18, weight: FontWeight.bold,))

],
),
))
);
}
}
22 changes: 22 additions & 0 deletions lib/widgets/large_screen.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/helpers/local_navigator.dart';
import 'package:flutter_web_dashboard/widgets/side_menu.dart';

class LargeScreen extends StatelessWidget {
const LargeScreen({ Key key }) : super(key: key);

@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: SideMenu()),
Expanded(
flex: 5,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 16),
child: localNavigator()),),
],
);
}
}
Loading

0 comments on commit 6295006

Please sign in to comment.