onTap with Flutter plugin floating_frosted_bottom_bar - flutter

Question

I am using the Flutter plugin floating_frosted_bottom_bar, and I want to display a page when the second item is clicked. I don't know how to do this. The code I have so far is this:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:floating_frosted_bottom_bar/floating_frosted_bottom_bar.dart';
import 'logo_list.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Frosted bottom bar',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Frosted bottom bar'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late int currentPage;
late TabController tabController;
final List<Color> colors = [
Colors.blue,
Colors.blue,
Colors.blue,
Colors.blue,
Colors.blue
];
#override
void initState() {
currentPage = 0;
tabController = TabController(length: 5, vsync: this);
tabController.animation!.addListener(
() {
final value = tabController.animation!.value.round();
if (value != currentPage && mounted) {
changePage(value);
}
},
);
super.initState();
}
void changePage(int newPage) {
setState(() {
currentPage = newPage;
});
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: FrostedBottomBar(
opacity: 0.6,
sigmaX: 5,
sigmaY: 5,
child: TabBar(
indicatorPadding: const EdgeInsets.fromLTRB(6, 0, 6, 0),
controller: tabController,
indicator: const UnderlineTabIndicator(
borderSide: BorderSide(color: Colors.blue, width: 4),
insets: EdgeInsets.fromLTRB(16, 0, 16, 8),
),
tabs: [
TabsIcon(
icons: Icons.home,
color: currentPage == 0 ? colors[0] : Colors.white),
TabsIcon(
icons: Icons.search,
color: currentPage == 1 ? colors[1] : Colors.white),
TabsIcon(
icons: Icons.queue_play_next,
color: currentPage == 2 ? colors[2] : Colors.white),
TabsIcon(
icons: Icons.file_download,
color: currentPage == 3 ? colors[3] : Colors.white),
TabsIcon(
icons: Icons.menu,
color: currentPage == 4 ? colors[4] : Colors.white),
],
),
borderRadius: BorderRadius.circular(500),
duration: const Duration(milliseconds: 800),
hideOnScroll: false,
body: (context, controller) => TabBarView(
controller: tabController,
dragStartBehavior: DragStartBehavior.down,
physics: const BouncingScrollPhysics(),
children: colors
.map(
(e) => ListView.builder(
controller: controller,
itemBuilder: (context, index) {
return const Card(child: FittedBox(child: FlutterLogo()));
},
),
)
.toList(),
),
),
);
}
}
class TabsIcon extends StatelessWidget {
final Color color;
final double height;
final double width;
final IconData icons;
const TabsIcon(
{Key? key,
this.color = Colors.white,
this.height = 60,
this.width = 50,
required this.icons})
: super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
height: height,
width: width,
child: Center(
child: Icon(
icons,
color: color,
),
),
);
}
}
The output I got: https://imgur.com/a/MKkHcEH
I am a beginner in Flutter so if you have a solution, please make it simple. Thanks in advance!

Answer 1

I updated your code, Put your screens in List[Screens] only instead off ffff() , hope it helps.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:floating_frosted_bottom_bar/floating_frosted_bottom_bar.dart';
import 'ffff.dart';
import 'hhkllj.dart';
// import 'logo_list.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Frosted bottom bar',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Frosted bottom bar'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
int currentPage = 0;
late TabController tabController;
final List<Color> colors = [
Colors.blue,
Colors.blue,
Colors.blue,
Colors.blue,
Colors.blue
];
List<Widget> Screens = [
fff(),
hhhhh(),
fff(),
hhhhh(),
fff(),
];
#override
void initState() {
tabController = TabController(length: 5, vsync: this);
tabController.animation!.addListener(
() {
final value = tabController.animation!.value.round();
if (value != currentPage && mounted) {
changePage(value);
}
},
);
super.initState();
}
void changePage(int newPage) {
setState(() {
currentPage = newPage;
});
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: FrostedBottomBar(
opacity: 0.6,
sigmaX: 5,
sigmaY: 5,
child: TabBar(
indicatorPadding: const EdgeInsets.fromLTRB(6, 0, 6, 0),
controller: tabController,
indicator: const UnderlineTabIndicator(
borderSide: BorderSide(color: Colors.blue, width: 4),
insets: EdgeInsets.fromLTRB(16, 0, 16, 8),
),
tabs: [
TabsIcon(
icons: Icons.home,
color: currentPage == 0 ? colors[0] : Colors.white),
TabsIcon(
icons: Icons.search,
color: currentPage == 1 ? colors[1] : Colors.white),
TabsIcon(
icons: Icons.queue_play_next,
color: currentPage == 2 ? colors[2] : Colors.white),
TabsIcon(
icons: Icons.file_download,
color: currentPage == 3 ? colors[3] : Colors.white),
TabsIcon(
icons: Icons.menu,
color: currentPage == 4 ? colors[4] : Colors.white),
],
),
borderRadius: BorderRadius.circular(500),
duration: const Duration(milliseconds: 800),
hideOnScroll: false,
body: (context, controller) => Screens[currentPage]
// (context, controller) => TabBarView(
// controller: tabController,
// dragStartBehavior: DragStartBehavior.down,
// physics: const BouncingScrollPhysics(),
// children: colors.map(
// (e) => ListView.builder(
// controller: controller,
// itemBuilder: (context, index) {
// return const Card(child: FittedBox(child: FlutterLogo()));
// },
// ),
// )
// .toList(),
// ),
),
);
}
}
class TabsIcon extends StatelessWidget {
final Color color;
final double height;
final double width;
final IconData icons;
const TabsIcon(
{Key? key,
this.color = Colors.white,
this.height = 60,
this.width = 50,
required this.icons})
: super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
height: height,
width: width,
child: Center(
child: Icon(
icons,
color: color,
),
),
);
}
}