LayoutWidgetのサンプル

main.dart

import 'package:flutter/material.dart';

/// Container: デフォルトでは幅や高さを持たず、子要素の装飾ができる。
/// Column: childrenを垂直に配置。
/// Wrap: childrenにフィット。
/// Center: widthFactorを指定しなければ全体に広がる
///
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            // body: ColumnWidget(),
            // body: WrapWidget(),
            // body: ColumnWidget()
            body: CenterWidget()));
  }
}

class ColumnWidget extends StatelessWidget {
  const ColumnWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(color: Colors.amber, border: Border.all()),
        child: Column(children: items));
  }
}

class WrapWidget extends StatelessWidget {
  const WrapWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.amber, border: Border.all()),
      child: Wrap(children: items),
    );
  }
}

class ContainerWidget extends StatelessWidget {
  const ContainerWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.amber, border: Border.all()),
      child: Column(children: items),
    );
  }
}

class CenterWidget extends StatelessWidget {
  const CenterWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.amber, border: Border.all()),
      child: Center(
        /**  heightFactor or widthFactor を設定すると 上下 or 左右 に寄る */
        // 幅係数: null以外の場合は子要素の幅になる。2なら子要素の幅の2倍の幅
        // widthFactor: 1,
        heightFactor: 1,
        child: Wrap(children: items),
      ),
    );
  }
}

List<Widget> items = <Widget>[
  Chip(
    avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900, child: const Text('AH')),
    label: const Text('Hamilton'),
  ),
  Chip(
    avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900, child: const Text('ML')),
    label: const Text('Lafayette'),
  ),
  Chip(
    avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900, child: const Text('HM')),
    label: const Text('Mulligan'),
  ),
  Chip(
    avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900, child: const Text('JL')),
    label: const Text('Laurens'),
  ),
];