AlertDialog breaks when changing display size on Android

60 Views Asked by At

I have an AlertDialog in flutter, but it breaks when I change display size in Android's settings.

Here's my code:

showDialog<void>(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return StatefulBuilder(builder: (context, setState) {
        return DynamicColorBuilder(builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
          return AlertDialog(
            title: Text(AppLocalizations.of(context)!.accentColor),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Consumer<ThemeProvider>(builder: (c, themeProvider, _) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("${AppLocalizations.of(context)!.dynamicColor}:"),
                      const SizedBox(width: 10),
                      Switch(
                        value: dynamicColor,
                        onChanged: (bool value) {
                          setState(() {
                            dynamicColor = value;
                            themeProvider.setDynamicColor(value);
                          });
                        },
                      )
                    ],
                  );
                }),
                const SizedBox(
                  height: 10,
                ),
                Stack(alignment: Alignment.center, children: [
                  Consumer<ThemeProvider>(
                    builder: (c, themeProvider, _) => GridView.count(
                      shrinkWrap: true,
                      crossAxisCount: 4,
                      physics: const NeverScrollableScrollPhysics(),
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 10,
                      children: List.generate(
                        AppColors.primaryColors.length,
                        (i) {
                          bool isSelectedColor =
                              AppColors.primaryColors[i] == themeProvider.selectedPrimaryColor;
                          return GestureDetector(
                            onTap: isSelectedColor
                                ? null
                                : () => {
                                      color = i,
                                      themeProvider.setSelectedPrimaryColor(AppColors.primaryColors[i]),
                                    },
                            child: Container(
                              height: 300,
                              decoration: BoxDecoration(
                                color: AppColors.primaryColors[i],
                                borderRadius: BorderRadius.circular(10),
                              ),
                              child: AnimatedOpacity(
                                duration: const Duration(milliseconds: 200),
                                opacity: isSelectedColor ? 1 : 0,
                                child: Center(
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(8),
                                    child: AnimatedScale(
                                      duration: const Duration(milliseconds: 150),
                                      scale: dynamicColor && lightDynamic != null ? 0 : 1,
                                      child: Container(
                                        padding: const EdgeInsets.all(5),
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(3),
                                          color: Theme.of(context).cardColor.withOpacity(0.5),
                                        ),
                                        child: const Icon(
                                          Icons.check,
                                          size: 20,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                  AnimatedScale(
                    duration: const Duration(milliseconds: 150),
                    scale: dynamicColor && lightDynamic != null ? 1 : 0,
                    child: Container(
                      width: MediaQuery.of(context).size.width,
                      height: 150,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Theme.of(context).colorScheme.surface.withOpacity(0.9)),
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Center(
                            child: Text(
                          AppLocalizations.of(context)!.accentNotAvailable,
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Theme.of(context).colorScheme.onSurface),
                        )),
                      ),
                    ),
                  ),
                ]),
              ],
            ),
            // Action Buttons
            actions: <Widget>[
              TextButton(
                child: Text(AppLocalizations.of(context)!.cancel),
                onPressed: () {
                  Navigator.of(context).pop();
                  color = StorageManager.getColor()!;
                  dynamicColor = StorageManager.getDynamicColor()!;
                  Provider.of<ThemeProvider>(context, listen: false)
                      .setSelectedPrimaryColor(AppColors.primaryColors[color]);
                  Provider.of<ThemeProvider>(context, listen: false).setDynamicColor(dynamicColor);
                  getSettings();
                },
              ),
              TextButton(
                child: Text(AppLocalizations.of(context)!.apply),
                onPressed: () {
                  Navigator.of(context).pop();
                  StorageManager.setColor(color);
                  StorageManager.setDynamicColor(dynamicColor);
                },
              ),
            ],
          );
        });
      });
    },
  );

This is how it looks with display size at max: Display Size at Max, AlertDialog

And this is when I set the display size to min: Display Size at Min, AlertDialog

This is the error:


════════ Exception caught by rendering library ═════════════════════════════════
RenderShrinkWrappingViewport does not support returning intrinsic dimensions.
The relevant error-causing widget was
AlertDialog
appbar.dart:288
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderSemanticsAnnotations does not meet its constraints.
The relevant error-causing widget was
AlertDialog
appbar.dart:288
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
_RenderInkFeatures does not meet its constraints.
The relevant error-causing widget was
AlertDialog
appbar.dart:288
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderCustomPaint does not meet its constraints.
The relevant error-causing widget was
AlertDialog
appbar.dart:288
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderPhysicalShape does not meet its constraints.
The relevant error-causing widget was
AlertDialog
appbar.dart:288
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
'package:flutter/src/rendering/object.dart': Failed assertion: line 1896 pos 14: '_debugSubtreeRelayoutRootAlreadyMarkedNeedsLayout()': is not true.
object.dart:1896
The relevant error-causing widget was
GridView
appbar.dart:316
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
'package:flutter/src/rendering/object.dart': Failed assertion: line 1896 pos 14: '_debugSubtreeRelayoutRootAlreadyMarkedNeedsLayout()': is not true.
object.dart:1896
The relevant error-causing widget was
GridView
appbar.dart:316
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
'package:flutter/src/foundation/node.dart': Failed assertion: line 112 pos 12: '_owner != null': is not true.
node.dart:112
The relevant error-causing widget was
GridView
appbar.dart:316
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
'package:flutter/src/foundation/node.dart': Failed assertion: line 112 pos 12: '_owner != null': is not true.
node.dart:112
The relevant error-causing widget was
GridView
appbar.dart:316
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
'package:flutter/src/rendering/object.dart': Failed assertion: line 1896 pos 14: '_debugSubtreeRelayoutRootAlreadyMarkedNeedsLayout()': is not true.
object.dart:1896
The relevant error-causing widget was
GridView
appbar.dart:316
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox.size accessed beyond the scope of resize, layout, or permitted parent access. RenderBox can always access its own size, otherwise, the only object that is allowed to read RenderBox.size is its parent, if they have said they will. It you hit this assert trying to access a child's size, pass "parentUsesSize: true" to that child's layout().
'package:flutter/src/rendering/box.dart':
box.dart:1
Failed assertion: line 2017 pos 13: 'debugDoingThisResize || debugDoingThisLayout || _computingThisDryLayout ||
              (RenderObject.debugActiveLayout == parent && size._canBeUsedByParent)'

The relevant error-causing widget was
AlertDialog
appbar.dart:288
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox.size accessed beyond the scope of resize, layout, or permitted parent access. RenderBox can always access its own size, otherwise, the only object that is allowed to read RenderBox.size is its parent, if they have said they will. It you hit this assert trying to access a child's size, pass "parentUsesSize: true" to that child's layout().
'package:flutter/src/rendering/box.dart':
box.dart:1
Failed assertion: line 2017 pos 13: 'debugDoingThisResize || debugDoingThisLayout || _computingThisDryLayout ||
              (RenderObject.debugActiveLayout == parent && size._canBeUsedByParent)'

The relevant error-causing widget was
AlertDialog
appbar.dart:288
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox.size accessed beyond the scope of resize, layout, or permitted parent access. RenderBox can always access its own size, otherwise, the only object that is allowed to read RenderBox.size is its parent, if they have said they will. It you hit this assert trying to access a child's size, pass "parentUsesSize: true" to that child's layout().
'package:flutter/src/rendering/box.dart':
box.dart:1
Failed assertion: line 2017 pos 13: 'debugDoingThisResize || debugDoingThisLayout || _computingThisDryLayout ||
              (RenderObject.debugActiveLayout == parent && size._canBeUsedByParent)'

The relevant error-causing widget was
AlertDialog
appbar.dart:288
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox.size accessed beyond the scope of resize, layout, or permitted parent access. RenderBox can always access its own size, otherwise, the only object that is allowed to read RenderBox.size is its parent, if they have said they will. It you hit this assert trying to access a child's size, pass "parentUsesSize: true" to that child's layout().
'package:flutter/src/rendering/box.dart':
box.dart:1
Failed assertion: line 2017 pos 13: 'debugDoingThisResize || debugDoingThisLayout || _computingThisDryLayout ||
              (RenderObject.debugActiveLayout == parent && size._canBeUsedByParent)'

I have tried to use SizedBox to limit the size of the GridView and Column, this does kind of work with lower display scalings, but then breaks at high scaling, basically the opposite of what is shown in the screenshot.

I also have tried to use MediaQuery.of(context).copyWith(textScaleFactor: 1.0) to fix the scaling, but that didn't work either

0

There are 0 best solutions below