Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.

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 🎉🎉.

Getwidget index

Multi-picture long warning ⚠️⚠️⚠️

Because Getwidget contains very rich components, including buttons, images, rotation chart, Tabbar, popovers... As many as 30 types of common components, the length of the problem will be divided into five articles, you can view the details of the relevant components in the right directory.

Chapter 1: Button GFButton, corner GFBadge, Avatar GFAvatar, picture GFImage, card GFCard

Chapter 2: GFCarousel, GFListTile, GFTabBar, GFFloatingWidget

Chapter 3: Prompt box GFToast, switch GFToggle, text typesetting GFTypography, drawer GFDrawer, popup GFAlert, folding card GFAccordion

👉 Chapter 4: Navigation bar GFAppBar, search bar GFSearchBar, scoring component GFRating, loading prompt GFLoader, and progress bar GFProgressBar

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:

Long image preview please stamp

2. ⚙️ Installation and use

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

3. 🗂 component example

16. Navigation bar GFAppBar

Attributes and meanings

attribute describe
leading Navigation bar left component
automaticallyImplyLeading The default component to the left of the navigation bar,leadingfornullEffective when
title Navigation bar title component
actions Array of components to the right of the navigation bar
flexibleSpace Navigation bar rear component
bottom Component at the bottom of the navigation bar, of typePreferredSizeWidget, usuallyTabbar
elevation The height of the navigation bar relative to its parent affects the shadow effect
shape Navigation bar and shadow shape
backgroundColor Navigation bar background color
brightness Navigation bar brightness, usually withbackgroundColor,iconTheme,textThemeSet together
iconTheme Color, size, and transparency of navigation ICONS
actionsIconTheme Specifies the color, size, and transparency of the icon on the right of the navigation bariconThemeconsistent
textTheme The text style of the navigation bar title
primary Whether to fill the status bar height,flexibleSpaceNot affected by this property, defaulttrue
centerTitle Whether the title bar is centered
titleSpacing The spacing of navigation bar subcomponents
toolbarOpacity Transparency of navigation bar child components
bottomOpacity Navigation bottom component (bottom) child component transparency
searchBar Whether to display the search bar whentitlefornullThe default value isfalse
searchHintText Search bar prompt text
searchHintStyle Search bar prompts text style
searchBarColorTheme The search bar theme color affects the border, search button, close button, cursor, etc
searchController Input box controller of typeTextEditingController
onTap Input box click callback
onChanged Input box content changes callback
onSubmitted The input completes the callback

1.GFAppbarwithAppBarThis is a collocationGFIconBadgeA simple example of ⬇️ :

GFAppBar(
    backgroundColor: GFColors.DARK,
    title: Text(
        'My Homepage',
        style: appBarTitleStyle,
    ),
    centerTitle: false,
    leading: Icon(
        Icons.arrow_back_ios,
        color: GFColors.LIGHT,
        size: 18,
    ),
    titleSpacing: 0,
    actions: [
    Padding(
        padding: EdgeInsets.only(right: 16),
            child: GFIconBadge(
                position: GFBadgePosition.topEnd(top: 5, end: - 5),
                child: GFAvatar(
                    radius: 20,
                    backgroundImage: AssetImage('images/mypicture.png'),
                ),
            counterChild: GFBadge(
                text: '6',
                size: 22,
                shape: GFBadgeShape.circle,
        ))),
    ],
),

static const TextStyle appBarTitleStyle = TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 16,
    letterSpacing: 0.2,
    color: GFColors.LIGHT,
);
Copy the code

2. BottomIs the component at the bottom of the navigation bar. Note that the type isPreferredSizeWidget, can be used byPreferredSizeTo wrap the original component for use,PreferredSizethepreferredSizeThe attribute here represents the distance between its bottom edge and the bottom edge of the original GFAppBar.

PreferredSize(
    child: GFTabBar(
    tabBarColor: GFColors.DARK,
    tabBarHeight: 40,
    indicatorColor: GFColors.LIGHT,
    length: 3,
    controller: tabController,
    tabs: [
        Tab(
            child: const Text(
                'dynamic',
            ),
        ),
        Tab(
            child: const Text(
                'articles',
            ),
        ),
        Tab(
            child: const Text(
                'column',
            ),
        ),
    ],
    ),
    preferredSize: Size(double.infinity, 40));Copy the code

3.GFAppbarThe searchBar also provides three callback methods to listen for input fields, as shown in the following example:

GFAppBar(
    backgroundColor: GFColors.DARK,
    title: Text(
        'My Homepage',
        style: appBarTitleStyle,
    ),
    centerTitle: false,
    leading: Icon(
        Icons.arrow_back_ios,
        color: GFColors.LIGHT,
        size: 18,
    ),
    titleSpacing: 0,
    actions: [
    Padding(
        padding: EdgeInsets.only(right: 16),
            child: GFIconBadge(
                position: GFBadgePosition.topEnd(top: 5, end: - 5),
                child: GFAvatar(
                    radius: 20,
                    backgroundImage: AssetImage('images/mypicture.png'),
                ),
            counterChild: GFBadge(
                text: '6',
                size: 22,
                shape: GFBadgeShape.circle,
        ))),
    ],
    searchBar: true,
    searchHintText: 'Search for articles you're interested in',
    onTap: () {
        // Input box single machine callback
    }, 
    onChanged: (value) {
        // Input box content changes callback
    }, 
    onSubmitted: (value) {
        // Commit the callback},),Copy the code

17. Search bar GFSearchBarPage

Attributes and meanings

attribute describe
searchList Data source array (required)
overlaySearchListItemBuilder Search list Item style (required)
searchQueryBuilder Returns a logical list of data based on the input)
controller Controller, listen for input
onItemSelected Search results click callback
hideSearchBoxWhenItemSelected Click on the search results to hide the search bar
overlaySearchListHeight The height of the search results list (this height should be a dynamic value that changes based on initial data and search results)
noItemsFoundWidget Components that are displayed in the search list when there is no corresponding search result
searchBoxInputDecoration Search box style

The following example is case sensitive for all items that contain input strings ⬇️:

List list = [
"Flutter"."React"."Ionic"."Xamarin",]; GFSearchBar( searchList: list, overlaySearchListItemBuilder: (item) {return GFListTile(titleText: item.toString());
    },
    searchQueryBuilder: (query, list) {
        returnlist .where((element) => element.toString().contains(query)) .toList(); },),Copy the code

18. GFRating component

Attributes and meanings

attribute describe
value Point value, type double
onChanged Score change callback
itemCount Number of GFRating sub-components. Default is 5
spacing GFRating subcomponent spacing
defaultIcon The default icon
color Select some icon colors
borderColor The icon color is not selected
size The icon size
filledIcon Fully select the icon style
halfFilledIcon Select half of the Icon style
allowHalfRating Can drag to get half the score value? Default: true
showTextForm Whether to display the score input box
suffixIcon Component to the right of the score input box
controller Input box controller
inputDecorations Input field style
margin Input box margins
padding Input box margin

This is a scoring component that can be clicked, dragged and scored, using examples:

GFRating( value: _rating, onChanged: (value) { setState(() { _rating = value; }); },),Copy the code

19. Load animation component GFLoader

Attributes and meanings

attribute describe
type style
loaderColorOne Applies only to dot and square styles, color of the first dot (rectangle)
loaderColorTwo Applies only to dot and square styles, second dot (rectangle) color
loaderColorThree Applies only to dot and square styles, third dot (rectangle) color
duration Applies only to dot and square style animation durations
loaderIconOne Applies only to custom styles, using an icon, text, or image as the first dot
loaderIconTwo Applies only to custom styles, using ICONS, text, or images as the second point
loaderIconThree Applies only to custom styles, using ICONS, text, or images as the third point
androidLoaderColor The animation type of the Android loader
loaderstrokeWidth Android loader line width
size Loader size
child Applies only to custom styles and has a higher priorityloaderIconOneA child component of, etc

1. Default style (Android style) ⬇️ :

GFLoader()
Copy the code

2. The iOS style:

GFLoader(
    type: GFLoaderType.ios
)
Copy the code

3. The circular:

GFLoader(
    type: GFLoaderType.circle
)
Copy the code

Square: 4.

GFLoader(
    type: GFLoaderType.square
)
Copy the code

Here’s a local GIF:

GFLoader(
    type: GFLoaderType.custom,
    child: Image(
        image: AssetImage('images/red_progress.gif'),),)Copy the code

20. Progress bar GFProgressBar

Attributes and meanings

attribute describe
type Progress bar Style
progressHeadType Progress bar initial (end) position style, roundGFProgressHeadType.circularOr squareGFProgressHeadType.square
percentage Percentage of progress
backgroundColor Background color of the progress bar
progressBarColor Some colors have been loaded
margin From the outside
circleWidth doubleDefines the arc thickness of the circular progress bar
circleStartAngle Initial position of the circular progress bar, Angle from top vertex, default 0 (top vertex)
radius Circular progress bar size
linearGradient progressBarColorfornullThe progress bar changes color gradually
animation Whether to display the animation when the progress bar changes
animationDuration Animation time,animationfortrueEffective when
child Child component, which usually displays percentages
autoLive Set tofalseIndicates that the state of the widget is not retained, defaulttrue
animateFromLastPercentage Set totrueIndicates that the progress bar animation is set based on the last percentage value set. Default is false
reverse Displays reverse progress, defaultfalse
mask Create a mask
lineHeight Progress bar line width
width The total length of the progress bar cannot be circular
fromRightToLeft Set totrueRepresents a progress bar from right to left
leading The component on the left of the progress bar applies only to the bar progress bar
trailing The component on the right of the progress bar applies only to the bar progress bar
padding padding
alignment alignment
clipLinearGradient Set totrueThen only showlinearGradientLoaded parts

1. Circular base style example ⬇️ :

GFProgressBar(
    percentage: 0.9,
    width: 100,
    radius: 90,
    type: GFProgressType.circular,
    backgroundColor: Colors.black26,
    progressBarColor: GFColors.DANGER,
)
Copy the code

2. Examples of progress bars with front and back ICONS:

GFProgressBar(
    percentage: 0.8,
    lineHeight: 20,
    alignment: MainAxisAlignment.spaceBetween,
    child: const Text(
        '80%',
        textAlign: TextAlign.end,
        style: TextStyle(fontSize: 16, color: Colors.white),
    ),
    leading: Icon(
        Icons.sentiment_dissatisfied,
        color: GFColors.DANGER
    ),
    trailing:Icon(
        Icons.sentiment_satisfied, 
        color: GFColors.SUCCESS
    ),
    backgroundColor: Colors.black26,
    progressBarColor: GFColors.INFO,
)
Copy the code

To be continued next: Flash components, animations, borders, checkboxes, multiple selection lists