【Flutter Tips 06】– Implementation of Flutter folding heads, frosted-glass effects and message prompts

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

Foreword: demand is not the change, as the development should always respond to the change of demand and change. I had a request for a folding head today. Frosted glass avatar + folded avatar + number of new messages

Realization: The first step: realize the folding head effect;

The toy assembly provides the effect of: Off is the change of position, which encapsulates a method, folding avatar + frosted glass effect /// folding avatar /// itemType is the avatar type I implemented according to my requirements, I like and visit, List<Widget> _getStackItems(MessageHeaderItemType itemType, int count) {List<Widget> _list = []; for (var i = 0; i < count; I ++) {double off = 20.0 * I; _list.add(Positioned( left: off, child: Container( width: 30, height: 30, decoration: BoxDecoration( border: Border.all(color: Colors.white, width: 1), borderRadius: BorderRadius.circular(15), ), child: Stack( children: <Widget>[// Optional Container(decoration: style.setboxDecoration (15, color: color.transparent), child: AvatarWidget( itemType == MessageHeaderItemType.LikeMe ? likeHeadList.isNotEmpty ? likeHeadList[i]?.user_info?.header_url ?? Constant.defaultAvatarUrl : Constant.defaultAvatarUrl : visitingHeadList.isNotEmpty ? visitingHeadList[i]?.user_info?.header_url ?? Constant.defaultAvatarUrl : Constant.defaultAvatarUrl, width: 30, height: 30, fit: BoxFit.fill, borderRadius: BorderRadius. Circular (15),),), Center(// Clipable rectangle Child: ClipRRect(BorderRadius: Borderradius.circular (15), // Background filter Child: BackdropFilter(filter: imagefilter.blur (sigmaX: 5.0, sigmaY: 5.0), child: BackdropFilter(filter: imagefilter.blur (sigmaX: 5.0, sigmaY: 5.0), Opacity(Opacity: 0.5, child: Container(width: 30.0, height: 30.0, decoration: BoxDecoration) Colors.black, borderRadius: BorderRadius.circular(15), ), ), ), ), ), ) ], ), ), )); } return _list; }Copy the code

    
Copy the code

Step 2: realize the efficiency of frosted glass;

Container( width: 30, height: 30, decoration: BoxDecoration( border: Border.all(color: Colors.white, width: 1), borderRadius: borderRadius. Circular (15),), child: Stack(children: <Widget> Style.setBoxDecoration(15, color: Colors.transparent), child: AvatarWidget( itemType == MessageHeaderItemType.LikeMe ? likeHeadList.isNotEmpty ? likeHeadList[i]?.user_info?.header_url ?? Constant.defaultAvatarUrl : Constant.defaultAvatarUrl : visitingHeadList.isNotEmpty ? visitingHeadList[i]?.user_info?.header_url ?? Constant.defaultAvatarUrl : Constant.defaultAvatarUrl, width: 30, height: 30, fit: BoxFit.fill, borderRadius: BorderRadius. Circular (15),),), Center(// Clipable rectangle Child: ClipRRect(BorderRadius: Borderradius.circular (15), // Background filter Child: BackdropFilter(filter: imagefilter.blur (sigmaX: 5.0, sigmaY: 5.0), child: BackdropFilter(filter: imagefilter.blur (sigmaX: 5.0, sigmaY: 5.0), Opacity(Opacity: 0.5, child: Container(width: 30.0, height: 30.0, decoration: BoxDecoration) Colors.black, borderRadius: BorderRadius.circular(15), ), ), ), ), ), ) ], ), )Copy the code

Step 3: the number of messages in the upper right corner prompt; Badges are easy to use with the badges plug-in: you can package them yourself.

Attached: complete code: encapsulation method, can be used directly to achieve three requirements: head frosted glass + head folding effect + message prompt.

/// avatar Widget _buildHeadRedWidget(MessageHeaderItemType itemType, int unCount) {int count = 1; if (unCount == 1) { count = 1; } else if (unCount == 2) { count = 2; } else { count = 3; } return Container( height: 30, width: 70, alignment: Alignment.center, child: BadgeWidget( unCount: unCount, position: BadgePosition.topEnd( top: -7, end: count == 1 ? 13 : count == 2 ? 5 : unCount >= 10 ? -12 : -5), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox( // 30 50 70 width: count == 1 ? 30 : count == 2 ? 50 : 70, child: Stack( children: _getStackItems(itemType, count), ), ), ], ), ), ); List<Widget> _getStackItems(MessageHeaderItemType itemType, int count) {List<Widget> _list = []; for (var i = 0; i < count; I ++) {double off = 20.0 * I; _list.add(Positioned( left: off, child: Container( width: 30, height: 30, decoration: BoxDecoration( border: Border.all(color: Colors.white, width: 1), borderRadius: BorderRadius.circular(15), ), child: Stack( children: <Widget>[// Optional Container(decoration: style.setboxDecoration (15, color: color.transparent), child: AvatarWidget( itemType == MessageHeaderItemType.LikeMe ? likeHeadList.isNotEmpty ? likeHeadList[i]?.user_info?.header_url ?? Constant.defaultAvatarUrl : Constant.defaultAvatarUrl : visitingHeadList.isNotEmpty ? visitingHeadList[i]?.user_info?.header_url ?? Constant.defaultAvatarUrl : Constant.defaultAvatarUrl, width: 30, height: 30, fit: BoxFit.fill, borderRadius: BorderRadius. Circular (15),),), Center(// Clipable rectangle Child: ClipRRect(BorderRadius: Borderradius.circular (15), // Background filter Child: BackdropFilter(filter: imagefilter.blur (sigmaX: 5.0, sigmaY: 5.0), child: BackdropFilter(filter: imagefilter.blur (sigmaX: 5.0, sigmaY: 5.0), Opacity(Opacity: 0.5, child: Container(width: 30.0, height: 30.0, decoration: BoxDecoration) Colors.black, borderRadius: BorderRadius.circular(15), ), ), ), ), ), ) ], ), ), )); } return _list; }Copy the code

It is not realized when you need to consider, realize that it is not difficult, just to record the development of the bit by bit…