How to add functionality to an instantiated widget in flutter? - flutter

Question

I am trying to create a package where I add some functionality to a BottomNavigationBar. I want a generic helper that when used, wraps a bottom nav widget with another widget and changes its onTap method. Unfortunately, onTap is final and cannot be changed. This forces me to create the BottomNavigationBar widget in the package code. This results in me having to delegate all properties of the BottomNavigationBar from the user.
Ideally, I want the user to pass me a navigation bar instance, and I add the functionality to it as long as the passed in widget has currentIndex and onTap properties settable.
How would you solve this?
Edit
Code snippet for what I am trying to achieve:
class ExtendedBottomNav extends StatefulWidget {
const ExtendedBottomNav({required this.bottomNavBar});
final BottomNavigationBar bottomNavBar;
#override
State<StatefulWidget> createState() => ExtendedBottomNavState();
}
class ExtendedBottomNavState extends State<ExtendedBottomNav> {
int _currentTabIndex = 0;
#override
Widget build(BuildContext context) {
widget.bottomNavBar.currentIndex = _currentTabIndex;
widget.bottomNavBar.onTap = (int index) => {
// Some code, using _currentTabIndex
};
return Scaffold(
body: Text("Text"), // Some body
bottomNavigationBar: widget.bottomNavBar,
);
}
}
This is not possible because 'onTap' can't be used as a setter because it's final.

Answer 1

You can use this approach (uses null safety). I've not used all the constructor parameters, you can modify as per your need.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: CustomBottomNavigationBar(bar:BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
));
}
}
class CustomBottomNavigationBar extends StatelessWidget {
final BottomNavigationBar bar;
CustomBottomNavigationBar({ required this.bar});
BottomNavigationBar? customBar;
#override
Widget build(BuildContext context) {
customBar = BottomNavigationBar(
items: bar.items,
currentIndex: bar.currentIndex,
selectedItemColor: bar.selectedItemColor,
onTap: (int index){
// here you can add your additional code
print("hi");
if(bar.onTap != null)
bar.onTap!(index);
},
);
return Container(
child:customBar);
}
}
Without null safety
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: CustomBottomNavigationBar(bar:BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
));
}
}
class CustomBottomNavigationBar extends StatelessWidget {
final BottomNavigationBar bar;
CustomBottomNavigationBar({ #required this.bar});
BottomNavigationBar customBar;
#override
Widget build(BuildContext context) {
customBar = BottomNavigationBar(
items: bar.items,
currentIndex: bar.currentIndex,
selectedItemColor: bar.selectedItemColor,
onTap: (int index){
print("hi");
if(bar.onTap != null)
bar.onTap(index);
},
);
return Container(
child:customBar);
}
}

Answer 2

i think you can do it by extending the BottomNavigationBar widget and override
the onTap funtion and tell user to pass the new subclass of BottomNavigationBar
class NewBottomNavigationBar extends BottomNavigationBar {
NewBottomNavigationBar(List<BottomNavigationBarItem> items)
: super(items: []);
#override
ValueChanged<int>? onTap;
}