2021-03-29に投稿

FlutterのTextButtonのパディングを消す方法

FlutterのFlatButtonはいつの間にか新しいTextButtonに変わっています。使ってみると、下記のように変なpaddingのスペースができてしまいます。

image.png

ButtonStyleのpaddingをゼロにしてみたりしても全然このスペースが消えません。

いろいろ試した結果、最終的に下記のようにすると空白を取りのぞけました。

    const Text('テキスト'),
    const Text('テキスト'),
    TextButton(
      child: const Text('ボタン'),
      style: ButtonStyle(
        padding: MaterialStateProperty.all(EdgeInsets.zero),
        minimumSize: MaterialStateProperty.all(Size.zero),
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      onPressed: () {},
    ),
    const Text('テキスト'),
    const Text('テキスト'),

最終的に、tapTargetSizeにshrinkWrapを指定したのが効きました。

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント