前提
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
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
まだ回答がついていません
会員登録して回答してみよう