Flutter: LayoutBuilder Example

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class ResponsiveColumn extends StatelessWidget {
  const ResponsiveColumn({super.key, required this.children});

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth < 200) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: children,
          );
        } else {
          var children_ = <Widget>[];
          for (var i = 0; i < children.length; i += 2) {
            if (i + 1 < children.length) {
              children_.add(Row(
                mainAxisSize: MainAxisSize.min,
                children: [children[i], children[i + 1]],
              ));
            } else {
              children_.add(children[i]);
            }
          }
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: children_,
          );
        }
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    var children = List.filled(6, const Text("A"));
    return Scaffold(
        appBar: AppBar(title: Text(title)),
        body: Center(
            child: Column(
          children: [
            SizedBox(
              width: 190,
              child: ResponsiveColumn(children: children),
            ),
            ResponsiveColumn(children: children),
          ],
        )));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'LayoutBuilder Example'),
    );
  }
}