web-dev-qa-db-ja.com

Flutter IconButtonの大きなパディングを削除するにはどうすればよいですか？

IconButtonの列をすべて隣り合わせにしたいのですが、実際のアイコンとIconButtonの制限の間にはかなり大きなパディングがあるようです。既にボタンのパディングを0に設定しています。

これは私のコンポーネントで、非常に簡単です。

class ActionButtons extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Container(
        color: Colors.lightBlue,
        margin: const EdgeInsets.all(0.0),
        padding: const EdgeInsets.all(0.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            IconButton(
              icon: new Icon(ScanrIcons.reg),
              alignment: Alignment.center,
              padding: new EdgeInsets.all(0.0),
              onPressed: () {},
            ),
            IconButton(
              icon: new Icon(Icons.volume_up),
              alignment: Alignment.center,
              padding: new EdgeInsets.all(0.0),
              onPressed: () {},
            )
          ],
        ),
      );
    }
}

enter image description here

私はほとんどの水色のスペースを取り除き、アイコンを左から早く、互いに近づけるようにしたいのですが、IconButton自体のサイズを変更する方法が見つかりません。

このスペースはボタン自体によって占められていると確信しています。'centerRightおよびcenterLeftに配置を変更すると、次のようになります。

enter image description here

実際のアイコンを小さくしても効果はありません。ボタンはまだ大きいです：

enter image description here

助けてくれてありがとう

flutterflutter-layout
6
Pablote

余白はそれほど多くありません。 IconButtonは、タップ可能なオブジェクトが必要であるという仕様に従うマテリアルデザインウィジェットです。 各側で少なくとも48px。 IDEからIconButton実装をクリックすることができます。

また、ファイル全体が他のウィジェットを構成するだけで、ほとんどがコメントである200行しかないため、icon_button.Dartのソースコードを半自明に取得して、Material Design仕様に従わない独自のIconButtonを作成することもできます。

8
xster

この問題を回避する2つの方法。

それでもIconButtonを使用する

幅のあるコンテナ内にIconButtonをラップします。

例えば：

Container(
  padding: const EdgeInsets.all(0.0),
  width: 30.0, // you can adjust the width as you need
  child: IconButton(
  ),
),

IconButtonの代わりにGestureDetectorを使用します

Shyju Madathilが推奨するIconButtonの代わりにGestureDetectorを使用することもできます。

GestureDetector( onTap: () {}, child: Icon(Icons.volume_up) )
11
sgon00

ユーザーが画面に触れた場所にアイコンをレンダリングしようとしても、同様の問題に直面していました。残念ながら、Iconクラスは、選択したアイコンをSizedBoxでラップします。

Iconクラスのソースを少し読むと、各アイコンをテキストとして扱うことができることがわかります。

Widget iconWidget = RichText(
      overflow: TextOverflow.visible,
      textDirection: textDirection,
      text: TextSpan(
        text: String.fromCharCode(icon.codePoint),
        style: TextStyle(
          inherit: false,
          color: iconColor,
          fontSize: iconSize,
          fontFamily: icon.fontFamily,
          package: icon.fontPackage,
        ),
      ),
    );

したがって、たとえば、Icons.details私のユーザーが何の余白もなく、ちょうど指し示した場所を示すために、私はこのような何かをすることができます：

Widget _pointer = Text(
      String.fromCharCode(Icons.details.codePoint),
      style: TextStyle(
        fontFamily: Icons.details.fontFamily,
        package: Icons.details.fontPackage,
        fontSize: 24.0,
        color: Colors.black
      ),
    );

Dart/Flutterのソースコードは非常に親しみやすいため、少し掘り下げることを強くお勧めします。

1
Aaron Myatt