Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Wrap + Extensions + Flutter Web
// 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'),
];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment