How to fix the last item of Tabbar widget?

Question

In the process of using tabbar widget, I need to show about 12 types, even if it can be dragged left and right, but it's still too troublesome, so I want them to provide another way to show a button at the end of the tabs display. When the tabbar is dragged left and right, the button is always displayed at the end, it looks like it's floating at the top when clicked. When you press the button, slide down a panel to display these 12 types in another way.

How can I add this button?

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Tabbar test',
      home: Scaffold(
        body: TabbarDemoPage(),
      )
    );
  }
}

class TabbarDemoPage extends StatefulWidget {
  _TabbarDemoPageState createState() => _TabbarDemoPageState();
}

class _TabbarDemoPageState extends State<TabbarDemoPage> with SingleTickerProviderStateMixin {
  TabController _controller;

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

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Keep Alive Demo'),
        bottom: TabBar(
          controller: _controller,
          isScrollable: true,
          tabs: <Widget>[
            Tab(text: 'category_1'),
            Tab(text: 'category_2'),
            Tab(text: 'category_3'),
            Tab(text: 'category_4'),
            Tab(text: 'category_5'),
            Tab(text: 'category_6'),
            Tab(text: 'category_7'),
            Tab(text: 'category_8'),
            Tab(text: 'category_9'),
          ],
        ),
        elevation: 0.0,
      ),
      body: TabBarView(
        controller: _controller,
        children: <Widget>[
          Center(child: Text('category 1')),
          Center(child: Text('category 2')),
          Center(child: Text('category 3')),
          Center(child: Text('category 4')),
          Center(child: Text('category 5')),
          Center(child: Text('category 6')),
          Center(child: Text('category 7')),
          Center(child: Text('category 8')),
          Center(child: Text('category 9')),
        ],
      ),
    );
  }
}

Answer 1

@Hussein Adballah

Thanks! I have finished the layout I want.But I still feel a long way to go.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('tabbar demo...'),
      elevation: 0.0,
    ),
    body: Stack(children: [
      Row(
        children: <Widget>[
          Expanded(
            child: TabBar(
              labelColor: Colors.red[300],
              unselectedLabelColor: Colors.black38,
              indicator: BoxDecoration(),
              controller: _controller,
              isScrollable: true,
              tabs: <Widget>[
                Tab(text: 'cate_1'),
                Tab(text: 'cate_2'),
                Tab(text: 'cate_3'),                            
                Tab(text: 'cate_4'),
                Tab(text: 'cate_5'),
                Tab(text: 'cate_6'),
                Tab(text: 'cate_7'),
                Tab(text: 'cate_8'),
                Tab(text: 'cate_9'),
              ],
            ),
          ),
          Container(
            width: 40.0, 
            child: Icon(Icons.more_horiz, color: Colors.black26,),
          )
        ],
      ),
      Container(
        margin: EdgeInsets.only(top: 46.0),
        child: Text('xxxxxxxxxx'),
      )
    ]),
  );
}

Answer 2

You can use a Stack widget to position the button on the topright of your scaffold object.

Try something like:

Stack(children: [
    Positioned(
    // set appropriate positioning
    CustomButton(..),
    )
    TabBar(
      controller: _controller,
      isScrollable: true,
      tabs: <Widget>[
        Tab(text: 'category_1'),
        Tab(text: 'category_2'),
        Tab(text: 'category_3'),
        Tab(text: 'category_4'),
        Tab(text: 'category_5'),
        Tab(text: 'category_6'),
        Tab(text: 'category_7'),
        Tab(text: 'category_8'),
        Tab(text: 'category_9'),
      ],
    ),
])

Once you have the bottom set up, you can also use a stack on your body to display the panel, and the button onTap function will be used to toggle its visibility