☰

Flutterでカード内の行アイテムをラップする方法 質問する

tag-icon • tag-icon dart flutter row word-wrap
Flutterでカード内の行アイテムをラップする方法 質問する

アイテムの行 (テキスト ウィジェットとチェックボックス ウィジェット) を含むカードがあります。問題は、カードが各行の限られたスペースしか埋めることができず、行の次の行に移動しないことです。折り返しウィジェットを使用してみましたが、効果はありませんでした。次のエラーが繰り返し表示されます。

ここに画像の説明を入力してください

ご覧のとおり、次の行に折り返されるのではなく、すべてを 1 行に収めようとしています。これが私のコードです。

Widget _buildCategories() {
return Card(
    margin: const EdgeInsets.only(top: 20.0),
    child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: <Widget>[
          Text(
            'Categories',
            style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
          ),
          Wrap(
            children: <Widget>[
              Row(
            children: <Widget>[
              _checkBox('Gaming'),
              _checkBox('Sports'),
              _checkBox('Casual'),
              _checkBox('21 +'),
              _checkBox('Adult'),
              _checkBox('Food'),
              _checkBox('Club'),
              _checkBox('Activities'),
              _checkBox('Shopping'),
            ],
          )
            ],
          )
          
        ],
      ),
    ));
 }


Widget _checkBox(String category) {
return Expanded(
    child: Column(
  children: <Widget>[
    Text(
      '$category',
      textAlign: TextAlign.center,
      style: TextStyle(fontFamily: 'MonteSerrat'),
    ),
    Checkbox(
      value: false,
      onChanged: (value) {
        // We will update the value to the firebase data here
        print('updated value to: $value');
      },
    )
  ],
));
 }

ベストアンサー1

以下の変更を加えてコードを修正しました:

  • Row内部のウィジェットを削除しましたWrap。

  • Expandedウィジェットを削除しました。

  • maxLinesウィジェットにプロパティを追加しますText。

           Widget _buildCategories() {
          return Card(
              margin: const EdgeInsets.only(top: 20.0),
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  children: <Widget>[
                    Text(
                      'Categories',
                      style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
                    ),
                    Wrap(
                      children: <Widget>[
                        _checkBox('Gaming'),
                        _checkBox('Sports'),
                        _checkBox('Casual'),
                        _checkBox('21 +'),
                        _checkBox('Adult'),
                        _checkBox('Food'),
                        _checkBox('Club'),
                        _checkBox('Activities'),
                        _checkBox('Shopping')
                      ],
                    )
                  ],
                ),
              ));
        }

        Widget _checkBox(String category) {
          return Column(
                children: <Widget>[
                  Text(
                    '$category',
                    maxLines: 1,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontFamily: 'MonteSerrat'),
                  ),
                  Checkbox(
                    value: false,
                    onChanged: (value) {
                      // We will update the value to the firebase data here
                      print('updated value to: $value');
                    },
                  )
                ],
              );
        }
      }

runSpacingまた、ウィジェットspacingにプロパティを追加して、Wrapアイテム間の水平方向と垂直方向のスペースを広げることもできます。

     Wrap(
            runSpacing: 5.0,
            spacing: 5.0,

詳細はこちら:https://api.flutter.dev/flutter/widgets/Wrap-class.html

おすすめ記事