Code Monkey home page Code Monkey logo

photo_browser's Introduction

photo_browser

pub package GitHub stars

PhotoBrowser is a zoomable picture and custom view browsing plugin that supports thumbnails and provides picture data that you can use to download to your local album.

Demo

demo

Use it

Depend on it

dependencies:
  photo_browser: 3.0.3

Import it

import 'package:photo_browser/photo_browser.dart';

Creation and display of PhotoBrowser instance

Widget _buildCell(BuildContext context, int cellIndex) {
  return GestureDetector(
    onTap: () {
      PhotoBrowser photoBrowser = PhotoBrowser(
        itemCount: _bigPhotos.length,
        initIndex: cellIndex,
        controller: _browserController,
        allowTapToPop: true,
        allowSwipeDownToPop: true,
        // If allowPullDownToPop is true, the allowTapToPop setting is invalid.
        // 如果allowPullDownToPop为true,则allowTapToPop设置无效
        allowPullDownToPop: true,
        heroTagBuilder: (int index) {
          return _heroTags[index];
        },
        // Large images setting.
        // 大图设置
        imageUrlBuilder: (int index) {
          return _bigPhotos[index];
        },
        // Thumbnails setting.
        // 缩略图设置
        thumbImageUrlBuilder: (int index) {
          return _thumbPhotos[index];
        },
        positions: (BuildContext context) =>
            <Positioned>[_buildCloseBtn(context)],
        positionBuilders: <PositionBuilder>[
          _buildSaveImageBtn,
          _buildGuide,
        ],
        loadFailedChild: _failedChild(),
      );

      // You can push directly.
      // 可以直接push
      // photoBrowser.push(context);
      photoBrowser
          .push(context, page: HCHud(child: photoBrowser))
          .then((value) {
        print('PhotoBrowser closed');
      });
    },
    child: Stack(
      children: [
        Positioned.fill(
            child: Container(color: Colors.grey.withOpacity(0.6))),
        Positioned.fill(
          child: Hero(
              tag: _heroTags[cellIndex],
              child: _buildImage(cellIndex),
              placeholderBuilder:
                  (BuildContext context, Size heroSize, Widget child) =>
                      child),
        ),
      ],
    ),
  );
}

Use of PhotoBrowserController

onTap: () {
  // Pop through controller
  // 通过控制器pop退出,效果和单击退出效果一样
  _browserController.pop();
},
onTap: () async {
  // Obtain image data through the controller
  // 通过控制器获取图片数据
  ImageInfo? imageInfo;
  if (_browserController.imageInfo[curIndex] != null) {
    imageInfo = _browserController.imageInfo[curIndex];
  } else if (_browserController.thumbImageInfo[curIndex] != null) {
    imageInfo = _browserController.thumbImageInfo[curIndex];
  }
  if (imageInfo == null) {
    return;
  }

  // Save image to album
  // 将图片保存到相册
  var byteData =
    await imageInfo.image.toByteData(format: ImageByteFormat.png);
  if (byteData != null) {
    Uint8List uint8list = byteData.buffer.asUint8List();
    var result = await ImageGallerySaver.saveImage(
    Uint8List.fromList(uint8list));
  }
}
onTap: () {
  // Refresh the photoBrowser through the controller
  // 通过控制器,刷新PhotoBrowser
  _browserController.setState(() {});
},

photo_browser's People

Contributors

chenhongchen avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.