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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

Flutter

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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

解決済

Flexibleなコンテナwidgetをタップ可能にしたい(overflow)

kariaka2020
kariaka2020

総合スコア37

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

Flutter

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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

1回答

0評価

0クリップ

42閲覧

投稿2022/05/14 09:43

前提

Flutter初学者です。
簡単なFlexibleの自作widgetをクリック(タップ)可能にしたいです。
(下にソースを載せています。)

Flexible(widthがdouble.maxFinite)にしてしまったからか、
InkWellやGestureDetectorでwrapすると、
ビルド時にオーバーフローしてしまいます。

余白をいっぱいに広がるボタンを配置するには
どのように変更すればよいでしょうか。

実現したいこと

  • 動作するようにする

overflowエラー
今の問題

理想
理想

発生している問題・エラーメッセージ

════════════════════════════════════════════════════════════════════════════════ ════════ Exception caught by rendering library ═════════════════════════════════ A RenderFlex overflowed by 1.7976931348623157e+308 pixels on the right. The relevant error-causing widget was Row lib\pages\detail_page.dart:263 ════════════════════════════════════════════════════════════════════════════════

該当のソースコード

自作のwidget

dart

class ResponsiveButton extends StatelessWidget { ResponsiveButton({Key? key}) : super(key: key); Widget build(BuildContext context) { return Flexible( child: Container( //幅いっぱい width: double.maxFinite, // ← ※ここでmaxFiniteを設定しています height: 60, decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: AppColors.mainColor), //ボタンに画像だけでなく、文字も入れたい場合はrowで横に並べる。 child: Row( mainAxisAlignment: iMainAxisAlignment.spaceBetween children: [ //テキスト表示 Container( margin: const EdgeInsets.only(left: 20), child: Text('text'), ), Image.asset("img/arrow.png"), ], ), ), ); }

使用箇所

dart

Widget build(BuildContext context) { return Scaffold( body: Container( width: double.maxFinite, height: double.maxFinite, child: Stack( children: [ ~~~~ //フッターボタン Positioned( bottom: 20, left: 20, right: 20, child: Row( children: [ //お気に入りボタン InkWell( onTap: () { //setStateで状態を更新 setState(() { isFavorite = !isFavorite; }); }, child: AppButtons( size: 60, color: isFavorite == true ? Colors.pink : AppColors.textColor1, backgroundColor: Colors.white, borderColor: isFavorite == true ? Colors.pinkAccent.withOpacity(0.9) : AppColors.textColor1, isIcon: true, icon: isFavorite == true ? Icons.favorite_rounded : Icons.favorite_border, ), ), const SizedBox( width: 20, ), //問題のコードここから----------------------------------- GestureDetector( onTap: () { // タップ時の処理 }, child: ResponsiveButton(), ), //問題のコードここまで----------------------------------- ], ), ) ], ), ), ); }

試したこと

ExpandやFlexibleなど試してみましたが、
知識が浅いためうまくいきませんでした。

ボタン側のwidthを固定値にするとエラーにはならないのですが、
ここでは幅いっぱいに広げたいです。

もし不足しているソースがあればそちらもアップしますので
教えてください。

以上、よろしくお願いいたします。

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

Flutter 2.5.1

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

Flutter

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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