Flutter Tab Bar - For Use Case Like This? - flutter

Question

How can I achieve something like this in Flutter? Is it possible in
I have tried these codes and it gave me an error which said no DefaultTabController. I was confused where I should put it in. Example in internet wrote I have to put it in Scaffold body. But my code required some widgets to display image using Stack before using TabBar.
import 'package:felix_idn/library/widget/components/enums.dart';
import 'package:felix_idn/library/widget/components/path.dart';
import 'package:felix_idn/library/widget/ui/button.dart';
import 'package:felix_idn/library/widget/ui/text.dart';
import 'package:felix_idn/menu/music/music_therapy.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class MusicAmbient extends StatelessWidget {
const MusicAmbient({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
],
),
title: Text('Flutter Tabs Example'),
),
body: Container(
color: Colors.black,
child: SafeArea(
child: Container(
color: const Color.fromARGB(115, 55, 55, 55),
child: Stack(
children: [
//Icon back
Align(
alignment: Alignment.topLeft,
child: IconButton(
icon: const Icon(Icons.arrow_back_sharp),
iconSize: 32.0,
constraints: const BoxConstraints(),
padding: const EdgeInsets.all(3.0),
onPressed: () => Get.off(() => const MusicTherapy()),
color: Colors.white,
),
),
//Piano Background & Tabs
Align(
alignment: Alignment.topCenter,
child: Column(
children: [
const SizedBox(height: 40.0),
ImageButton(path: bgamb, callback: () => Get.back(), type: IconType.NONE),
const TabBarView(
children: [
MusicTherapy(),
MusicTherapy(),
],
),
],
),
),
//Title
Align(
alignment: Alignment.topCenter,
child: Column(
children: const [
SizedBox(height: 6.0),
Titles("Ambient", color: Colors.white, size: 20.0),
],
),
),
],
),
),
),
),
);
}
}

Answer 1

You need to create and use TabController.
class MusicAmbient extends StatefulWidget {
const MusicAmbient({super.key});
#override
State<MusicAmbient> createState() => _MusicAmbientState();
}
class _MusicAmbientState extends State<MusicAmbient>
with SingleTickerProviderStateMixin {
late final TabController controller = TabController(length: 2, vsync: this);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: controller, //here
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
],
),
title: Text('Flutter Tabs Example'),
),
body: Container(
color: Colors.black,
child: SafeArea(
child: Container(
color: const Color.fromARGB(115, 55, 55, 55),
child: Stack(
children: [
//Icon back
Align(
alignment: Alignment.topLeft,
child: IconButton(
icon: const Icon(Icons.arrow_back_sharp),
iconSize: 32.0,
constraints: const BoxConstraints(),
padding: const EdgeInsets.all(3.0),
onPressed: null,
color: Colors.white,
),
),
//Piano Background & Tabs
Align(
alignment: Alignment.topCenter,
child: Column(
children: [
const SizedBox(height: 40.0),
// ImageButton(
// path: bgamb,
// callback: () => Get.back(),
// type: IconType.NONE),
Expanded(
child: TabBarView(
controller: controller,//here
children: [
// MusicTherapy(),
// MusicTherapy(),
Text("A"),
Text("B"),
],
),
),
],
),
),
//Title
Align(
alignment: Alignment.topCenter,
child: Column(
children: const [
SizedBox(height: 6.0),
// Titles("Ambient", color: Colors.white, size: 20.0),
],
),
),
],
),
),
),
),
);
}
}
Also you can try using flexibleSpace on AppBar for the image.
More about using TabBar

Answer 2

Please create customTabar it's very easy to create with provider.