Wrap widget doesn’t prevent overflow when using accessibility options

I have a very particular question. I'm coding a cryptogram app and I'm trying to figure out how to accommodate for visibility as best I can. I have the Wrap widget functioning fine when the font is the standard size (as set in the system) but if I crank the font size way up (like a friend of mine sometimes has to do) then the widgets overflow. I currently have each cryptogram broken down into an array of strings, and each string is further broken down into an array of character display widgets, so the children of the wrap are a list of word widgets that are, in turn, a list of these character widgets. I'll post code below. But what I am trying to achieve is the same kind of wrapping as is happening now, because there are 260 quotes so programming a layout for each one is out of the question, but also allow for side to side scrolling when the font is much larger than normal. I've also attached screenshots to illustrate what is happening.

            Expanded(
              flex: 5,
              child: Scrollbar(
                child: SingleChildScrollView(
                  child: Container(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: Wrap(
                        spacing: 8.0,
                        runSpacing: 8.0,
                        children: _createWordWidgets(),
                      ),
                    ),
                  ),
                ),
              ),
            ),
  List<Widget> _createWordWidgets() {
    List<Widget> list = List();
    for (int i = 0; i < gameManager.getWords().length; i++) {
      list.add(WordWidget(
        word: gameManager.getWords()[i],
        selection: selection,
      ));
    }
    return list;
  }
  List<String> getWords() {
    return _cipherHelper.getWordList();
  }

  void _makeWordList() {
    _words = _cryptogram.split(' ').toList();
  }

  List<String> getWordList() {
    return _words;
  }
class WordWidget extends StatefulWidget {
  WordWidget({this.word, this.selection});

  final String word;
  final String selection;

  @override
  _WordWidgetState createState() => _WordWidgetState();
}

class _WordWidgetState extends State<WordWidget> {
  List<String> characters;
  List<LetterWidget> letterWidgets = List();
  CipherHelper brain = CipherHelper.getInstance();

  @override
  Widget build(BuildContext context) {
    characters = widget.word.split('');
    return Padding(
      padding: EdgeInsets.symmetric(
        horizontal: 4.0,
      ),
      child: Container(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: _createLetters(widget.selection),
        ),
      ),
    );
  }
class LetterWidget extends StatelessWidget {
  final String playerGuess;
  final String codeLetter;
  final String selectedLetter;

  LetterWidget({this.codeLetter, this.playerGuess, this.selectedLetter});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 2.0),
      child: ConstrainedBox(
        constraints: BoxConstraints(minHeight: 50, minWidth: 24),
        child: Container(
          color: setContainerColor(context),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text(
                  setText(),
                  style: kGuessText,
                  textAlign: TextAlign.end,
                ),
                Container(
                  color: setDividerColor(context),
                  height: 2,
                  width: 24,
                  // indent: 20,
                  // endIndent: 20,
                ),
                Text(
                  codeLetter,
                  style: kCipherText,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

standard size font accessibility increased font



Read more here: https://stackoverflow.com/questions/65013096/wrap-widget-doesnt-prevent-overflow-when-using-accessibility-options

Content Attribution

This content was originally published by DJRay at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: