質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

553閲覧

【Flutter】謎の余白を消したいです

bbiiq

総合スコア51

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2023/04/09 14:20

実現したいこと

イメージ説明
Containerの子にwrapを指定しているのですが、wrapの上部(添付した画像の「#鬼滅の刃」や「#ナルト」の上です)にだけなぞの余白が生まれます。(下部(「#ふたりエッチ」、「オヤジ拾いました」の下)には余白は生まれません。)
ありとあらゆるところに「padding: EdgeInsets.zero」をしていしたり、containerに「margin: EdgeInsets.zero」を指定してはいるのですが、全く変化ありません。

どうしたら上部にだけできた余白を消すことができるのでしょうか。

該当のソースコード

Dart

1Container( 2 color: Colors.amber, 3 alignment: Alignment.topCenter, //これも無駄でした 4 width: deviceWidth(context) * 0.98, //ここは無視してください 5 height: deviceHeight(context) * 0.2, //ここは無視してください 6 padding: EdgeInsets.zero, //無駄でした 7 child: Wrap( 8 spacing: deviceWidth(context) * 0.015, 9 runSpacing: -deviceHeight(context) * 0.0185, 10 clipBehavior: Clip.hardEdge, 11 children: [ 12    //ここより下でハッシュタグを生成しています 13 for (int index = 0; index < hashTagList.length; index++) ...{ 14 HashTagButton(key: UniqueKey(), hashTagText: hashTagList[index]), 15 } 16 ], 17 ), 18 );

補足情報(FW/ツールのバージョンなど)

[✓] Flutter (Channel stable, 3.7.10, on macOS 13.1 22C65 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ta.fu

2023/04/10 00:47

dev toolのWidget Inspectorで調べてみたらどうですか。ウィジェットの配置位置や大きさを見ることができます。 HashTagButtonは手持ち環境にないのでContainer+OutlinedButtonを使いましたが、提示されたように上と下で隙間が異なる状況は再現できませんでした。(macがないのでWindowsとAndroidだけですが) HashTagButtonのtopに隙間があるのでは?
bbiiq

2023/04/15 12:53

コメントありがとうございます。 自己解決しました。申し訳ありません。
bbiiq

2023/04/15 12:57 編集

親ウィジェットのせいで余白が生まれていました。(理由は謎です)、なのでボタンウィジェットをsizedboxでラップしたら、余白を消すことができました。
guest

回答1

0

自己解決

buttonのサイズをsizedboxでラップすることで指定するようにしたら余白を消すことができました。

投稿2023/04/10 04:23

bbiiq

総合スコア51

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問