Skip to content

Instantly share code, notes, and snippets.

@benznest benznest/main.dart
Created Sep 17, 2019

Embed
What would you like to do?
AnimatedListexample fade transition items.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animation Practice',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
List<String> listData = List.generate(3, (index) {
return "New item";
});
GlobalKey<AnimatedListState> keyAnimatedList = GlobalKey();
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Animation"),
),
body: Container(
color: Colors.grey[300],
child: AnimatedList(
key: keyAnimatedList,
initialItemCount: listData.length,
padding: EdgeInsets.all(16),
itemBuilder: (BuildContext context, int index, Animation<double> animation) {
Widget widget = FadeTransition(opacity: animation.drive(Tween<double>(begin: 0, end: 1)), child: buildRowData(listData[index]));
return widget;
},
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FloatingActionButton(
backgroundColor: Colors.green[300],
child: Icon(
Icons.add,
),
onPressed: () {
addData();
},
),
SizedBox(
width: 8,
),
FloatingActionButton(
backgroundColor: Colors.red[300],
child: Icon(Icons.remove),
onPressed: () {
removeData();
},
),
],
),
);
}
void addData() {
listData.add("New item");
keyAnimatedList.currentState.insertItem(listData.length - 1, duration: Duration(seconds: 1));
}
void removeData() {
keyAnimatedList.currentState.removeItem(listData.length - 1, (context, animation) {
return FadeTransition(
opacity: animation.drive(Tween(begin: 0, end: 1)),
child: buildRowData(listData.last),
);
}, duration: Duration(seconds: 1));
listData.removeLast();
}
Widget buildRowData(String title) {
return Container(
margin: EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8)),
width: double.infinity,
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(fontSize: 18),
),
Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut",
style: TextStyle(fontSize: 14, color: Colors.grey),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.