How to change the String text in the Map in Flutter according to the device language?

40 views Asked by At

I am making an application in Flutter and there are some image cards and when you click on those images you go to another page and you get descriptions about that image, I show these descriptions by calling them from Map and I send them to a dart file called details page and the details page shows this information on the screen. So far everything is fine, the problem is that I want to translate these descriptions into multiple languages, in many videos on the internet you can create a language file with initl and translate them, but I can't do it because I have hundreds of texts and I'm really confused. I will send you some examples of my code and I will be waiting for your help.

HomePage.dart

Map<String, String> imageDescriptions = {
'2 Poems.jpg':
    'Oscar Wilde was a 19th-century Irish writer, playwright and poet.He is best known forhis plays and satirical works, but he also left important works as a poet.Wildes poetry is often noted for its aesthetic and emotional depth and is often rendered with irony and wit.',
'A Christmas Carol.jpg':
    'The story begins with Scrooge being visited on Christmas Eve by the ghost of his old partner Jacob Marley. Marley comes to warn Scrooge of the consequences of his life of selfishness and lovelessness and convinces Scrooge to go on a journey visited by three ghosts.',}


Widget slide(String info, List<String> imageList) {
return Container(
  margin: EdgeInsets.fromLTRB(
    screenWidth * 0.05,
    screenHeight * 0.02,
    screenWidth * 0.05,
    0.0,
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        info,
        style: TextStyle(
          color: Colors.white,
          fontSize: screenWidth * 0.04,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 8.0),
      Container(
        height: screenHeight * 0.2,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: imageList.length,
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => DetailsPage(
                        imageName: imageList[index],
                        description:
                            imageDescriptions[imageList[index]] ?? ""),
                  ),
                );
              },
              child: Container(
                width: screenWidth * 0.20, // box lenght
                height: screenHeight * 0.1,
                margin: EdgeInsets.symmetric(horizontal: 5.0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12.0),
                  image: DecorationImage(
                    image: AssetImage('assets/pics/${imageList[index]}'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    ],
  ),
);

}

DetailsPage.dart

Padding(
       padding: const EdgeInsets.only(left: 10.0),
         child: Text(
           widget.description, // Use description from widget
            style: TextStyle(
               fontSize: screenWidth * 0.1 / 3, color: Colors.white),
            ),
          ),

earlier I tried to use the Map blog as a JSON file but this time there was no automatic change.

1

There are 1 answers

0
Emmanuel Villalobos On

There isn't a super simple way of doing it, except for setting up internationalization in your app. Once you do that, you can access the device's language and then use AppLocalizations.of(context) and then obtain any of the strings you want.