Flutter - Как я могу заставить квадратный виджет занимать максимально возможное место в строке?

Question

у меня есть CustomPaintэто должен быть квадрат 1:1, и мне нужно поместить это в формат . Доступное горизонтальное и вертикальное пространство может варьироваться, поэтому мне нужно, чтобы длина и ширина квадрата были наименьшим максимальным ограничением.

Как я могу добиться такого поведения?

Я пробовал использовать для этого:

      Row(
  children: [
    ...,
    LayoutBuilder(
      builder: (context, constraints) {
        final size = min(constraints.maxWidth, constraints.maxHeight);
        return SizedBox(
          width: size,
          height: Size,
          child: CustomPaint(...),
        ),
      },
    ),
  ]
),

Это, однако, не работает, поскольку предоставляет неограниченные горизонтальные ограничения ( maxWidth == double.infinity). С использованием FittedBoxвиджет также не работает по той же причине.

Обертывание LayoutBuilderв виджете предоставляет ему ограниченную максимальную ширину, но мне нужно иметь другой виджет рядом с ним в Row, так что это не подходит. Flexibleведет себя как Expandedв этом случае также.

Answer 1

Я думаю, вы можете получить то, что хотите, от виджета AspectRatio... если вы скажете ему 1:1, то он попытается сделать квадрат, если только это полностью не возможно.

Answer 2

В итоге я решил эту проблему, переместив ответственность за сохранение виджета вверх по дереву. Виджеты, которые использовали квадратный виджет, знали больше о том, что еще они показывают, и были более способны задавать для него правильные ограничения.

Answer 3

Пожалуйста, попробуйте код ниже, используя виджет Align, ограничивающий виджет квадратом:

      import 'package:flutter/material.dart';
import 'dart:math';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: Container(),
        ),
        Expanded(
          flex: 2,
          child: LayoutBuilder(
            builder: (context, constraints) {
              final size = min(constraints.maxWidth, constraints.maxHeight);
              return Align(
                alignment: Alignment.centerRight,
                child: Container(
                  height: size,
                  width: size,
                  color: Colors.amber,
                ),
              );
            },
          ),
        ),
        // Expanded(
        //   flex: 1,
        //   child: Container(),
        // ),
      ],
    );
  }
}