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

timy-messenger

photo_view

Download Details:

Author: lanzhu1993

Source Code: https://github.com/lanzhu1993/flutter_nineold

#flutter #dart #mobile-apps

Animation Preview Picture with Flutter
9.25 GEEK