row_column_layouts.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
          textTheme: const TextTheme(
            labelLarge: TextStyle(fontSize: 28),
          ),
          appBarTheme: const AppBarTheme(
            backgroundColor: Colors.orange,
          )),
      home: const RowColumnScreen(),
    );
  }
}

class RowColumnScreen extends StatefulWidget {
  const RowColumnScreen({super.key});

  @override
  State<RowColumnScreen> createState() => _RowColumnScreenState();
}

class _RowColumnScreenState extends State<RowColumnScreen> {
  var _isRow = true;
  var _mainAxisAlignment = MainAxisAlignment.start;
  var _crossAxisAlignment = CrossAxisAlignment.start;
  var _mainAxisSize = MainAxisSize.min;

  MainAxisAlignment _mainAxisAlignmentFromIndex(int index) => switch (index) {
        0 => MainAxisAlignment.start,
        1 => MainAxisAlignment.end,
        2 => MainAxisAlignment.center,
        3 => MainAxisAlignment.spaceBetween,
        4 => MainAxisAlignment.spaceAround,
        5 => MainAxisAlignment.spaceEvenly,
        _ => MainAxisAlignment.start,
      };

  CrossAxisAlignment _crossAxisAlignmentFromIndex(int index) => switch (index) {
        0 => CrossAxisAlignment.baseline,
        1 => CrossAxisAlignment.start,
        2 => CrossAxisAlignment.end,
        3 => CrossAxisAlignment.center,
        4 => CrossAxisAlignment.stretch,
        _ => CrossAxisAlignment.start,
      };

  void _updateLayout(int index) {
    setState(() {
      _isRow = index == 0;
    });
  }

  void _updateMainAxisAlignment(int index) {
    setState(() {
      _mainAxisAlignment = _mainAxisAlignmentFromIndex(index);
    });
  }

  void _updateCrossAxisAlignment(int index) {
    setState(() {
      _crossAxisAlignment = _crossAxisAlignmentFromIndex(index);
    });
  }

  void _updateMainAxisSize(int index) {
    setState(() {
      _mainAxisSize = index == 0 ? MainAxisSize.min : MainAxisSize.max;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          RowColumnLayoutAttributes(
            onUpdateLayout: _updateLayout,
            onUpdateMainAxisAlignment: _updateMainAxisAlignment,
            onUpdateCrossAxisAlignment: _updateCrossAxisAlignment,
            onUpdateMainAxisSize: _updateMainAxisSize,
          ),
          Expanded(
            child: ColoredBox(
              color: Colors.yellow,
              child: _isRow
                  ? Row(
                      mainAxisAlignment: _mainAxisAlignment,
                      crossAxisAlignment: _crossAxisAlignment,
                      textBaseline: TextBaseline.alphabetic,
                      mainAxisSize: _mainAxisSize,
                      children: const [
                        Icon(Icons.stars, size: 50.0),
                        Icon(Icons.stars, size: 100.0),
                        Icon(Icons.stars, size: 50.0),
                      ],
                    )
                  : Column(
                      mainAxisAlignment: _mainAxisAlignment,
                      crossAxisAlignment: _crossAxisAlignment,
                      textBaseline: TextBaseline.alphabetic,
                      mainAxisSize: _mainAxisSize,
                      children: const [
                        Icon(Icons.stars, size: 50.0),
                        Icon(Icons.stars, size: 100.0),
                        Icon(Icons.stars, size: 50.0),
                      ],
                    ),
            ),
          ),
        ],
      ),
    );
  }
}

class RowColumnLayoutAttributes extends StatelessWidget {
  const RowColumnLayoutAttributes({
    super.key,
    required this.onUpdateLayout,
    required this.onUpdateMainAxisAlignment,
    required this.onUpdateCrossAxisAlignment,
    required this.onUpdateMainAxisSize,
  });

  final ValueChanged<int> onUpdateLayout;
  final ValueChanged<int> onUpdateMainAxisAlignment;
  final ValueChanged<int> onUpdateCrossAxisAlignment;
  final ValueChanged<int> onUpdateMainAxisSize;

  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: Colors.orange,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            flex: 1,
            child: Column(
              children: <Widget>[
                LayoutAttributeSelector(
                  title: 'Layout',
                  values: const ['row', 'column'],
                  onIndexChanged: onUpdateLayout,
                ),
                LayoutAttributeSelector(
                  title: 'Main Axis Size',
                  values: const ['min', 'max'],
                  onIndexChanged: onUpdateMainAxisSize,
                ),
              ],
            ),
          ),
          Expanded(
            flex: 1,
            child: Column(
              children: [
                LayoutAttributeSelector(
                  title: 'Main Axis Alignment',
                  values: const [
                    'start',
                    'end',
                    'center',
                    'space\nbetween',
                    'space\naround',
                    'space\nevenly'
                  ],
                  onIndexChanged: onUpdateMainAxisAlignment,
                ),
                LayoutAttributeSelector(
                  title: 'Cross Axis Alignment',
                  values: const [
                    'start',
                    'end',
                    'center',
                    'stretch', /*'baseline'*/
                  ],
                  onIndexChanged: onUpdateCrossAxisAlignment,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class LayoutAttributeSelector extends StatefulWidget {
  const LayoutAttributeSelector({
    super.key,
    required this.title,
    required this.values,
    this.disabled = false,
    required this.onIndexChanged,
  });

  final String title;
  final List<String> values;
  final bool disabled;
  final ValueChanged<int> onIndexChanged;

  @override
  State<StatefulWidget> createState() => LayoutAttributeSelectorState();
}

class LayoutAttributeSelectorState extends State<LayoutAttributeSelector> {
  var _valueIndex = 0;

  void _next() {
    _valueIndex = _valueIndex + 1 < widget.values.length ? _valueIndex + 1 : 0;
    _update();
  }

  void _previous() {
    _valueIndex = _valueIndex > 0 ? _valueIndex - 1 : widget.values.length - 1;
    _update();
  }

  void _update() {
    widget.onIndexChanged(_valueIndex);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Text(widget.title),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            padding: const EdgeInsets.all(4.0),
            icon: const Icon(Icons.arrow_back),
            onPressed: widget.disabled ? null : _previous,
          ),
          Text(
            widget.values[_valueIndex],
            maxLines: 2,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontWeight: FontWeight.w700,
              color: widget.disabled ? Colors.black26 : Colors.black87,
            ),
          ),
          IconButton(
            padding: const EdgeInsets.all(4.0),
            icon: const Icon(Icons.arrow_forward),
            onPressed: widget.disabled ? null : _next,
          ),
        ],
      ),
      const Divider(color: Colors.black54, height: 1),
    ]);
  }
}