I would like to combine dropdown button with a TabBar I found a solution but the DropDown button is inside the Tab and you have to press on the letter to display the dropdown button and it does not do so when pressing the entire TabBar that is why although it is a solution it is not the best, could you help me improve.
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Material App',
home: TabBarDemo(),
);
}
}
class TabBarDemo extends StatefulWidget {
const TabBarDemo({Key? key}) : super(key: key);
@override
State<TabBarDemo> createState() => _TabBarDemoState();
}
class _TabBarDemoState extends State<TabBarDemo> {
String? selectedValue;
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: 4,
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Widget'),
bottom: TabBar(
tabs: [
const Tab(icon: Icon(Icons.cloud_outlined)),
const Tab(icon: Icon(Icons.beach_access_sharp)),
const Tab(icon: Icon(Icons.brightness_5_sharp)),
DropdownButtonHideUnderline(
child: DropdownButton<String?>(
value: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value;
});
},
items: ["A", "B", "C"]
.map(
(e) => DropdownMenuItem(
value: e,
child: Text(e),
),
)
.toList(),
),
),
],
),
),
body: TabBarView(
children: [
const Center(child: Text("It's cloudy here")),
const Center(
child: Text("It's rainy here"),
),
const Center(
child: Text("It's sunny here"),
),
Center(child: Text("TabBar here ${selectedValue ?? "select 1st"}")),
],
),
),
);
}
}
