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

Question

前提

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

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

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

実現したいこと

• 動作するようにする

今の問題

↓

理想

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

════════════════════════════════════════════════════════════════════════════════

════════ 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

class ResponsiveButton extends StatelessWidget {

  ResponsiveButton({Key? key})
      : super(key: key);

  @override
  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"),
          ],
        ),
      ),
    );
  }

使用箇所

  @override
  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

Answer 1

ExpandやFlexibleは親のWidgetに合うように広げるので、この場合GestureDetectorをExpandで囲む必要があります。

GestureDetector(　//<- これをExpandで囲む、ResponsiveButtonのFlexibleは不要
                      onTap: () {
                         // タップ時の処理
                      },
                      child: ResponsiveButton(),
                    ),

　
Rowの子にExpandを使う場合は幅はExpandが決めるので、この場合はResponsiveButtonの

width: double.maxFinite,

は必要ありません。（あってもエラーにはなりませんが）

Comments

[kariaka2020]

教えていただいた方法と、自作widgetのFlexibleを消すことで
望み通りの動きをさせることができました。

回答ありがとうございました！