Question 356348 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Extract name from TextField and divide by letters

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.

Tags:

2

Answers


  1. 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.
  2. 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

    page state variable

    PageView Setup

    PageView setup

    Action Flow

    I set up the following action flow for the button:

    action flow

    1. Queries the letters collection for all documents

    query letters

    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:

    custom function

    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:

    firestore schema

    Result

    Here is a video showing the app in action.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search