How to get containers width when using a loop or List.generate?

Question

I am generating individual letters of a word into their own containers and I need to get the width of each container and add them to a list. How do I go about achieving this?

For example, if the word is "character" then flutter will render: [c][h][a][r][a][c][t][e][r]

Initially, I was using GlobalKeys to retrieve the width however, since I split the code into multiple files, I couldn't figure out how to access the GlobalKeys from another file and I can't find any information on google how to do that. Also, if the word has 20 letters then I will need to declare 20 GlobalKeys and a map to store those 20 keys.

I figure it would be better if there was a way to retrieve each container's width and store them in a list as they are being generated.

String displayWord = "character";

final [key0 to key19] = GlobalKey(); //PREVIOUS APPROACH
Map keys = { ** map of 20 keys ** }; //PREVIOUS APPROACH
.
.
.
    return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: List.generate(displayWord.length, (index) {
          return Container(
            key: keys[index], //PREVIOUS APPROACH
            child: Text(displayWord[index]),
          );
        }));

While you like to have `character` to `[c][h][a][r][a][c][t][e][r]`, we can simply include `[]` based on position. Can you include an output image that you like to archive. — Md. Yeasin Sheikh, Sep 23 '21 at 05:57
I don't follow you. Can you explain more? The reason why I want the width is so that I can manually calculate the position of the borders between the letters. Because after the word is rendered on screen, I need to animate lines directly in the center of each letter. If you have a better approach then I am open to the idea. Are you suggesting that there is a way to get the position of each container? — Ian Rajkumar, Sep 23 '21 at 06:03
While the priority is to render `[x]` format, you can do `Text("[${displayWord[index]}]"),` and if you wish to have different style, I would prefer `RichText` instead of using Row. I'm trying to say we don't need container. Also, everything depends on how you like to animate. can you include a gif — Md. Yeasin Sheikh, Sep 23 '21 at 06:07
I am not interested in style as much as I am interested in finding a way to get the precise center between each and every letter. I am not sure how ´Text("[${displayWord[index]}]")´ will help me achieve that. I am still new to flutter. Will you approach help me to do that? — Ian Rajkumar, Sep 23 '21 at 06:14

score 0 · Answer 1 · answered Sep 23 '21 at 06:12

0

I have done something similar with the help of the answer over here: https://stackoverflow.com/a/62536187/679553

You can use that code to calculate the size of text with a certain style.

answered Sep 23 '21 at 06:12

Gazihan Alankus

11,256
7
46
57

score 0 · Answer 2 · answered Sep 23 '21 at 06:31

If you prefer using GlobalKey:

  static const letter = 'character';
  static final keys = List.generate(letter.length, (_) => GlobalKey());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: List.generate(
            letter.length,
            (index) {
              final key = keys[index];
              return Container(
                key: key,
                child: () {
                  final char = letter[index];
                  Future.delayed(Duration.zero, () {
                    final width =
                        (key.currentContext?.findRenderObject() as RenderBox)
                            .size
                            .width;
                    print('$char: $width');
                  });

                  return Text(char);
                }(),
              );
            },
          ),
        ),
      ),
    );
  }

How to get containers width when using a loop or List.generate?

2 Answers2