【Flutter Tips 09】– The Flutter custom picture display component

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

📃 Demand is the most effective motivator for learning skills

First, preface: meet such a requirement, picture display, display 3 at most, more than 3, the last display mask plus the number of remaining pieces. The renderings are as follows:

Two, implementation: in order to expand, I did a number of components split. 1, the component of a single picture 2, the component of many pictures 3, the component of the last mask 4, judgment combination three, concrete realization: 1, the component of a single picture

_buildNetWorkImageWidget(int index) {return NetWorkImageWidget(); Constant.default_url, width: (ScreenUtils.screenWidth() - 78) / 3, height: (ScreenUtils.screenWidth() - 78) / 3, borderRadius: BorderRadius.all(Radius.circular(8)), ); }Copy the code

2. Multi-picture components

Widget _buildMoreImageWidget(int imageCount) {return imageCount == 1? _buildImageItemWidget(0) : Row( mainAxisAlignment: MainAxisAlignment.start, children: [ _buildImageItemWidget(0), PaddingWidget( left: 8, ), imageCount >= 2 ? _buildImageItemWidget(1) : Container(), PaddingWidget( left: 8, ), imageCount >= 3 ? _buildImageItemWidget(2) : Container(), ], ); }Copy the code

3. Components of the last mask

/// Shadow layer Widget _buildShadowWidget(int index) {return (imageList! .length > 3 && index == 2) ? Container( width: (ScreenUtils.screenWidth() - 78) / 3, height: (ScreenUtils.screenWidth() - 78) / 3, decoration: WMDecorations.setBoxDecoration(8, color: Color(0x66000000)), alignment: Alignment.center, child: TextWidget( '+${imageList! .length - 3}', style: WMTextStyle.setTextStyle14(), ), ) : Container(); }Copy the code

4. Judge the combination

Widget _buildImageWidget() {
  int imageCount = imageList!.length;
  if (imageCount == 0) {
    return Container();
  } else {
    return Container(
        margin: const EdgeInsets.only(
          bottom: 12,
          left: 16,
          right: 16,
        ),
        height: (ScreenUtils.screenWidth() - 78) / 3,
        // color: Colors.blue,
        child: _buildMoreImageWidget(imageCount));
  }
}
Copy the code

5, complete implementation, can be used directly, as long as the picture array, click the picture callback.

class CareTemplateImageWidget extends StatelessWidget { final List? imageList; final WMIntCallBack? selectedImageCallBack; const CareTemplateImageWidget( {Key? key, this.imageList, this.selectedImageCallBack}) : super(key: key); @override Widget build(BuildContext context) { return _buildImageWidget(); } Widget _buildImageWidget() { int imageCount = imageList! .length; if (imageCount == 0) { return Container(); } else { return Container( margin: const EdgeInsets.only( bottom: 12, left: 16, right: 16, ), height: (ScreenUtils.screenWidth() - 78) / 3, // color: Colors.blue, child: _buildMoreImageWidget(imageCount)); Widget _buildMoreImageWidget(int imageCount) {return imageCount == 1? _buildImageItemWidget(0) : Row( mainAxisAlignment: MainAxisAlignment.start, children: [ _buildImageItemWidget(0), PaddingWidget( left: 8, ), imageCount >= 2 ? _buildImageItemWidget(1) : Container(), PaddingWidget( left: 8, ), imageCount >= 3 ? _buildImageItemWidget(2) : Container(), ], ); } /// imageItem, when index=2 Reduce component creation Widget _buildImageItemWidget(int index) {return GestureDetectorWidget(Child: index == 2? Stack( children: [ _buildNetWorkImageWidget(index), _buildShadowWidget(index) ], ) : _buildNetWorkImageWidget(index), clickCallBack: () { if (selectedImageCallBack ! = null) { selectedImageCallBack! (index); }}); } /// Widget _buildNetWorkImageWidget(int index) {return NetWorkImageWidget(constant.default_url, width: (ScreenUtils.screenWidth() - 78) / 3, height: (ScreenUtils.screenWidth() - 78) / 3, borderRadius: BorderRadius.all(Radius.circular(8)), ); } /// Shadow layer Widget _buildShadowWidget(int index) {return (imageList! .length > 3 && index == 2) ? Container( width: (ScreenUtils.screenWidth() - 78) / 3, height: (ScreenUtils.screenWidth() - 78) / 3, decoration: WMDecorations.setBoxDecoration(8, color: Color(0x66000000)), alignment: Alignment.center, child: TextWidget( '+${imageList! .length - 3}', style: WMTextStyle.setTextStyle14(), ), ) : Container(); }}Copy the code

6. The effect is as follows:

Fourth, dribs and drabs are the process of recording. Next time share pictures browser.