Rerordering tabs upwards does not work

[MrFahrenheit-55]

When you reorder tabs to the next index, i.e index 0 to 1, the tabs don't reorder. This works if you reorder tabs to a lower index, i.e. tab 1 to 0. You can use the example code provided.

import 'package:flutter/material.dart';
import 'package:tabbed_view/tabbed_view.dart';

void main() {
  runApp(TabbedViewExample());
}

class TabbedViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false, home: TabbedViewExamplePage());
  }
}

class TabbedViewExamplePage extends StatefulWidget {
  @override
  _TabbedViewExamplePageState createState() => _TabbedViewExamplePageState();
}

class _TabbedViewExamplePageState extends State<TabbedViewExamplePage> {
  late TabbedViewController _controller;

  @override
  void initState() {
    super.initState();
    List<TabData> tabs = [];

    tabs.add(TabData(
        text: 'Tab 1',
        leading: (context, status) => Icon(Icons.star, size: 16),
        content: Padding(child: Text('Hello'), padding: EdgeInsets.all(8))));
    tabs.add(TabData(
        text: 'Tab 2',
        content:
            Padding(child: Text('Hello again'), padding: EdgeInsets.all(8))));
    tabs.add(TabData(
        closable: false,
        text: 'TextField',
        content: Padding(
            child: TextField(
                decoration: InputDecoration(
                    isDense: true, border: OutlineInputBorder())),
            padding: EdgeInsets.all(8)),
        keepAlive: true));

    _controller = TabbedViewController(tabs);
  }

  @override
  Widget build(BuildContext context) {
    TabbedView tabbedView = TabbedView(controller: _controller);
    Widget w =
        TabbedViewTheme(child: tabbedView, data: TabbedViewThemeData.mobile());
    return Scaffold(body: Container(child: w, padding: EdgeInsets.all(32)));
  }
}

[caduandrade]

Hi @PhilipNell-258

I believe you were confused with usability. I hope it's not a problem for others :smile:.

When you drag the tab to reorder, a rectangle is highlighted, right? This rectangle represents the index between 2 tabs.

But it can also allow you to move directly to index 0 or the index after the last tab. And that's why it's important to be an area other than the tab itself. It might not even have a tab.

So if the tabs are [A][B][C], moving [A] between [A] and [B], it remains [A][B][C]. But moving [B] before [A], the result is [B][A][C].

If the solution was "throw this tab into the index of this other tab", the user would have difficulty moving a tab to the beginning or end.

[MrFahrenheit-55]

Great, thanks for the explanation @caduandrade . However, I have defined my own reorder function using the tabviewcontroller. When moving the tab [A] between [B][C], then tab A is moved such that [B][C][A] instead of [B][A][C]. I can send you an example if you like.

[MrFahrenheit-55]

Thanks for the feedback. I have found the problem in my custom reorder function. Great package!!