Как удалить лишние отступы вокруг ведущего значка AppBar во Flutter

В моем приложении Flutter есть эта панель приложений.

Widget setAppBar(){
  return new AppBar(
    title: addAppBarTextWidget('Explore'),
    elevation: 0.0,
    leading: addLeadingIcon(),
    actions: <Widget>[
      addAppBarActionWidget(Constant.iconNotification, 22.0, 16.0, 8.0),
      addAppBarActionWidget(Constant.iconProfile, 30.0, 30.0, 15.0)
    ],
  );
}

Widget addLeadingIcon(){
  return new Container(
    height: 25.0,
    width: 25.0,
    padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
    margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
    child: new Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        new Image.asset(
          Constant.iconNotification,
          width: 25.0,
          height: 25.0,
        ),
        new FlatButton(
            onPressed: (){
              onLeadingShowCategoryClick();
            }
        )
      ],
    ),
  );
}

это выглядит так:

введите описание изображения здесь

Как вы можете видеть на панели приложений, вокруг ведущего значка есть дополнительные отступы. Как мне удалить эту лишнюю прокладку.


flutter dart flutter-layout
person Rafiqul Hasan    schedule 22.05.2018    source источник
comment
спасла мне день, проверяла много статей   -  person Nifal Nizar    schedule 31.10.2020

Ответы (8)


arrow_upward
67
arrow_downward

Вы не можете этого сделать, потому что это предопределенный виджет. Однако вы можете сделать это:

appBar: AppBar(
  automaticallyImplyLeading: false, // Don't show the leading button
  title: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      IconButton(
        onPressed: () => Navigator.pop(context),
        icon: Icon(Icons.arrow_back, color: Colors.white),
      ),
      // Your widgets here
    ],
  ),
),

Где automaticallyImplyLeading: true скрывает ведущий IconButton, чтобы вы могли добавлять свои собственные виджеты.

person Adrian    schedule 22.05.2018
comment
Большое спасибо, я столкнулся с подобной проблемой, это очень помогает. Кстати, этим решением я исправил пробел между ведущими и замыкающими виджетами. - person Ryan Yan; 14.05.2020
comment
Я хотел панель приложений только с двумя кнопками. Это помогло мне с выравниванием главной оси. Спасибо, Адриан. - person MAA; 02.02.2021

arrow_upward
94
arrow_downward

Просто добавьте свойство с названием titleSpacing,

Образец

appBar: AppBar(
        leading: Icon(Icons.android),
        titleSpacing: 0,
        title: Text(widget.title),
      ),
person Vinoth Kumar    schedule 22.05.2018
comment
Он удаляет отступы / поля перед заголовком, а не дополнительные отступы вокруг ведущего значка. - person Rafiqul Hasan; 22.05.2018
comment
Я знаю, что это, возможно, не ответ на вопрос OP, но это был ответ на результат, которого я хотел достичь, когда заголовок оставался ровно слева без поля. - person bimbo1989; 17.07.2019
comment
это должен был быть принятый ответ. это решение сохраняет поведение панели приложения по умолчанию. на панели приложения по умолчанию отображается кнопка меню или кнопка возврата, в зависимости от навигатора. см. здесь api.flutter.dev/flutter/material/AppBar/leading.html < / а> - person Majed DH; 23.02.2020
comment
спасибо, что спас мне день - person user1080247; 08.04.2021

arrow_upward
18
arrow_downward

введите описание изображения здесь

Краткий ответ:

AppBar(
  leadingWidth: 8, // <-- Use this
  centerTitle: false, // <-- and this
  leading: Icon(Icons.android),
  title: Text('Title'),
)

Дополнительные настройки:

AppBar(
  leading: Transform.translate(
    offset: Offset(-15, 0),
    child: Icon(Icons.android),
  ),
  titleSpacing: -30,
  centerTitle: false,
  title: Text("Title"),
)

и если вы не хотите использовать какой-либо ведущий виджет:

введите описание изображения здесь

AppBar(
  title: Text('Title'),
  centerTitle: false,
  titleSpacing: 0,
)
person CopsOnRoad    schedule 29.02.2020
comment
Установка малых значений leadWidth делает кнопку "Назад" неактивной. - person K.Amanov; 08.06.2021

arrow_upward
9
arrow_downward

просто установите titleSpacing и automaticallyImplyLeading для удаления пробела

нравиться

AppBar(
        titleSpacing: 0,
        automaticallyImplyLeading: false,
)
person Akshay I    schedule 03.03.2020
comment
Оба эти свойства упомянуты в этом сообщении, пожалуйста, не добавляйте одинаковый ответ. - person iDecode; 11.04.2020

arrow_upward
8
arrow_downward

Завершите рабочий обходной путь при участии Адриана.

Рабочий образец

return Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    titleSpacing: 0.0,
    title: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.menu),
          onPressed: () => _scaffoldKey.currentState.openDrawer(),
        ),
        Stack(
          alignment: Alignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.mail_outline),
              onPressed: _onClickNotification,
            ),
            Positioned(
              top: 12.0,
              right: 10.0,
              width: 10.0,
              height: 10.0,
              child: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: AppColors.notification,
                ),
              ),
            )
          ],
        ),
        Expanded(
          child: Center(child: Text('test')),
        )
      ],
    ),
    automaticallyImplyLeading: false,
    centerTitle: true,
    actions: <Widget>[
      Row(
        children: <Widget>[
          Text('Online'),
          Switch(
            value: true,
            onChanged: (bool value) {},
          )
        ],
      )
    ],
  ),
  drawer: Drawer(
    child: _buildDrawer(),
  ),
  body: Container(
    color: Colors.orange,
  ),
);
person Pasan Randula Eramusugoda    schedule 15.09.2019

arrow_upward
7
arrow_downward

Вы можете попробовать это, это отлично работает. когда вы устанавливаете ведущий = null, то лишнее пространство ведущего виджета будет удалено.

appBar: new AppBar(
        leading: null,
        titleSpacing: 0.0,
        title: new Text("title"),
      ),
person bj 742    schedule 23.06.2020

arrow_upward
4
arrow_downward

Если вам просто нужно переместить значок немного влево, как это сделал я, вы все равно можете использовать ведущее свойство и просто установить выравнивание на IconButton:

    leading: Builder(
      builder: (BuildContext context) {
        return IconButton(
          onPressed: () => Navigator.pop(context),
          icon: MyIcon(),
          alignment: Alignment(-0.5, 0.0), // move icon a bit to the left
        );
      },
    ),
person meatrobot    schedule 07.11.2019

arrow_upward
1
arrow_downward

Если вы используете виджеты из пакета материалов, они определены в соответствии со спецификацией дизайна материалов document. Поэтому, если ваша модификация нарушает эту спецификацию, вы должны создать свой собственный виджет вместо использования материальных виджетов.

person hunghd    schedule 22.05.2018
comment
В спецификации Material Design я ничего не читал о дополнительных отступах для ведущего значка. У обеих сторон по 16 дпс. - person Johnny; 07.03.2019