Wrap + Extensions + Flutter Web

wrap_extension_web.dart

// Dart Extensions were introduced in Dart 2.7. Make sure you're using 'flutter channel dev'
// to try the latest implementations.

// Add the following lines inside 'analysis_options.yaml' file (root folder)
// analyzer:
//   enable-experiment:
//     - spread-collections

// Make sure to use 'flutter upgrade' and then run the code if you were not up to date.


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pokemon List',
      theme: ThemeData(
      ),
      home: PokemonScreen(),
    );
  }
}

class Pokemon {
  String name;
  String image;

  Pokemon(this.name, this.image);
}

class PokemonScreen extends StatefulWidget {
  @override
  _PokemonScreenState createState() => _PokemonScreenState();
}

class _PokemonScreenState extends State<PokemonScreen> {
  bool _toggle = false;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          SizedBox(height: 40),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(_toggle ? 'GridView' : 'Wrap', style: TextStyle(fontSize: 20)),
              Switch(value: _toggle, onChanged: (value) => setState(() => _toggle = value))
            ],
          ),
          Expanded(child: _toggle ? _gridView() : _wrap())
        ],
      ),
    );
  }
  
  Widget _gridView() {
    return Align(
      alignment: Alignment.center,
      child: GridView(
        padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 200, childAspectRatio: 1),
        children: Utils._pokemonList.mapIndex((index, item) => _pokemon(index, item)).toList(),
      ),
    );
  }

  Widget _wrap() {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
        child: Align(
          alignment: Alignment.center,
          child: Wrap(
            children: Utils._pokemonList.mapIndex((index, item) => _pokemon(index, item)).toList(),
          ),
        ),
      ),
    );
  }

  Widget _pokemon(int index, Pokemon pokemon) {
    return Container(
      height: 180,
      width: 180,
      child: Padding(
        padding: const EdgeInsets.only(right: 10, bottom: 12),
        child: Card(
          elevation: 6,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          clipBehavior: Clip.antiAlias,
          child: Stack(
            fit: StackFit.expand,
            children: [
              Padding(
                padding: const EdgeInsets.all(10),
                child: Image.network(pokemon.image),
              ),
              Positioned.fill(child: Container(color: Colors.black45)),
              Positioned(
                left: 15,
                bottom: 10,
                child: Text('#${index + 1} ${pokemon.name}', style: TextStyle(color: Colors.white, fontWeight:
                FontWeight.w600, fontSize: 16)),
              )
            ],
          ),
        ),
      ),
    );
  }
}

extension MapIndex on Iterable {
  Iterable<E> mapIndex<E, T>(E Function(int index, T item) f) sync* {
    var index = 0;
    for (final item in this) {
      yield f(index, item);
      index = index + 1;
    }
  }
}

class Utils {
  static var _pokemonList = [
    Pokemon('Bulbasaur', 'https://vignette.wikia.nocookie.net/nintendo/images/4/43/Bulbasaur.png/revision/latest/scale-to-width-down/620?cb=20141002083518&path-prefix=en'),
    Pokemon('Ivysaur', 'https://vignette.wikia.nocookie.net/nintendo/images/8/86/Ivysaur.png/revision/latest/scale-to-width-down/620?cb=20141002083450&path-prefix=en'),
    Pokemon('Venusaur', 'https://vignette.wikia.nocookie.net/nintendo/images/b/be/Venusaur.png/revision/latest/scale-to-width-down/620?cb=20141002083423&path-prefix=en'),
    Pokemon('Charmander', 'https://vignette.wikia.nocookie.net/nintendo/images/5/56/Charmander.png/revision/latest/scale-to-width-down/620?cb=20141002083351&path-prefix=en'),
    Pokemon('Charmeleon', 'https://vignette.wikia.nocookie.net/nintendo/images/f/fb/Charmeleon.png/revision/latest/scale-to-width-down/620?cb=20141002083329&path-prefix=en'),
    Pokemon('Charizard', 'https://vignette.wikia.nocookie.net/nintendo/images/9/95/Charizard.png/revision/latest/scale-to-width-down/620?cb=20141002083306&path-prefix=en'),
    Pokemon('Squirtle', 'https://vignette.wikia.nocookie.net/nintendo/images/e/e3/Squirtle.png/revision/latest/scale-to-width-down/620?cb=20141002083243&path-prefix=en'),
    Pokemon('Wartortle', 'https://vignette.wikia.nocookie.net/nintendo/images/d/d7/Wartortle.png/revision/latest/scale-to-width-down/620?cb=20141002083217&path-prefix=en'),
    Pokemon('Blastoise', 'https://vignette.wikia.nocookie.net/nintendo/images/4/41/Blastoise.png/revision/latest/scale-to-width-down/620?cb=20141002083147&path-prefix=en'),
    Pokemon('Caterpie', 'https://vignette.wikia.nocookie.net/nintendo/images/0/05/Caterpie.png/revision/latest?cb=20141002083123&path-prefix=en'),
    Pokemon('Metapod', 'https://vignette.wikia.nocookie.net/nintendo/images/6/6b/Metapod.png/revision/latest/scale-to-width-down/620?cb=20141002083057&path-prefix=en'),
    Pokemon('Butterfree', 'https://vignette.wikia.nocookie.net/nintendo/images/9/96/Butterfree.png/revision/latest?cb=20141002083032&path-prefix=en'),
    Pokemon('Weedle', 'https://vignette.wikia.nocookie.net/nintendo/images/d/d6/Weedle.png/revision/latest/scale-to-width-down/620?cb=20141002083010&path-prefix=en'),
    Pokemon('Kakuna', 'https://vignette.wikia.nocookie.net/nintendo/images/6/63/Kakuna.png/revision/latest/scale-to-width-down/620?cb=20191012231728&path-prefix=en'),
    Pokemon('Beedrill', 'https://vignette.wikia.nocookie.net/nintendo/images/0/0d/Beedrill.png/revision/latest/scale-to-width-down/620?cb=20141002082900&path-prefix=en'),
    Pokemon('Pidgey', 'https://vignette.wikia.nocookie.net/nintendo/images/b/b7/Pidgey.png/revision/latest/scale-to-width-down/620?cb=20141002082835&path-prefix=en'),
    Pokemon('Pidgeotto', 'https://vignette.wikia.nocookie.net/nintendo/images/5/57/Pidgeotto.png/revision/latest/scale-to-width-down/620?cb=20141002082803&path-prefix=en'),
    Pokemon('Pidgeot', 'https://vignette.wikia.nocookie.net/nintendo/images/a/a9/Pidgeot.png/revision/latest/scale-to-width-down/620?cb=20141002082735&path-prefix=en'),
  ];
}