preface

Flutter is Google’s open source application development framework that builds apps for Android, iOS, Windows, Linux and other platforms using just one set of code. Flutter has very high performance with a refresh rate of 120fps and is currently a very popular cross-platform UI development framework.

This column has collected nearly 70 great open source libraries on Github and will continue to be updated. I hope this can help you improve the efficiency of brick moving and wish the ecology of Flutter better and better 🎉🎉.

Multi-picture long warning ⚠️⚠️⚠️

Because Getwidget contains very rich components, including buttons, images, rotation chart, Tabbar, popovers… And so on up to more than 30 categories of common components, we have to divide it into five articles, you can view the details of related components in the right directory.

The body of the

I. 🚀 Wheel introduction

  • Name: getwidget
  • Overview: GetWidget is completely free and comes with over 1,000 pre-built widgets that you can use to speed up your development process and build great applications.
  • Publisher:[email protected]
  • Warehouse Address:getwidget
  • Recommended index: ⭐️⭐️⭐ ⭐️⭐️
  • Common indices: ⭐️⭐️⭐ ⭐️⭐️
  • Preview:

2. ⚙️ Installation and use

Dependencies: getwidget: ^ at 2.0.5Copy the code
import 'package:getwidget/getwidget.dart';
Copy the code

3. 🗂 component example

1. Button GFButton

Attributes and meanings

attribute meaning
onPressed Click the callback
onLongPress Long press callback
onHighlightChanged Listen for callbacks to button click status: value ->true: Button press value ->false: Button release
text Button text
textStyle The text style
boxShadow shadows
buttonBoxShadow Button shadow effect, defaultfalsewhenboxShadowProperty is invalid if it is not null
hoverColor Color of the button when the mouse pointer is hovering
highlightColor Button highlight color
splashColor Water ripple color
elevation Height when the button is enabled but not pressed
hoverElevation The height of the button when the pointer is hovering
highlightElevation Height of button when highlighted
disabledElevation Height when the button is not enabled
padding Inside margin of button
constraints Maximum/small size limit for buttons
borderShape Define the shape of the border
animationDuration Button animation duration
clipBehavior Cutting style
focusNode Button to focus
autofocus Whether to select this component as the initial focus when no other component is currently in focus
materialTapTargetSize Clickable range
child Child components, usually button text,TextThis item is invalid if it is not empty
type Button style
color The button color
textColor Button text color
position Icon position
size Button size (height)
borderSide Button border
icon icon
blockButton Set totrueSet the width of the button to full width, leaving some space between the left and right
fullWidthButton Full width button
colorScheme Theme colors
enableFeedback Sound/vibration feedback
disabledColor Fill color when button is disabled
disabledTextColor Text color when button is disabled

Button is almost the most used component in App. It can be seen that GFButton has many customizable attributes, but its initial construction is very simple. You only need to specify click callback method for it, and you can get one: ⬇️

GFButton(
    text: 'GFButton',
    onPressed: () {},
)
Copy the code

2. Set it to unclickableonPressedSet tonull:

GFButton(
    text: 'GFButton',
    onPressed: null,
)
Copy the code

3.typeSet the button style of GFButton:

4.shapeSet the button shape of GFButton:

5.fullWidthButtonblockButtoniftrue, represents that the width of GFButton is the maximum width that its parent component can allocate to it. The difference between them is that if the parent component width is full-screen widthblockButtonSome space will be left for left and right:

6.sizeTo set the height of the button, GFButton provides three sizes of the height, can also be directly set:

7.iconProperty implements a button with an icon that can be usedpositionAdjust icon position:

8. Single-icon buttons can be usedGFIconButton:

GFIconButton(
    icon: Icon(Icons.star),
    onPressed: () {}
)
Copy the code

The above example only introduces a few common GFButton attributes, its customizability is far more than that, you can refer to the attributes and meaning to introduce their own try.

2. The Angle of the GFBadge

Attributes and meanings

attribute meaning
text Angle of the text
color Corner label background color
textColor Corner text color
shape Horn shape,circle,pills,squareBy default,standard
size Corner mark size,LARGE,MEDIUM,SMALLOr custom size (double)
border A border
child Child component, usually text, iftextIf it is not empty, this item is invalid

1.GFBadgeIs a horn used to prompt on a component, usually with text as a child component,GFBadgeThe default shape is a rectangle with rounded corners. ⬇ ️

// Default GFBadge(text: '9',), // Shape: GFBadgeshape.circle, size: 15,),Copy the code

2. UseGFButtonBadgeorGFButtonCan implement a button with a corner icon,GFButtonBadgeBy default, the corner will be displayed on the right side, also can passpositionTo adjust position.

GFButtonBadge(
  text: 'GFButtonBadge',
  onPressed: () {},
  icon: const GFBadge(
    child: Text("12"),
  ),
),

GFButton(
  onPressed: () {},
  text: 'GFButton',
  icon: const GFBadge(
    child: Text("12"),
  ),
)
Copy the code

3. To display the corner marker, use theGFIconBadgeIts flexibility lies in the fact thatYou can put GFIconButton,GFButtonEven a picture, aContainerAnd almost any component is used as its child.

 GFIconBadge(
   child: GFIconButton(
     onPressed: () {},
     icon: const Icon(Icons.ac_unit),
   ),
   counterChild: const GFBadge(
     child: Text("12"),
     shape: GFBadgeShape.circle,
   ),
 ),
 
 GFIconBadge(
   child: Image.asset(
     'images/picture.png',
     width: 50,
   ),
   counterChild: const GFBadge(
     child: Text("12"),
     shape: GFBadgeShape.circle,
   ),
 ),
 
 GFIconBadge(
   child: GFButton(onPressed: () {}, text: 'GFButton'),
   counterChild: const GFBadge(
     child: Text("12"),
     shape: GFBadgeShape.circle,
   ),
 ),
Copy the code

4.GFIconBadgeYou can usepositionTo adjust its position, respectivelyGFBadgePosition.topEnd,GFBadgePosition.topStartGFBadgePosition.bottomEndGFBadgePosition.bottomStartAnd corresponds to the inward offset of the horn when the four corners are taken as the origin of coordinates.

3. Head GFAvatar

Attributes and meanings

attribute meaning
backgroundImage Avatar images
backgroundColor The background color
child Child components
foregroundColor Subcomponent color
radius Head radius
maxRadius The largest radius
minRadius The minimum radius
borderRadius The head with rounded corners can be used if the shape is not round
shape Head shape,square,standardAs well as the defaultcircle

GFAvatar is a simple customizable image component. The following code implements three different shaped avatars: ⬇️

// Default circular GFAvatar(backgroundImage: NetworkImage(AvatarUrl),), // Rectangle GFAvatar(backgroundImage: AvatarUrl) NetworkImage(AvatarUrl), Shape: gfavatarShape. square,), NetworkImage(AvatarUrl), shape: GFAvatarShape.standard, ),Copy the code

4. GFImage picture

Attributes and meanings

attribute meaning
image The image can be a local image or a network image, and can be in Gif format
height highly
width The width of the
color The background color
child Child components
colorFilter Mask, example:ColorFilter: colorFilter mode (Colors. Black. WithOpacity (0.5), BlendMode. Darken)(Black translucent mask)
padding padding
margin From the outside
borderRadius Rounded corners
border A border
boxFit Image display style, whether to stretch or zoom
shape Picture shape,BoxShape.rectangle,BoxShape.circle

GFImageOverlay supports both dynamic and static images. In the following code example, three shapes of images are implemented: ⬇️

// Default rectangle GFImageOverlay(width: 150, height: 150, image: AssetImage('images/picture.png'),), // GFImageOverlay(height: 150, image: AssetImage('images/picture.png'), shape: Boxshape.circle,), // Rectangle GFImageOverlay(width: 150, height: 150, image: AssetImage('images/picture.png'), borderRadius: BorderRadius.all(Radius.circular(20)), ),Copy the code

2. Image examples of semi-transparent black mask for belt assembly:

GFImageOverlay( height: 200, child: Center( child: Text('Light Overlay', style: TextStyle(color: GFColors.LIGHT)), ), image: AssetImage('images/picture.png'), colorFilter: Colorfilter.mode (color.black. WithOpacity (0.5), blendmode.darken), boxFit: boxfit.cover, Shape: boxShape.circle,), colorfilter.mode (color.black. WithOpacity (0.5), blendmode.darken),Copy the code

5. Card GFCard

Attributes and meanings

attribute meaning
color Card background color
elevation The height of the card determines the effect of the shadow
shape Card shape
borderOnForeground Whether to draw shape borders in front of child components. Default is true
padding padding
margin From the outside
clipBehavior Cutting style
semanticContainer Whether the card is a single semantic container (not found yet)
title The title, of typeGFListTile
content The contents of the card, usually some text, can also be other components
image This is the image above the title, not shown by default
showImage Whether the picture above the title is displayed
imageOverlay The card background image is not displayed by default
showOverlayImage Whether the card background picture is displayed
buttonBar An array of components below the content, typically buttons
titlePosition Sets the card title bar position
borderRadius CARDS with rounded corners
boxFit Image stretching and scaling styles
colorFilter The mask layer
gradient The gradient background

Example 1: ⬇ ️

GFCard( boxFit: BoxFit.fill, showOverlayImage: true, imageOverlay: AssetImage('images/background.png'), title: GFListTile(Avatar: GFAvatar(backgroundImage: AssetImage('images/mypicture. PNG '),), titleText: 'late night ', subTitleText: 'Flutter engineer ',), content: Text(" Property content, usually some Text, but also other components "), buttonBar: GFButtonBar(children: < widgets > [GFButton (onPressed: () {}, text: 'focus'), GFButton (onPressed: () {}, text:' direct messages,),),),),Copy the code

Example 2:

GFCard( boxFit: BoxFit.cover, titlePosition: GFPosition.start, image: Image.asset( 'images/gameplayer.png', height: Of (context).size. Height * 0.2, width: mediaQuery.of (context).size. Width, fit: boxFit.cover,), showImage: true, title: GFListTile( avatar: GFAvatar( backgroundImage: AssetImage('images/mypicture.png'), ), titleText: 'Game Controllers', subTitleText: 'PlayStation 4', ), content: Text("Some quick example text to build on the card"), buttonBar: GFButtonBar( children: const [ GFAvatar( backgroundColor: GFColors.PRIMARY, child: Icon( Icons.share, color: Colors.white, ), ), GFAvatar( backgroundColor: GFColors.SECONDARY, child: Icon( Icons.search, color: Colors.white, ), ), GFAvatar( backgroundColor: GFColors.SUCCESS, child: Icon( Icons.phone, color: Colors.white, ), ), ], ), ),Copy the code

To be continued next: Wheel charts, list templates, Tabbar, floating components, Toast and Switch