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),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

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

CodePudding user response：

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