Skip to content

Instantly share code, notes, and snippets.

@aadarshadhakalg
Created September 24, 2021 03:26
Show Gist options
  • Save aadarshadhakalg/a6b4cc409d8abdfb6386c1a964dcd86a to your computer and use it in GitHub Desktop.
Save aadarshadhakalg/a6b4cc409d8abdfb6386c1a964dcd86a to your computer and use it in GitHub Desktop.
This is example of Mapping vs using ListView.builder() in flutter
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
List items = [
{'1': 'bottle', '2': 'empty'},
{'1': 'mouse', '2': 'empty'},
];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('My App')),
body: Center(
child: BuilderWidget(),
// child: MapWidget(),
),
),
);
}
}
class MapWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
...items
.map((e) => Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(e['1']),
Text(e['2']),
]))
.toList(),
],
);
}
}
class BuilderWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(items[index]['1']),
Text(items[index]['2']),
]);
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment