Добавление ярлыков вкладок в TabView во Flutter

Question

Я пытаюсь расширить TabView, предложенный в качестве ответа здесь .

В частности, вместо серых точек я хотел бы иметь метки категорий и загружать в качестве вкладки содержимое виджета, соответствующего этой категории.

Я пытался следовать документам, но если я что-то изменил в AppBar, это просто выдает ошибку повторного рендеринга.

Answer 1

Вы можете достичь желаемого с помощью виджета TabController . Я нашел простой пример TabBar здесь .

Answer 2

Вы можете достичь того, что вы хотели с помощью DefaultTabController виджета. Вы можете увидеть пример здесь только с иконками. А вот его модифицированная версия с заголовками. TabBar часть предназначена для вкладки и ее спецификации. TabBarView для внутреннего вида.

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car), text: "Car",),
                Tab(icon: Icon(Icons.directions_transit), text: "Transit"),
                Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

Если вы воспользуетесь приведенным выше кодом, вы получите 3 вкладки с пояснительным текстом.

EDIT:

//Call the widget as follows
new TabBarDemo(createTabsDynamically());

//method to use for dynamic creation.
List<Tab> createTabsDynamically() {

    List<String> titles = ["Car", "Transit", "Bike"];
    List<IconData> iconData = [Icons.directions_car, Icons.directions_transit, Icons.directions_bike];
    List<Tab> tabs = new List();
    // Assuming titles and icons have the same length
    for (int i = 0; i< titles.length; i++) {
      tabs.add(Tab(icon: Icon(iconData[i]), text: titles[i],));
    }

    return tabs;
}

class TabBarDemo extends StatelessWidget {

  List<Tab> tabs;
  TabBarDemo(this.tabs);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: tabs,
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}