ConvexAppBar does not work on Flutter Web - flutter

Question

I've built an app for Android and iOS using the ConvexAppBar and it worked perfectly. Now I need to create a web version for this app. For that I changed the flutter channel to beta and updated all dependecies. But the app never works when the ConvexAppBar is shown in screen,I get the following error:
The following assertion was thrown building StyleProvider:
DefaultTabController.of() was called with a context that does not
contain a DefaultTabController widget. No DefaultTabController widget
ancestor could be found starting from the context that was passed to
DefaultTabController.of(). This can happen because you are using a
widget that looks for a DefaultTabController ancestor, but no such
ancestor exists.
To be able to change the tabs without clicking on the menu items I've created a GlobalKey for ConvexAppBar and ScaffoldState:
final GlobalKey<ConvexAppBarState> appBarKey = GlobalKey<ConvexAppBarState>();
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
The ConvexAppBar is set in the bottomNavigationBar:
class HomePageView extends StatelessWidget {
const HomePageView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final cubit = BlocProvider.of<HomePageCubit>(context);
var translation =
Map<String, String>.from(globals.translation['HomePageTranslation']);
return Scaffold(
key: scaffoldKey,
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const HeaderMenu(),
DrawerContent(cubit, translation),
],
),
),
onDrawerChanged: (bool value) {
cubit.onDrawerChanged(value);
},
body: BlocConsumer<HomePageCubit, HomePageState>(
listenWhen: (previous, current) => current is OpenAddTaskState,
listener: (context, state) {
if (state is OpenAddTaskState) {
goToAddTaskPage(context);
}
},
buildWhen: (previous, current) =>
current is InitHomePageState ||
current is LoadingTasksHomePageState ||
current is LoadedReceivedTasksState ||
current is LoadedSentTasksState ||
current is LoadedNotificationsState,
builder: (context, state) {
if (state is InitHomePageState ||
state is LoadingTasksHomePageState) {
return ProgressView(
message: translation['loadingHomePageText'] ?? '',
);
}
if (state is LoadedReceivedTasksState) {
return TaskListReceivedContainer(
[
translation['inboxText'] ?? '',
translation['toDoText'] ?? '',
translation['refusedText'] ?? '',
translation['finishedText'] ?? '',
translation['followingText'] ?? '',
'Menu'
],
'received',
);
}
if (state is LoadedSentTasksState) {
return TaskListSentContainer(
[
translation['pendingText'] ?? '',
translation['acceptedText'] ?? '',
translation['refusedSentText'] ?? '',
translation['finishedSentText'] ?? '',
],
'sent',
);
}
if (state is LoadedNotificationsState) {
return const NotificationsContainer();
}
return const ErrorView('Unknown error');
},
),
bottomNavigationBar: BlocBuilder<HomePageCubit, HomePageState>(
builder: (context, state) {
if (state is LoadedSentTasksState) {
return convexMenu(context, const Color(0xffa98e47),
context.read<HomePageCubit>().notifications, translation);
}
return convexMenu(context, const Color(0xff00c9ff),
context.read<HomePageCubit>().notifications, translation);
},
),
);
}
void goToAddTaskPage(BuildContext blocContext) {
Navigator.of(blocContext)
.push(
MaterialPageRoute(
builder: (context) => AddTaskContainer(Task()),
),
)
.then(
(value) => blocContext.read<HomePageCubit>().reloadTasks(),
);
}
}
The convexMenu file is the following:
StyleProvider convexMenu(BuildContext context, Color activeColor,
List<nt.Notification>? notifications, Map<String, String> translation) {
var counter = 0;
if (notifications != null) {
for (var notification in notifications) {
if (!notification.read) {
counter++;
}
}
}
return StyleProvider(
style: Style(),
child: ConvexAppBar.badge(
{3: counter == 0 ? '' : counter.toString()},
badgeMargin: const EdgeInsets.only(bottom: 32, left: 34),
key: appBarKey,
style: TabStyle.fixedCircle,
backgroundColor: Colors.white,
color: Colors.grey,
activeColor: activeColor,
items: [
TabItem(
icon: const Icon(
ReceivedIcon.receivedIcon,
color: Colors.grey,
size: 12,
),
title: translation['receivedMenuText'] ?? '',
activeIcon: const Icon(
ReceivedIcon.receivedIcon,
color: Color(0xff00c9ff),
size: 12,
),
),
TabItem(
icon: const Icon(SentIcon.sentIcon, color: Colors.grey),
title: translation['sentMenuText'] ?? '',
activeIcon: const Icon(SentIcon.sentIcon, color: Color(0xffa98e47)),
),
const TabItem(
icon: Icon(
Icons.add_rounded,
size: 48,
color: Colors.white,
),
),
TabItem(
icon: Icons.notifications,
// title: AppLocalizations.of(context)!.notifications
title: translation['notificationsMenuText'] ?? '',
),
TabItem(
icon: Icons.menu,
// title: AppLocalizations.of(context)!.menu
title: translation['menuText'] ?? '',
),
],
// initialActiveIndex: 1,
onTap: (int i) {
context.read<HomePageCubit>().changeTab(context, i);
},
),
);
}
class Style extends StyleHook {
#override
double get activeIconSize => 20;
#override
double get activeIconMargin => 10;
#override
double get iconSize => 20;
#override
TextStyle textStyle(Color color, String? s) {
return TextStyle(fontSize: 12, color: color);
}
}
Is there a way to make ConvexMenuBar work on the web? It worked perfectly on the mobile version.