web-dev-qa-db-ja.com

FlutterのAppBarリーディングアイコンの周りの余分なパディングを削除する方法

Flutterアプリには、このAppBarがあります

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();
            }
        )
      ],
    ),
  );
}

次のようになります：

enter image description here

AppBarを見るとわかるように、先頭のアイコンの周りには余分なパディングがあります。この余分なパディングを削除するにはどうすればよいですか。

dartflutterflutter-layout
9
Rafiqul Hasan

定義済みのウィジェットであるため、これを行うことはできません。ただし、これを行うことができます。

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を非表示にするため、独自のウィジェットを追加できます。

12
Adrian

TitleSpacingというプロパティを追加するだけで、

サンプル

appBar: new AppBar(
        leading: new Icon(Icons.Android),
        titleSpacing: 0.0,
        title: new Text(widget.title),
      ),
21
Vinoth Kumar

マテリアルパッケージのウィジェットを使用する場合、それらはマテリアルデザイン仕様 document に従って定義されます。そのため、変更がこの仕様に違反する場合、マテリアルウィジェットを使用する代わりに独自のウィジェットを作成する必要があります。

1
hunghd

Adrianからの入力を使用して、回避策を完了します。

Working Sample

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,
  ),
);
0
Pasan Randula Eramusugoda