Animation Preview Picture with Flutter
flutter_nineold
Jiugongge picture list, support 9+ number display, support Hero animation preview picture
Demo
Start
Add dependency in flutter project file
dependencies:
...
nineold: ^1.3.4
For how to run the flutter project, refer to the official documentation .
new version update
1.3.4
1. Update pub dependency and flutter version
1.3.3
1. Fix the same problem of Hero animation tag with the same picture address
1.3.2
1. The same address of the image hero animation cannot be loaded
2. Fix the black screen display of Hero animation
1.3.1
1. Long press the picture to call back the picture position
2. Fix the picture display misalignment bug
1.3.0
1. Add a callback for viewing the picture long press event
2. Support custom loading box, and more picture text styles
1.2.0
1. Adapt to the screen width and height display
2. Support dynamic display of pictures above 9+
Instructions
Import nine_old_widget.dart
import 'package:nineold/widget/nine_old_widget.dart';
Simple usage
class _MyHomePageState extends State<MyHomePage> {
List<List<String>> images = [];
@override
void initState() {
super.initState();
images.add(getData());
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Nine Old"),
),
body: ListView.separated(
itemBuilder: (context, index) {
return _buildActiveItem(index, getData().sublist(0, index));
},
itemCount: 13,
separatorBuilder: (BuildContext context, int index) =>
Divider(height: 1.0, color: Colors.lightBlueAccent),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
// count++;
// images.add(getData().sublist(0, count % 15));
});
},
),
);
}
Widget _buildActiveItem(int index, List<String> photos) {
return Container(
margin: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_buildActiveItemHeader(index),
null != photos || photos.isNotEmpty
? NineOldWidget(
images: photos,
//必填
onLongPressListener: (position) {
//可选
//长按事件回调
print("长按事件回调当前位置 ： $position");
},
backgroundColor: Colors.white,
//可选
//加载背景颜色
valueColor: Colors.red,
//可选
//加载进度条颜色
strokeWidth: 4,
//可选
//加载进度条宽度
moreStyle:
TextStyle(fontSize: 28, color: Colors.orange), //更多加号样式
)
: SizedBox()
],
),
);
}
Widget _buildActiveItemHeader(int index) {
return Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipOval(
child: Image.network(
"http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&f=JPEG?w=900&h=1350",
width: 30.0,
height: 30.0,
),
),
],
),
Text("第$index条")
],
),
);
}
List<String> getData() {
List<String> list = [];
list.add(
"http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&f=JPEG?w=900&h=1350");
list.add(
"http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&f=JPEG?w=900&h=1350");
list.add(
"http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&f=JPEG?w=900&h=1350");
list.add(
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3687862105,320198720&fm=26&gp=0.jpg");
list.add(
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=339659526,3524437886&fm=26&gp=0.jpg");
list.add(
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1492148550,3573121792&fm=11&gp=0.jpg");
list.add(
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3059211665,2147448542&fm=26&gp=0.jpg");
list.add(
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2333676140,2717071870&fm=11&gp=0.jpg");
list.add(
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2417108265,1198830140&fm=26&gp=0.jpg");
list.add(
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=244450851,2728981198&fm=26&gp=0.jpg");
list.add(
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2083759825,3454063564&fm=26&gp=0.jpg");
list.add(
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=310077658,2097249993&fm=11&gp=0.jpg");
list.add(
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=415170272,1239551712&fm=26&gp=0.jpg");
list.add(
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1030558027,1672821388&fm=26&gp=0.jpg");
list.add(
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3153722339,140981551&fm=26&gp=0.jpg");
list.add(
"https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1584605109&t=4c346851d3f4f4cf76439fe6440ffe9f");
list.add(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594817167403&di=87226dc3d6b70a7e02722b9f9bd9f33a&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D1307125826%2C3433407105%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D5760%26h%3D3240");
return list;
}
}
NineOldWidget control construction method and parameter setting
NineOldWidget(
{@required this.images,
this.moreStyle,
this.backgroundColor = Colors.white,
this.strokeWidth = 3,
this.valueColor = Colors.tealAccent,
this.onLongPressListener});
Instructions for use
NineOldWidget is a component used to encapsulate the nine-square grid display of pictures, which is convenient for users to better use the plug-in. Users only need to inject the picture collection, integrate with the Hero animation of Photo_view and display the progress of the booth picture loading of the network picture, and then realize the picture View, list of Jiugongge
Thanks
Download Details:
Author: lanzhu1993
Source Code: https://github.com/lanzhu1993/flutter_nineold
#flutter #dart #mobile-apps
