Блог

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

Как реализовать округлую нижнюю панель приложений в flutter?

#flutter #dart #android-bottomappbar

#трепетание #dart #android-нижняя панель приложений

Вопрос:

Я хочу создать закругленную нижнюю панель приложений, подобную этой.
Закругленная нижняя панель приложений:

1

Но это выглядит так… Закодированная нижняя панель приложений:

2 Как мне избавиться от этой белой части?

     return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(25),
        topRight: Radius.circular(25),
        bottomRight: Radius.circular(25),
        bottomLeft: Radius.circular(25),
      ),
      child: Padding(
        padding: const EdgeInsets.only(bottom:20.0),
        child: BottomAppBar(
    
   shape: CircularNotchedRectangle(),
   child: new Row(
        
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            color: Colors.white,
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            color: Colors.white,
            onPressed: () {},
          ),
        ],
    ),
    color: Colors.blueGrey,
    ),
      )
    ); ```

Ответ №1:

Как предложил @Jagadish, я использовал Shape: RoundedRectangleBorder округлую нижнюю панель приложений. Однако для получения зубчатой панели я использовал:

     shape: AutomaticNotchedShape(
RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(25),
 ),
StadiumBorder(),
    ),
   ... //Codes=
  ),

Это также дает выемку для расширенной плавающей кнопки действия и (я думаю) для кнопок с различными формами.

Ответ №2:

Виджет панели приложений имеет свойство shape, и это то, что вы должны использовать, чтобы получить желаемые результаты, измените свой код на этот

 BottomAppBar(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        topLeft: Radius.circular(25),
        topRight: Radius.circular(25),
        bottomRight: Radius.circular(25),
        bottomLeft: Radius.circular(25),
      ),
    ),
   ... //Your codes
  ),

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

1. Спасибо! Но я также хочу сохранить круглый прямоугольник с вырезами с плавающей кнопкой в центре. Так можно ли одновременно задать форму для RoundedRectangleBorder и CircularNotchedRectangle

2. pub.dev/packages/convex_bottom_bar . Проверьте this…it может быть, это будет полезно для вас! Если нет, скажите мне, я найду другой

3. Я использовал форму: AutomaticNotchedShape( RoundedRectangleBorder(), StadiumBorder()). Он сделал то, что я хотел.