Flutter - Extract name from TextField and divide by letters

CristianoSaraiva
March 10, 2024
202 views
0 votes
2 Answers

Here again to ask for help from anyone who can help me.

In a nutshell, what I want to do is: when I click on the button, extract the name entered in the textfield, separate the letters and with Page View show the image (which is in the firebase) corresponding to each letter.

I’ll leave the images of everything I find useful so that someone can help me.
I tried using a Custom Action but it didn’t work, maybe I’m using it wrong.
Images:
https://phpout.com/wp-content/uploads/2024/03/bmLjc.png

https://phpout.com/wp-content/uploads/2024/03/L8Qnl.png

https://phpout.com/wp-content/uploads/2024/03/PwqeY.png

If you need more information to help me, please ask.

Answers

- KaushikChandru
- March 4, 2024 at 9:36 pm
- 0 votes
0
You can convert the name to a list and use it in a loop like the following
```
String name = 'kaushik';
var list = name.split('').map((char) => char).toList();
print(list);

///Output
///[k, a, u, s, h, i, k]
```
Then create a map of alphabets and path to each image and you can use that for example
```
 Map<String, String> imgPath = {
      'a':'imgpathfora.jpg',
      'b':'imgPathForB.jpg'
    };
};
```
now you can render it like this
```
PageView(
          children: List.generate(
              list.length,
              (int index) =>
                  Image.network(imgPath[list[index]]!)),
        )
```
Login or Signup to reply.

- FruityFritz
- March 10, 2024 at 12:06 am
- 0 votes
0
Based on your description, you are wanting to:
1. Extract a name/letter from a TextField widget
2. Separate the name into it’s individual letters and map the letters to an image
3. Use a PageView widget to display the images which are stored in a Firestore collection
Here is what I did to accomplish what I believe you are looking for.

Page Updates

I have a local page state variable letterImages which I use to generate the children images of the PageView widget.

Local Page State

PageView Setup

Action Flow

I set up the following action flow for the button:
1. Queries the letters collection for all documents
1. Updates the letterImages local state variable with the getImages() custom function which takes the input from the TextEntry widget and the action output allLetterDocs list of letters documents as input:
Here is the custom function and a short description of what it is doing:
```
List<String> getImages(
  String inputStr,
  List<LettersRecord> letterDocs,
) {
  /// MODIFY CODE ONLY BELOW THIS LINE

  List<String> images = [];
  List<String> characters = inputStr.toLowerCase().split('');

  for (var character in characters) {
    for (var doc in letterDocs) {
      if (doc.letter == character) {
        images.add(doc.imageUrl);
        break; // Found the matching letter, no need to keep looking.
      }
    }
  }

  return images;

  /// MODIFY CODE ONLY ABOVE THIS LINE
}
```
The custom function splits the word into characters, loops through each character, connects the character to a document in the letters Firestore collection based on the letter field (a field you didn’t previously have), extracts the URL from the image_url field and appends it to a new list, and then returns the list of ImagePaths.

Firestore Schema

You will need to add the letter field to each of your Firestore documents so the custom function will work:

Result

Here is a video showing the app in action.
Login or Signup to reply.