Skip to content

Instantly share code, notes, and snippets.

@kranfix
Created February 3, 2021 18:01
Show Gist options
  • Save kranfix/b04b903fc583b503a46d2ed6dc410f1e to your computer and use it in GitHub Desktop.
Save kranfix/b04b903fc583b503a46d2ed6dc410f1e to your computer and use it in GitHub Desktop.
Example of Keys for Flutter
import 'dart:math';
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
children: [
Expanded(
child: MyList(),
),
Expanded(
child: MyListWithKeys(),
),
]
),
),
),
);
}
}
class MyList extends StatefulWidget {
const MyList({ Key key }) : super(key: key);
@override
_MyListState createState() => _MyListState();
}
class _MyListState extends State<MyList> {
final List<int> _allExpenses = [2, 4, 5, 6, 9, 10, 22];
List<Color> _colors;
@override
void initState(){
super.initState();
_colors = [
for(final _ in _allExpenses)
Color(Random().nextInt(0xffffffff)),
];
}
void removeOne(int index){
setState(() {
_allExpenses.removeAt(index);
_colors.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return ListView(
children: [
for(int i = 0; i < _allExpenses.length; i++)
ListTile(
//key: ObjectKey(expense),
onTap: () => removeOne(i),
leading: CircleAvatar(
radius: 20,
backgroundColor: _colors[i],
child: Icon(Icons.account_circle),
),
title: Text('Test ${_allExpenses[i]}'),
),
]
);
}
}
class MyListWithKeys extends StatefulWidget {
const MyListWithKeys({ Key key }): super(key: key);
@override
_MyListWithKeysState createState() => _MyListWithKeysState();
}
class _MyListWithKeysState extends State<MyListWithKeys> {
final List<int> _allExpenses = [2, 4, 5, 6, 9, 10, 22];
void removeOne(int expense){
setState(() {
_allExpenses.remove(expense);
});
}
@override
Widget build(BuildContext context) {
return ListView(
children: [
for(final expense in _allExpenses)
MyTile(
key: ObjectKey(expense),
expense: expense,
onTap: () => removeOne(expense),
),
]
);
}
}
class MyTile extends StatefulWidget {
const MyTile({
Key key,
@required this.expense,
@required this.onTap,
}) : assert(expense != null),
assert(onTap != null),
super(key: key);
final int expense;
final VoidCallback onTap;
@override
_MyTileState createState() => _MyTileState();
}
class _MyTileState extends State<MyTile> {
Color _color;
@override
void initState() {
super.initState();
_color = Color(Random().nextInt(0xffffffff));
}
@override
Widget build(BuildContext context) {
return ListTile(
onTap: widget.onTap,
leading: CircleAvatar(
radius: 20,
backgroundColor: _color,
child: Icon(Icons.account_circle),
),
title: Text('Test ${widget.expense}'),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment