Я использую виджет Flutter bottomNavigatonBar, Есть ли что-нибудь, что можно поднять? - PullRequest
0 голосов
/ 19 февраля 2020

Это то, что я хочу!

        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
        bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          notchMargin: 4.0,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.notifications),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.perm_identity),
                onPressed: () {},
              ),
            ],
          ),
        ),

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

Ответы [ 2 ]

0 голосов
/ 20 февраля 2020

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

0 голосов
/ 19 февраля 2020

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

Но для вашего решения оберните ваш IconButton контейнером и используйте свойство decoration, чтобы добавить тень и получить эффект повышения.


    Container(
      width: 100,
      decoration : BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        color: Colors.red,
        boxShadow: [
          BoxShadow(color: Colors.black, blurRadius: 2, offset: Offset(5,5))

        ]

      ),
      child: IconButton(
        color: Colors.green,
        icon : Icon(Icons.access_alarm),
        onPressed : (){
          //
        }
      ),
    )

Это вывод:

enter image description here

Вы можете изменить свойство offset, чтобы настроить направление тени ,

...