Блог

Главная - Вопросы по программированию - Как создать изогнутые вкладки на панели вкладок в flutter

Как создать изогнутые вкладки на панели вкладок в flutter

#dart #flutter #flutter-layout

#dart #flutter #flutter-макет

Вопрос:

Как я могу создать изогнутые вкладки, подобные этому изображению? Изображение вкладок

Вот мой код, который я попробовал : 

 TabBar(
    controller: _tabcntrl,
    indicatorColor: Colors.white,
    indicator: BoxDecoration(color: Colors.white),
    indicatorSize: TabBarIndicatorSize.label,
    labelPadding: EdgeInsets.all(0),
    tabs: <Widget>[
        DecoratedBox(
            decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(50))),
              child: FlatButton(
                child: SizedBox(
                  width: 80,
                  child: Text(
                    'Expense',
                  ),
                ),
                onPressed: () {},
              ),
            ),

          ],
        ),

Я попытался задать радиус для поля FlatButton, но это не сработало.

Комментарии:

1. вам также нужна кривая снизу, как показано на рисунке, или кривая внутри, для этого вы можете использовать свойство borderRadius индикатора.

2. Привет, спасибо, это сработало. есть еще предложения о том, как сделать эту кривую между вкладкой и ее контейнером?

3. Пожалуйста, добавьте что-нибудь еще, что именно вы хотите. Я не могу понять, чего вы хотите больше сейчас.

Ответ №1:

 Container(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(30),
        topRight: Radius.circular(30),
      ),
    ),
    child: TabBar(
      // indicatorPadding: EdgeInsets.all(30),

      tabs: [
        Tab(
          child: Text(
            "data",
            style: TextStyle(color: Colors.black),
          ),
        ),
        Tab(
          child: Text(
            "data",
            style: TextStyle(color: Colors.black),
          ),
        ),
      ],
    ),
  ),