MarianumMobile/Client
5
1
Fork 0
Code Issues 34 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

WIP: Persistent Bottom navigation bar, moved appbar layer to page view

Browse Source
This commit is contained in:
Elias Müller
2023-03-17 23:31:42 +01:00
parent 35f2e3fe74
commit cc47f9bee7
5 changed files with 196 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
lib/app.dart
View File

@ -4,12 +4,15 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'package:marianum_mobile/data/chatList/chatListProps.dart';
import 'package:marianum_mobile/screen/pages/timetable/timetable.dart';
import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
import 'package:provider/provider.dart';
import 'screen/pages/files/files.dart';
import 'screen/pages/more/overhang.dart';
import 'screen/pages/talk/chatList.dart';
import 'screen/settings/settings.dart';
import 'package:badges/badges.dart' as badges;
class App extends StatefulWidget {
const App({Key? key}) : super(key: key);
@ -59,97 +62,60 @@ class _AppState extends State<App> {
@override
Widget build(BuildContext context) {
final PageController pageController = PageController();
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: _appBar,
body: Column(
children: [
Visibility(
visible: false,
child: LinearProgressIndicator(
backgroundColor: Colors.transparent,
valueColor: AlwaysStoppedAnimation(Theme.of(context).primaryColor),
minHeight: 5,
),
PersistentTabController tabController = PersistentTabController(initialIndex: 0);
return PersistentTabView(
context,
controller: tabController,
navBarStyle: NavBarStyle.style3,
backgroundColor: Colors.white70,
screenTransitionAnimation: ScreenTransitionAnimation(animateTabTransition: true, curve: Curves.ease, duration: Duration(milliseconds: 200)),
screens: [
const Timetable(),
const ChatList(),
Files(setAppBar),
const Overhang(),
],
items: [
PersistentBottomNavBarItem(
activeColorPrimary: Theme.of(context).primaryColor,
inactiveColorPrimary: Theme.of(context).disabledColor,
icon: const Icon(Icons.calendar_month),
title: "Vertretung"
),
PersistentBottomNavBarItem(
activeColorPrimary: Theme.of(context).primaryColor,
inactiveColorPrimary: Theme.of(context).disabledColor,
icon: Consumer<ChatListProps>(
builder: (context, value, child) {
if(value.primaryLoading()) return const SizedBox.shrink();
int messages = value.getRoomsResponse.data.map((e) => e.unreadMessages).reduce((a, b) => a+b);
return badges.Badge(
showBadge: messages > 0,
badgeStyle: const badges.BadgeStyle(
badgeColor: Colors.white
),
badgeContent: Text("$messages", style: const TextStyle(color: Colors.black)),
child: const Icon(Icons.chat),
);
},
),
Flexible(
child: PageView(
controller: pageController,
children: [
const Timetable(),
const ChatList(),
Files(setAppBar),
const Overhang(),
],
onPageChanged: (page) {
setState(() {
currentPage = page;
});
},
),
)
],
),
bottomNavigationBar: BottomNavigationBar(
items: [
const BottomNavigationBarItem(icon: Icon(Icons.calendar_month), label: "Vertretung"),
BottomNavigationBarItem(icon: Stack(
children: [
const Icon(Icons.chat),
Consumer<ChatListProps>(
builder: (context, value, child) {
if(value.primaryLoading()) return const SizedBox.shrink();
int messages = value.getRoomsResponse.data.map((e) => e.unreadMessages).reduce((a, b) => a+b);
return Visibility(
visible: messages > 0,
child: Positioned(
right: 0,
top: 0,
child: Container(
padding: const EdgeInsets.all(1),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(6),
),
constraints: const BoxConstraints(
minWidth: 13,
minHeight: 13,
),
child: Text(
"$messages",
style: const TextStyle(
color: Colors.white,
fontSize: 10,
),
textAlign: TextAlign.center,
),
),
),
);
},
)
],
), label: "Talk"),
const BottomNavigationBarItem(icon: Icon(Icons.folder), label: "Dateien"),
const BottomNavigationBarItem(icon: Icon(Icons.more_horiz), label: "Mehr"),
],
selectedItemColor: Theme.of(context).primaryColor,
unselectedItemColor: Colors.grey,
showUnselectedLabels: true,
showSelectedLabels: true,
type: BottomNavigationBarType.fixed,
currentIndex: currentPage,
onTap: (item) {
setAppBar(context, null);
setState(() {
currentPage = item;
pageController.jumpToPage(item);
});
},
),
title: "Talk"
),
PersistentBottomNavBarItem(
activeColorPrimary: Theme.of(context).primaryColor,
inactiveColorPrimary: Theme.of(context).disabledColor,
icon: const Icon(Icons.folder),
title: "Dateien"
),
PersistentBottomNavBarItem(
activeColorPrimary: Theme.of(context).primaryColor,
inactiveColorPrimary: Theme.of(context).disabledColor,
icon: const Icon(Icons.more_horiz),
title: "Mehr"
),
],
);
}
}