web-dev-qa-db-ja.com

フラッターの例のフローレイアウト

フローレイアウトをフラッターに実装したいsdkでFLOWというクラスを見つけましたが、その使用方法に関するサンプルコードが見つかりません

これが私が達成しようとしているレイアウトです

enter image description here

dartflutterflutter-layoutflutter-dependencies
6
user3924438

Wrapの代わりに Flow を使用します。

Flowは、より複雑なカスタムレイアウト用です。 Wrapは、スクリーンショットのレイアウトを実現するために使用されるものです。

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
      Chip(
        avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
        label: Text('Hamilton'),
      ),
      Chip(
        avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
        label: Text('Lafayette'),
      ),
      Chip(
        avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
        label: Text('Mulligan'),
      ),
      Chip(
        avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
        label: Text('Laurens'),
      ),
  ],
)
20
Rémi Rousselet

Flutterラップでは、スクリーンショットのようなレイアウトを作成するためのバッターウィジェットです

Wrap：画面上で使用可能なスペースに応じて子を調整できます。デフォルトの配置は水平（行のように）ですが、垂直（列のように）にすることもできます。

chip：このウィジェットはTAGまたはチップの作成に使用します

new Wrap(
  spacing: 5.0, // horizontal gap between chips
  runSpacing: 2.0, // gap between row
  children: <Widget>[
      new Chip(
        label: new Text('One'),
      ),
      new Chip(
        label: new Text('Two'),
      ),
      new Chip(
       label: new Text('Three'),
      ),
      new Chip(
        label: new Text('Four'),
      ),
  ],
)
0
Sanjayrajsinh