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

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

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

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

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

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

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