hungps/flutter_pokedex

Space between pokemon types on pokemon_info screen

JoaoLSA opened this issue · 2 comments

Hey, I'm new into flutter development and I would appreciate if I can help you with this app. I've found out that there is no space between pokemon types but, I don't know a nice way to fix it.
Screenshot_20200730-153033

Hi @JoaoLSA,
Thanks for your contribution. I recognized it too, and I added some spaces between them in #15. But if you want to know how to fix it by yourself, take a look at this file: /lib/screens/pokemon_info/widgets/info.dart

In _buildPokemonTypes method you can find this block of code:

            Row(
              children: pokemon.types
                  .map((type) => Hero(tag: type, child: PokemonType(type, large: true)))
                  .toList(),
            ),

This is the code to render all types of pokemon. To add space between them, you can wrap each card with Padding, or simply use the expand and take method like this to add a SizeBox between each card:

            Row(
              children: pokemon.types
                  .map((type) => Hero(tag: type, child: PokemonType(type, large: true)))
                  .expand((item) => [item, SizedBox(width: 6)])
                  .take(pokemon.types.length * 2 - 1)
                  .toList(),
            ),

Thanks a lot @scitbiz I couldn't figure out how to make that.