Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – TabBar in the middle of the screen messed up screens

I added in the middle of my Userpage a TabBar and I want to add different content in each one of them but when I try to add screens it’s messing around my entire code(issue video https://imgur.com/a/nDbyWqx) . What I should add so it will appear like 3 screens

Column(
            children: [
              TabBar(
                unselectedLabelColor: Colors.black,
                labelColor: const Color.fromARGB(255, 3, 59, 161),
                tabs: const [
                  Tab(
                    text: 'Services',
                  ),
                  Tab(text: 'Products'),
                  Tab(
                    text: 'Reviews',
                  ),
                ],
                controller: tabController,
                indicatorSize: TabBarIndicatorSize.tab,
              ),
            ],
          ),

          const SizedBox(
            height: 8,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const Text(
                "Recomandari",
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),

enter image description here

Tags:

2

Answers


  1. 0

    use the Tab bar view for the tab bar like below. check with below code

    Scaffold(
  appBar: AppBar(
    centerTitle: true,
    title: Text('tab bar'),),
  body: Column(
    children: [
      Text('Tab bar inside body'),
      TabBar(controller: tabController, tabs: [
      Tab( text: 'services'),
      Tab(text: 'products'),
      Tab(text: 'reviews'),
    ]),
      Expanded(
        child: TabBarView(controller: tabController, children: [
          FirstScreen(tabController: tabController),
          SecondScreen(tabController: tabController),
          ThirdScreen(tabController: tabController),
        ]),
      ),
    ],
  ),
);




 late TabController tabController;
  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this, initialIndex: 0);
    tabController.addListener(() {
      setState(() {});
    });
    super.initState();
  }
    Login or Signup to reply.
  2. 0

    Try below code hope its help to you, if you want to add some widgets on bottom of the screen I added as per UI, have you facing any issue please let me know.

    class CustomTabBar extends StatefulWidget {
  const CustomTabBar({Key? key}) : super(key: key);

  @override
  State<CustomTabBar> createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar>
    with SingleTickerProviderStateMixin {
  TabController? tabController;

  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 150,
            color: Colors.blue,
            child: const Center(
              child: Text(
                'Your Widget if you want',
              ),
            ),
          ),
          TabBar(
            unselectedLabelColor: Colors.black,
            labelColor: Colors.blue,
            tabs: const [
              Tab(
                child: Text('Services'),
              ),
              Tab(
                child: Text('Products'),
              ),
              Tab(
                child: Text('Reviews'),
              ),
            ],
            controller: tabController,
            indicatorSize: TabBarIndicatorSize.tab,
          ),
          Expanded(
            child: TabBarView(
              controller: tabController,
              children: const [
                Center(
                  child: Text(
                    'Services Screen',
                  ),
                ),
                Center(
                  child: Text(
                    'Products Screen',
                  ),
                ),
                Center(
                  child: Text(
                    'Reviews Screen',
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 150,
            color: Colors.green,
            child: const Center(
              child: Text(
                'Your Widget if you want',
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              fixedSize: Size(double.maxFinite, 30),
            ),
            child: Text(
              'Submit',
            ),
          ),
          SizedBox(
            height: 10,
          ),
        ],
      ),
    );
  }
}

    Result Screen-> image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search