The useful wheels of a Flutter are recommended. Interface development speed up big kill Getwidget 🚀

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

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.fullWidthButton 或 blockButtoniftrue, 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

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.topStart 、GFBadgePosition.bottomEnd 、GFBadgePosition.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

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

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

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