Implemented the page view functionality

-synced page controllers
This commit is contained in:
Mohammad Salameh
2024-03-07 12:57:35 +03:00
parent c5f88caec3
commit bf275d5adf
7 changed files with 185 additions and 71 deletions
+37 -22
View File
@@ -209,44 +209,59 @@ class SpacesCubit extends Cubit<SpacesState> {
PageController devicesPageController = PageController();
ScrollController roomsScrollController = ScrollController();
PageController roomsPageController = PageController();
int selectedRoomIndex = 0;
var duration = const Duration(milliseconds: 300);
selectSpace(SpaceModel space) {
selectedSpace = space;
emit(SpacesSelected(space));
}
updateSelectedRoomIndex(int index) {
selectedRoomIndex = index;
emit(RoomSelected(selectedSpace.rooms.elementAt(index)));
roomSliderPageChanged(int index) {
devicesPageController.animateToPage(
index,
duration: duration,
curve: Curves.linear,
);
if (index == 0) {
unselectRoom();
} else {
selectedRoom = selectedSpace.rooms[index - 1];
print(selectedRoom!.name);
}
emit(RoomSelected(selectedRoom!));
}
selectRoom(RoomModel room) {
selectedRoom = room;
selectedRoomIndex = selectedSpace.rooms.indexOf(room) + 1;
print(selectedRoomIndex);
devicesPageController.animateToPage(
selectedRoomIndex,
devicesPageChanged(int index) {
roomsPageController.animateToPage(
index,
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
curve: Curves.linear,
);
// roomsScrollController.animateTo(
// roomsScrollController.positions.elementAt(selectedRoomIndex).pixels,
// duration: const Duration(milliseconds: 300),
// curve: Curves.easeInOut,
// );
emit(RoomSelected(room));
if (index == 0) {
unselectRoom();
} else {
selectedRoom = selectedSpace.rooms[index - 1];
print(selectedRoom!.name);
}
emit(RoomSelected(selectedRoom!));
}
unselectRoom() {
selectedRoom = null;
selectedRoomIndex = 0;
devicesPageController.animateToPage(
selectedRoomIndex,
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
0,
duration: duration,
curve: Curves.linear,
);
roomsPageController.animateToPage(
0,
duration: duration,
curve: Curves.linear,
);
emit(RoomUnSelected());
@@ -26,8 +26,9 @@ class DevicesViewBody extends StatelessWidget {
? const Center(child: CircularProgressIndicator())
: Padding(
padding: EdgeInsets.only(
top: Constants.appBarHeight,
bottom: Constants.bottomNavBarHeight),
top: Constants.appBarHeight,
bottom: Constants.bottomNavBarHeight,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@@ -40,6 +41,9 @@ class DevicesViewBody extends StatelessWidget {
child: PageView(
controller:
SpacesCubit.get(context).devicesPageController,
onPageChanged: (index) {
SpacesCubit.get(context).devicesPageChanged(index);
},
children: [
const WizardPage(),
...SpacesCubit.get(context).selectedSpace.rooms.map(
@@ -57,22 +61,17 @@ class DevicesViewBody extends StatelessWidget {
vertical: 7,
),
child: SmoothPageIndicator(
controller:
SpacesCubit.get(context).devicesPageController,
count: 3,
effect: const WormEffect(
dotHeight: 8,
dotWidth: 8,
),
onDotClicked: (index) {
SpacesCubit.get(context)
.devicesPageController
.animateToPage(
index,
duration: const Duration(milliseconds: 300),
curve: Curves.ease,
);
}),
controller:
SpacesCubit.get(context).devicesPageController,
count: 3,
effect: const WormEffect(
dotHeight: 8,
dotWidth: 8,
),
onDotClicked: (index) {
SpacesCubit.get(context).unselectRoom();
},
),
),
],
),
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:syncrow_app/features/devices/view/widgets/devices_mode_tab.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/title_medium.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/constants.dart';
import 'package:syncrow_app/utils/resource_manager/strings_manager.dart';
class DevicesViewHeader extends StatelessWidget {
@@ -11,17 +12,25 @@ class DevicesViewHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TitleMedium(
text: StringsManager.devices,
style: context.titleMedium.copyWith(
fontSize: 25,
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: Constants.defaultPadding,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TitleMedium(
text: StringsManager.devices,
style: context.titleMedium.copyWith(
fontSize: 25,
),
),
),
const DevicesModeTab(),
],
const DevicesModeTab(),
const SizedBox(
height: 20,
),
],
),
);
}
}
@@ -15,11 +15,13 @@ class RoomsSlider extends StatelessWidget {
Widget build(BuildContext context) {
return BlocBuilder<SpacesCubit, SpacesState>(
builder: (context, state) {
return SingleChildScrollView(
controller: SpacesCubit.get(context).roomsScrollController,
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
return SizedBox(
height: 40,
child: PageView(
controller: SpacesCubit.get(context).roomsPageController,
onPageChanged: (index) {
SpacesCubit.get(context).roomSliderPageChanged(index);
},
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
@@ -43,18 +45,17 @@ class RoomsSlider extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 15),
child: InkWell(
onTap: () {
SpacesCubit.get(context).selectRoom(room);
SpacesCubit.get(context).roomSliderPageChanged(
SpacesCubit.get(context)
.selectedSpace
.rooms
.indexOf(room));
},
child: TitleMedium(
text: room.name,
style: context.titleMedium.copyWith(
fontSize: 25,
color: SpacesCubit.get(context).selectedRoomIndex ==
SpacesCubit.get(context)
.selectedSpace
.rooms
.indexOf(room) +
1
color: SpacesCubit.get(context).selectedRoom == room
? ColorsManager.textPrimaryColor
: ColorsManager.textPrimaryColor
.withOpacity(.2),
@@ -66,6 +67,58 @@ class RoomsSlider extends StatelessWidget {
],
),
);
// SingleChildScrollView(
// controller: SpacesCubit.get(context).roomsScrollController,
// scrollDirection: Axis.horizontal,
// child: Row(
// mainAxisAlignment: MainAxisAlignment.start,
// children: [
// Padding(
// padding: const EdgeInsets.symmetric(horizontal: 15),
// child: InkWell(
// onTap: () {
// SpacesCubit.get(context).unselectRoom();
// },
// child: TitleMedium(
// text: StringsManager.wizard,
// style: context.titleMedium.copyWith(
// fontSize: 25,
// color: SpacesCubit.get(context).selectedRoom == null
// ? ColorsManager.textPrimaryColor
// : ColorsManager.textPrimaryColor.withOpacity(.2),
// ),
// ),
// ),
// ),
// ...SpacesCubit.get(context).selectedSpace.rooms.map(
// (room) => Padding(
// padding: const EdgeInsets.symmetric(horizontal: 15),
// child: InkWell(
// onTap: () {
// SpacesCubit.get(context).selectRoom(room);
// },
// child: TitleMedium(
// text: room.name,
// style: context.titleMedium.copyWith(
// fontSize: 25,
// color: SpacesCubit.get(context).selectedRoomIndex ==
// SpacesCubit.get(context)
// .selectedSpace
// .rooms
// .indexOf(room) +
// 1
// ? ColorsManager.textPrimaryColor
// : ColorsManager.textPrimaryColor
// .withOpacity(.2),
// ),
// ),
// ),
// ),
// )
// ],
// ),
// );
},
);
}
+6 -1
View File
@@ -1,9 +1,10 @@
import 'package:flutter/material.dart';
import 'package:syncrow_app/features/app_layout/view/app_layout.dart';
import 'package:syncrow_app/features/auth/view/auth_view.dart';
import 'package:syncrow_app/features/dashboard/view/dashboard_view.dart';
import 'package:syncrow_app/features/devices/view/devices_view.dart';
import 'package:syncrow_app/features/layout/view/layout_view.dart';
import 'package:syncrow_app/features/app_layout/view/app_layout.dart';
import 'package:syncrow_app/features/menu/view/menu_view.dart';
import 'package:syncrow_app/features/profile/view/profile_view.dart';
import 'package:syncrow_app/features/scene/view/scene_view.dart';
import 'package:syncrow_app/features/splash/view/splash_view.dart';
@@ -45,6 +46,10 @@ class Router {
return MaterialPageRoute(
builder: (_) => const AppLayout(), settings: settings);
case Routes.menuRoute:
return MaterialPageRoute(
builder: (_) => const MenuView(), settings: settings);
default:
return MaterialPageRoute(
builder: (_) => Scaffold(
+1
View File
@@ -6,5 +6,6 @@ class Routes {
static const String sceneRoute = '/scene';
static const String layoutRoute = '/layout';
static const String profileRoute = '/profile';
static const String menuRoute = '/menu';
static const String authRoute = '/auth';
}