Zoom action in sctoll - flutter

hi i want to gesture zoom action its ok and i have done but the problem is in real device whene user zooming because we have nestedscrollview and custom scoll view the page scolling instead of zoom action so what's the solution???
class NftsPage extends ConsumerWidget {
const NftsPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context, ref) {
final zoom = ref.watch(zoomProvider);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: GestureDetector(
onScaleStart: (detail) {
lastscale = 0;
},
onScaleEnd: (detail) {
handleZoom(lastscale, ref);
},
onScaleUpdate: (detail) {
lastscale = detail.scale;
},
child: CustomScrollView(
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
slivers: [
SliverToBoxAdapter(
child: NftActionButtons(
onSendPressed: () {},
onReceivePressed: () {},
),
),
SliverToBoxAdapter(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
child: Text(
'utility'.tr(),
style: context.theme.textTheme.caption,
),
),
),
SliverToBoxAdapter(
child: Placeholder(
fallbackHeight: context.height * 0.3,
),
),
SliverToBoxAdapter(
child: ExpansionTile(
initiallyExpanded: true,
title: Text(
'media'.tr(),
style: context.theme.textTheme.caption,
),
children: [
Consumer(
builder: (context, ref, child) {
final list = ref.watch(mediaListProvider);
return list.when(data: (data) {
return GridView.builder(
physics: const BouncingScrollPhysics(),
itemCount: data.length,
padding: const EdgeInsets.only(bottom: 10),
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: zoom == 1
? 5
: zoom == 2
? 3
: 1,
mainAxisSpacing: 6.0,
crossAxisSpacing: 6.0,
childAspectRatio: 1),
itemBuilder: ((c, i) {
MediaEntity media = data[i];
return InkWell(
onTap: () {
ref.read(currenctIndexProvider.notifier).state =
i;
AppNavigator.toShowMedia(i);
},
child: zoom == 1
? MediaItem1(
media: media,
)
: zoom == 2
? MediaItem2(
media: media,
)
: MediaItem3(
media: media,
),
);
}),
);
}, error: (error, trace) {
return Text(
'error',
style: context.textTheme.subtitle2,
);
}, loading: () {
return Loading();
});
},
)
],
),
)
],
),
),
);
}
}

Related

Card stuck at it's previous postion after performing search. Trying to search constitutions using the titles from an API

Constitution Card stuck at its position after performing search instead of moving to the top first position in the gridview. The searched card is supposed to appear at the the index[0] of the gridview where "Test Constitution" when filtered after performing search .
Could post images because of low reputution from Stackoverflow
Before Search
After Search
This's the code.
class _HomePageState extends State<HomePage> {
final ConstitutionController constitutionController = Get.find();
String search = "";
#override
Widget build(BuildContext context) {
final double height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFF0B3C5D),
elevation: 0.0,
),
drawer: DrawerWidget(),
body: Stack(children: [
Container(
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
Text(),
),
// The Search bar
Container(
margin: const EdgeInsets.symmetric(vertical: 30),
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
child: CupertinoSearchTextField(
onChanged: ((value) {
setState(() {
search = value;
}
);
}),
autofocus: true,
itemColor: Colors.black,
itemSize: 20,
backgroundColor: const Color.fromARGB(255, 185, 204, 218),
placeholderStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
const SizedBox(
height: 70,
),
Flexible(
child: Obx(() {
if (constitutionController.isLoading.value) {
return GridView.builder(
itemBuilder: (_, __) {
return Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
period: Duration(seconds: 2),
enabled: constitutionController.isLoading.value,
child: ShimmerGridCard());
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
);
} else {
return GridView.builder(
itemCount:
constitutionController.constitutionList.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (context, index) {
Constitution constitution =
constitutionController.constitutionList[index];
if (search.isEmpty) {
return InkWell(
onTap: (() {
Get.to(BranchPage(
constitutionId: constitution));
}),
child: ConstitutionCard(constitutionController
.constitutionList[index]));
}
if (constitution.title
.toLowerCase()
.contains(search)) {
return InkWell(
onTap: (() {
Get.to(BranchPage(
constitutionId: constitution));
}),
child: ConstitutionCard(constitutionController
.constitutionList[index]));
}
return null;
});
}
}),
),
],
),
),
),
]),
);
}
}

Flutter: Custom navigation drawer does not reflect activeIndex on rebuild with AutoRoute

I am using AutoRoute with AutoTabsRouter for navigation in my web app. I have a custom Drawer used for navigation. I want my current tab icon and text to be the primary color when on the selected index.
For mobile and tablet view, the drawer pops with every selection and when I open it again the current tab has the primary color as it should. On desktop view this works if I open the app in desktop view and do not resize the screen at all. If I do resize the screen at all, even if I'm still in desktop view after resizing, the selected does not work as expected and the current tab does not have the primary color.
Here is my code for the Drawer :
class CustomDrawer extends StatefulWidget {
final double width;
const CustomDrawer({
required this.width,
Key? key,
}) : super(key: key);
#override
State<CustomDrawer> createState() => _CustomDrawerState();
}
class _CustomDrawerState extends State<CustomDrawer> {
ScrollController scrollController = ScrollController();
#override
void dispose() {
scrollController.dispose();
super.dispose();
}
#override
Widget build(context) {
final tabsRouter = context.tabsRouter;
return Drawer(
elevation: 0,
backgroundColor: lightThemeCardColor,
child: SingleChildScrollView(
controller: scrollController,
child: Column(
children: [
DrawerHeader(
child: Column(
children: const [
SizedBox(
height: defaultMargin,
),
Icon(
Icons.architecture,
color: lightPrimaryColor,
size: 50,
),
Text(
'Drawer Header',
style: TextStyle(
fontSize: mobileTitleTextSize,
fontWeight: FontWeight.bold,
),
),
],
),
),
ListTile(
leading: const Icon(Icons.home),
title: const Text('H O M E'),
selected: tabsRouter.activeIndex == 0,
selectedColor: lightPrimaryColor,
onTap: () {
// Push to screen
tabsRouter.setActiveIndex(0);
if (widget.width < 1100) {
Navigator.pop(context);
}
},
),
ListTile(
leading: const Icon(Icons.edit),
title: const Text('S E C O N D'),
selected: tabsRouter.activeIndex == 1,
selectedColor: lightPrimaryColor,
onTap: () {
// Push to screen
tabsRouter.setActiveIndex(1);
if (widget.width < 1100) {
Navigator.pop(context);
}
},
),
ListTile(
leading: const Icon(Icons.check),
title: const Text('T H I R D'),
selected: tabsRouter.activeIndex == 2,
selectedColor: lightPrimaryColor,
onTap: () {
// Push to screen
tabsRouter.setActiveIndex(2);
if (widget.width < 1100) {
Navigator.pop(context);
}
},
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text('F O U R T H'),
selected: tabsRouter.activeIndex == 3,
selectedColor: lightPrimaryColor,
onTap: () {
//Push to screen
tabsRouter.setActiveIndex(3);
if (widget.width < 1100) {
Navigator.pop(context);
}
},
),
],
),
),
);
}
}
Here is my code for the desktop home page where CustomDrawer is the first item in body row:
class DesktopHomePage extends StatelessWidget {
const DesktopHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: lightThemeScaffoldColor,
body: Row(
children: [
// Always open drawer
CustomDrawer(width: width),
// Body contents
Expanded(
child: Container(
margin: const EdgeInsets.all(largeMargin),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const MobileTabletTextHeadline(
text: 'Some widget',
),
SizedBox(
height: 300,
child: AspectRatio(
aspectRatio: 4,
child: SizedBox(
width: double.infinity,
child: GridView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: 4,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
itemBuilder: ((context, index) {
return Padding(
padding: const EdgeInsets.all(defaultPadding),
child: Container(color: lightThemeCardColor),
);
}),
),
),
),
),
// Some other widget
const MobileTabletTextHeadline(
text: 'Other Widget',
),
SizedBox(
height: 300,
child: AspectRatio(
aspectRatio: 4,
child: SizedBox(
width: double.infinity,
child: GridView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: 4,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
itemBuilder: ((context, index) {
return Padding(
padding: const EdgeInsets.all(defaultPadding),
child: Container(color: lightThemeCardColor),
);
}),
),
),
),
),
],
),
),
),
),
],
),
);
}
}
(All desktop views have the same layout)
And here is my code where I set up AutoTabsRouter:
class NavPage extends StatelessWidget {
const NavPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return AutoTabsRouter(
routes: const [
HomeRouter(),
SecondRouter(),
ThirdRouter(),
FourthRouter(),
],
builder: (context, child, animation) {
return Scaffold(
appBar:
MediaQuery.of(context).size.width < 1100 ? mobileAppBar : null,
backgroundColor: lightThemeScaffoldColor,
body: child,
drawer: CustomDrawer(width: width),
);
},
);
}
}
I've tried using using setState after setting the current index but that does not help. What can I change the Drawer in a way that reflects the changes in desktop view after window resize?

Flutter Gridview Builder lag when coming back to the screen

I have a gridview.builder that fetches images from an API, images are already compressed to a max of 70kb each. I am also using pagination usin to fetch more data. When the grid crosses 30+ images the scrolling becomes choppy and when I go to a page by clicking on any image and then I come back many images load again everything again. I am maintaining the state using IndexedStack. And back animation is also stuttering. What am I doing wrong here?
Gridview Builder Code:
GridView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: postsList.posts.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 3,
mainAxisSpacing: 3,
),
itemBuilder: (context, index) {
return ProfilePostImageCard(
length: postsList.posts.length,
post: postsList.posts[index],
stringOfPostID: stringOfPostID,
);
})
ProfilePostImageCard
class ProfilePostImageCard extends StatelessWidget {
final ProfilePostModel post;
final String stringOfPostID;
final int length;
ProfilePostImageCard({Key key, this.post, this.stringOfPostID, this.length}) : super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileFeedsPage(
currentMemberImage: CurrentUser().currentUser.image,
listOfPostID: stringOfPostID,
postID: post.postId,
logo: CurrentUser().currentUser.logo,
country: CurrentUser().currentUser.country,
memberID: CurrentUser().currentUser.memberID,
)));
},
child: Container(
child: Stack(
children: [
AspectRatio(
aspectRatio: 1,
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: post.postAllImage,
),
),
post.dataMultiImage == 1
? Positioned.fill(
child: Align(
alignment: Alignment.topRight,
child: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/multiple.png",
height: 2.5.h,
),
)),
)
: Container(),
post.postType == "Video" || post.postType == "svideo"
? Positioned.fill(
child: Align(
alignment: Alignment.topRight,
child: Padding(
padding: EdgeInsets.all(6.0),
child: Icon(
Icons.video_collection,
color: Colors.white,
size: 2.5.h,
))),
)
: Container(),
],
),
),
);
}
}
Full Code
SmartRefresher(
enablePullDown: true,
enablePullUp: selectedIndex == 1 ? false : true,
header: CustomHeader(
builder: (context, mode) {
return Container(
child: Center(child: loadingAnimation()),
);
},
),
footer: CustomFooter(
builder: (BuildContext context, LoadStatus mode) {
Widget body;
if (mode == LoadStatus.idle) {
body = Text("");
} else if (mode == LoadStatus.loading) {
body = loadingAnimation();
} else if (mode == LoadStatus.failed) {
body = Container(
decoration: new BoxDecoration(
shape: BoxShape.circle,
border: new Border.all(color: Colors.black, width: 0.7),
),
child: Padding(
padding: EdgeInsets.all(12.0),
child: Icon(CustomIcons.reload),
));
} else if (mode == LoadStatus.canLoading) {
body = Text("");
} else {
body = Text("No more Data");
}
return Container(
height: 55.0,
child: Center(child: body),
);
},
),
controller: _postRefreshController,
onRefresh: _onRefresh,
onLoading: () {
if (selectedIndex == 0) {
_onLoading();
} else {
print("blog");
}
},
child: ListView(
physics: AlwaysScrollableScrollPhysics(),
children: [
profileLoaded == true
? ProfileCard(
userImage: userImage,
totalPosts: totalPosts,
followers: followers,
following: following,
bio: bio,
name: name,
shortcode: shortcode,
list: list,
)
: Container(),
TabBar(
indicatorColor: Colors.black,
tabs: <Tab>[
Tab(
child: Text(
"Posts",
style: blackBold.copyWith(color: Colors.black, fontSize: 10.0.sp),
),
),
Tab(
child: Text(
"Blogs",
style: blackBold.copyWith(color: Colors.black, fontSize: 10.0.sp),
),
),
Tab(
child: Text(
"Channel",
style: blackBold.copyWith(color: Colors.black, fontSize: 10.0.sp),
),
),
],
controller: _tabController,
onTap: (int index) {
setState(() {
selectedIndex = index;
_tabController.animateTo(index);
});
},
),
IndexedStack(
children: <Widget>[
GestureDetector(
onHorizontalDragUpdate: (details) {
if (details.delta.dx < 0) {
setState(() {
_tabController.animateTo(1);
selectedIndex = 1;
});
} else if (details.delta.dx > 0) {
setState(() {
_tabController.animateTo(2);
selectedIndex = 2;
});
}
},
child: Visibility(
child: Container(
child: hasPosts == true
? GridView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: postsList.posts.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 3,
mainAxisSpacing: 3,
),
itemBuilder: (context, index) {
return ProfilePostImageCard(
length: postsList.posts.length,
post: postsList.posts[index],
stringOfPostID: stringOfPostID,
);
})
: Container(),
),
maintainState: true,
visible: selectedIndex == 0,
),
),
GestureDetector(
onHorizontalDragUpdate: (details) {
if (details.delta.dx < 0) {
setState(() {
_tabController.animateTo(2);
selectedIndex = 2;
});
} else if (details.delta.dx > 0) {
setState(() {
_tabController.animateTo(0);
selectedIndex = 0;
});
}
},
child: Visibility(
child: Container(
child: hasPosts == true
? Column(
children: [
ListView.builder(
controller: widget.scrollController,
shrinkWrap: true,
//physics: NeverScrollableScrollPhysics(),
itemCount: blogsList.blogs.length,
itemBuilder: (context, index) {
var blog = blogsList.blogs[index];
return PersonalBlogCard(
blog: blog,
index: index,
lastIndex: blogsList.blogs.length - 1,
);
},
),
Padding(
padding: EdgeInsets.symmetric(vertical: 2.0.h),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
if (currentPage > 1) {
setState(() {
hasBlogs = false;
currentPage = --currentPage;
});
getBlogs();
}
},
child: CircleAvatar(
radius: 3.0.h,
backgroundColor: primaryBlueColor,
child: Icon(
Icons.arrow_back_ios_outlined,
color: Colors.white,
)),
),
Text(
"Page " + currentPage.toString() + "/" + totalPages.toString(),
style: TextStyle(fontSize: 11.0.sp),
),
GestureDetector(
onTap: () {
if (currentPage < totalPages) {
setState(() {
hasBlogs = false;
currentPage = ++currentPage;
});
getBlogs();
}
},
child: CircleAvatar(
radius: 3.0.h,
backgroundColor: primaryBlueColor,
child: Icon(
Icons.arrow_forward_ios_outlined,
color: Colors.white,
)),
)
],
),
)
],
)
: Container(),
),
maintainState: true,
visible: selectedIndex == 1,
),
),
GestureDetector(
onHorizontalDragUpdate: (details) {
if (details.delta.dx < 0) {
setState(() {
_tabController.animateTo(0);
selectedIndex = 0;
});
} else if (details.delta.dx > 0) {
setState(() {
_tabController.animateTo(1);
selectedIndex = 1;
});
}
},
child: Visibility(
child: Container(
child: hasPosts == true
? StaggeredGridView.countBuilder(
addAutomaticKeepAlives: true,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 3,
itemCount: postsList.posts.length,
mainAxisSpacing: 3,
crossAxisSpacing: 3,
itemBuilder: (context, index) {
return ProfilePostImageCard(
length: postsList.posts.length,
post: postsList.posts[index],
stringOfPostID: stringOfPostID,
);
},
staggeredTileBuilder: (index) {
return StaggeredTile.fit(1);
},
)
: Container(),
),
maintainState: true,
visible: selectedIndex == 2,
),
),
],
index: selectedIndex,
),
],
),
)
This is the solution. Evict the image from cache on dispose method and no more lag on screen transition.
class ProfilePostImageCard extends StatefulWidget {
const ProfilePostImageCard({Key key, this.url}) : super(key: key);
#override
State createState() => new _ProfilePostImageCardState();
}
class _ProfilePostImageCardState extends State<ProfilePostImageCard> {
#override
void dispose() {
// needs to match the url and scale from below
CachedNetworkImage.evictFromCache(widget.url);
}
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: post.postAllImage,
),
),;
}
}

Add dots in listview scroll in flutter

I need to display categories in a scroll with 3X3 in grid view and it was working fine and slide also working fine but i cant able to achieve the dots for the scrolling .. I need like carousal . Is it possible to add dots with list view
SingleChildScrollView(
child: GridView.count(
physics: ScrollPhysics(),
padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
primary: false,
childAspectRatio: 1.1,
shrinkWrap: true,
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount: 4,
// mainAxisCount:2,
//scrollDirection: Axis.horizontal,
children: List.generate(categoryData.length, (index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductCategoryPage(
categoryId: categoryData[index].id,
categoryName:
categoryData[index].name)));
},
child: Column(children: [
buildCacheNetworkImage(
width: 40,
height: 40,
url: categoryData[index].image,
plColor: Colors.transparent),
Flexible(
child: Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Text(
categoryData[index].name,
style: TextStyle(
color: CHARCOAL,
fontWeight: FontWeight.normal,
fontSize: 12,
),
textAlign: TextAlign.center,
),
),
)
]));
}),
),
)
I need to get the scrolling dots in the list view so how to achieve that
You should implement below way
Code :
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> list = [];
int perPageItem = 16;
int pageCount;
int selectedIndex = 0;
int lastPageItemLength;
PageController pageController;
#override
void initState() {
pageController = PageController(initialPage: 0);
for (int i = 1; i <= 45; i++) {
list.add('$i');
}
var num = (list.length / perPageItem);
pageCount = num.isInt ? num.toInt() : num.toInt() + 1;
var reminder = list.length.remainder(perPageItem);
lastPageItemLength = reminder == 0 ? perPageItem : reminder;
super.initState();
}
#override
void dispose() {
pageController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: [
SizedBox(
height: 390,
child: PageView.builder(
controller: pageController,
itemCount: pageCount,
onPageChanged: (index) {
setState(() {
selectedIndex = index;
});
},
itemBuilder: (_, pageIndex) {
return GridView.count(
physics: NeverScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
primary: false,
childAspectRatio: 1.1,
shrinkWrap: true,
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount: 4,
children: List.generate(
(pageCount - 1) != pageIndex
? perPageItem
: lastPageItemLength, (index) {
return GestureDetector(
onTap: () {},
child: Container(
width: 50,
height: 50,
margin: const EdgeInsets.all(5),
color: Colors.amber,
alignment: Alignment.center,
child: Text(
list[index + (pageIndex * perPageItem)],
style: TextStyle(color: Colors.black, fontSize: 20),
),
),
);
}),
);
}),
),
SizedBox(
height: 15,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: pageCount,
itemBuilder: (_, index) {
return GestureDetector(
onTap: () {
pageController.animateToPage(index, duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
},
child: AnimatedContainer(
duration: Duration(milliseconds: 100),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.red
.withOpacity(selectedIndex == index ? 1 : 0.5)),
margin: EdgeInsets.all(5),
width: 10,
height: 10,
),
);
},
),
),
],
),
);
}
}
extension NumExtensions on num {
bool get isInt => (this % 1) == 0;
}
Output :

Flutter close a dialog and reload page with filtered list of the condition selected

import 'package:flutter_event_app/constant/color.dart';
import 'package:flutter_event_app/network/models/categories.dart';
import 'package:flutter_event_app/network/models/event_model.dart';
import 'package:flutter_event_app/network/models/time.dart';
import 'package:flutter_event_app/network/services/event_api.dart';
import 'package:flutter_event_app/pages/event_detail_page.dart';
import 'package:flutter_event_app/pages/search/home_search.dart';
import 'package:flutter_event_app/widgets/event_card.dart';
import 'package:flutter_event_app/widgets/no_events.dart';
import 'package:flutter_event_app/widgets/onload.dart';
class SelectedCategory extends StatefulWidget {
// SelectedCategory(Categories categories);
final Categories categories;
final Time time;
SelectedCategory(this.categories, [this.time]);
#override
_SelectedCategoryState createState() => _SelectedCategoryState();
}
class _SelectedCategoryState extends State<SelectedCategory> {
Categories categories;
Time timing;
String timeselect;
// Event event;
void viewEventDetail(Events event) {
Navigator.of(context).push(
PageRouteBuilder(
opaque: false,
barrierDismissible: true,
transitionDuration: Duration(milliseconds: 300),
pageBuilder: (BuildContext context, animation, __) {
return FadeTransition(
opacity: animation,
child: EventDetailPage(event),
);
},
),
);
}
bool isLoading = false;
List<Events> upcomingEvents;
List categorizedupcomingEvents = [];
List categorizedPaidupcomingEvents = [];
List categorizedFreeupcomingEvents = [];
#override
void initState() {
_fetchData();
categories = widget.categories;
timing = widget.time;
// print(timing.id);
super.initState();
}
Future _fetchData() async {
setState(() => isLoading = true);
upcomingEvents = await getEventss();
categorizedupcomingEvents = upcomingEvents
.where((category) => category.category == categories.id)
.toList();
categorizedPaidupcomingEvents = categorizedupcomingEvents
.where((paid) => paid.is_paid == true)
.toList();
categorizedFreeupcomingEvents = categorizedupcomingEvents
.where((free) => free.is_paid == false)
.toList();
setState(() => isLoading = false);
}
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(
MediaQuery.of(context).size.height / 9.5,
),
child: AppBar(
title: Text(categories.categoryName),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.sort,
),
onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) =>
showFilterByTimeDialog(context);
// )
// );
}),
IconButton(
icon: Icon(
Icons.more_vert,
),
onPressed: () {})
],
bottom: TabBar(
tabs: [
Text('All'),
Text('Paid'),
Text('Free'),
],
),
),
),
body: TabBarView(
children: <Widget>[
// All
isLoading
? OnloadingCards()
: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: categorizedupcomingEvents.isEmpty
? NoItems()
: ListView.builder(
itemCount: categorizedupcomingEvents.length,
shrinkWrap: true,
primary: false,
physics: BouncingScrollPhysics(),
// scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final event =
categorizedupcomingEvents[index];
return EventCard(event,
onTap: () => viewEventDetail(event));
},
),
),
),
],
),
// Paid
isLoading
? OnloadingCards()
: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: categorizedPaidupcomingEvents.isEmpty
? NoItems()
: ListView.builder(
itemCount:
categorizedPaidupcomingEvents.length,
shrinkWrap: true,
primary: false,
physics: BouncingScrollPhysics(),
// scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final event =
categorizedPaidupcomingEvents[index];
return EventCard(event,
onTap: () => viewEventDetail(event));
},
),
),
),
],
),
// Free
isLoading
? OnloadingCards()
: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: categorizedFreeupcomingEvents.isEmpty
? NoItems()
: ListView.builder(
itemCount:
categorizedFreeupcomingEvents.length,
shrinkWrap: true,
primary: false,
physics: BouncingScrollPhysics(),
// scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final event =
categorizedFreeupcomingEvents[index];
return EventCard(event,
onTap: () => viewEventDetail(event));
},
),
),
),
],
),
],
),
));
}
void showFilterByTimeDialog(BuildContext context) {
Dialog fancyDialog = Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: SingleChildScrollView(
child: Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.5,
// alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
// color: Colors.greenAccent,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
),
),
child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.05,
child: Text(
"Time",
style: TextStyle(
color: Colors.deepPurple,
fontSize: 20,
fontWeight: FontWeight.w600),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
// color: Colors.red,
width: double.infinity,
child: ListView.builder(
shrinkWrap: true,
primary: false,
physics: BouncingScrollPhysics(),
itemCount: times.length,
itemBuilder: (context, int index) {
Time time = times[index];
return RaisedButton(
onPressed: () {
debugPrint('I am Awesome');
},
textColor: Colors.red,
// color: Colors.blueAccent,
disabledColor: Colors.grey,
disabledTextColor: Colors.white,
highlightColor: Colors.orangeAccent,
child: Text(time.name),
);
}),
),
),
),
],
),
),
),
);
showDialog(
context: context, builder: (BuildContext context) => fancyDialog);
}
}
Within the same page I have a dialog box as shown below
On the method showFilterByTimeDialog where I select an item and have to go back to the same page below the dialogue .Am still learning flutter and my issue is I need help when I select an item from the dialogue box,i refresh the same page and display a new filtered lst from the current list displayed on that page with a condition of the item selected from the dialogue box.