Как добавить значок внутри панели вкладок в Flutter?

#flutter #tabbar

#flutter #панель вкладок

Вопрос:

Как добавить значок внутри панели вкладок в Flutter? Спасибо за любую помощь

Картинка со значком на панели вкладок

Ответ №1:

Если под значком вы подразумеваете виджет значков, их можно добавить непосредственно в Tab виджет, используя его icon свойство.

 Tab(icon: Icon(Icons.verified), text: 'Tab 1', ),
 

Полный пример виджета:

 class HomePage extends StatelessWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text(title),
            bottom: TabBar(
              tabs: <Tab>[
                Tab(
                  icon: Icon(Icons.verified),
                  text: 'Tab 1',
                ),
                Tab(
                  icon: Icon(Icons.new_releases),
                  text: 'Tab 2',
                ),
              ],
            ),
          ),
          backgroundColor: Colors.black,
          body: TabBarView(children: <ExampleTab>[
            ExampleTab(),
            ExampleTab()
          ]),
        ));
  }
}
 

Если вы имеете в виду изображение без текста, как изображение, которое вы связали, вы можете использовать child свойство для добавления любого виджета, который вам нравится, который может быть Image виджетом, например.

 Tab(child: Image.network("https://placeimg.com/50/50")),
 
 class HomePage extends StatelessWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text(title),
            bottom: TabBar(
              tabs: <Tab>[
                Tab(
                  child: Image.network("https://placeimg.com/50/50"),
                ),
                Tab(
                  icon: Icon(Icons.new_releases),
                  text: 'Tab 2',
                ),
              ],
            ),
          ),
          backgroundColor: Colors.black,
          body: TabBarView(children: <ExampleTab>[
            ExampleTab(),
            ExampleTab()
          ]),
        ));
  }
}
 

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