The useful wheels of a Flutter are recommended. Getwidget 🚀 (2)

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

Button GFButton, Corner GFBadge, Avatar GFImage, Picture GFImage, card GFCard ->

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

6. GFCarousel

Attributes and meanings

/ / the data source
final List<String> imageList = [
"https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"."https://cdn.pixabay.com/photo/2017/12/13/00/23/christmas-3015776_960_720.jpg"."https://cdn.pixabay.com/photo/2019/12/19/10/55/christmas-market-4705877_960_720.jpg"."https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg"."https://cdn.pixabay.com/photo/2019/12/22/04/18/x-mas-4711785__340.jpg"."https://cdn.pixabay.com/photo/2016/11/22/07/09/spruce-1848543__340.jpg"
];
Copy the code

1.GFCarouselThis is a simple example that only needs to be specifieditems, you can get a basic style of rotation chart ⬇️

GFCarousel(
    items: imageList.map(
        (url) {
            return GFImageOverlay(
                image: NetworkImage(url),
            );
        },).toList(),
)
Copy the code

2. It can be used in additionGFItemsCarouselTo implement multiple image styles, the GFItemsCarousel property:

GFItemsCarousel(
    rowCount: 3,
    children: imageList.map(
        (url) {
            return Container(
                margin: EdgeInsets.all(5.0),
                    child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(5.0)),
                        child: Image.network(url,
                        fit: BoxFit.cover, width: 1000.0),),); }, ).toList(), )Copy the code

You can seeGFItemsCarouselFor now, it does not support automatic and infinite scrolling. It is not a true carouchte chart. At present, it may be more suitable to use it as a horizontal scrolling list with spring effect.

7. List template GFListTile

Attributes and meanings

1. If you looked at the card component in the previous article, it might look familiar. Yes, ⬇️ uses GFListTile

This diagram should make it easier to visualize the relationship between widgets, such as adding image components, with the title and subtitle moving to the right to make room.

This list style is generally adopted in developmentContainerFor nested useColumn,RowTo implement, if there are multiple list styles, the code will be more complicated to deal with, useGFListTileThis problem can be alleviated to a large extent. Here’s a simple example:

GFListTile(
    color: Colors.white,
    avatar:
    GFAvatar(backgroundImage: AssetImage('images/gyz.png')),
    titleText: 'The Lone Ranger',
    subTitleText: Eason Chan,
    icon: Icon(Icons.play_circle),
)
Copy the code

8. Label bar GFTabBar

Tabbar is used in almost every App and in the Getwidget family of components,GFTabBarUsually withGFTabBarViewIt’s used together, so it’s usually used directlyGFTabsComponents (the combination of the former two) can, gentlemen don’t worry, and listen to me.

1. Introduction to GFTabBar attributes and meanings

You first specify a TabController for the GFTabBar

late TabController tabController;

@override
void initState() {
    super.initState();
    tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
    tabController.dispose();
    super.dispose();
}
Copy the code

1. GFTabBar example

GFTabBar(
    length: 4,
    controller: tabController,
    tabs: [
        Tab(
            icon: Icon(Icons.directions_bike),
            child: Text(
                "Tab1",
            ),
        ),
        Tab(
            icon: Icon(Icons.directions_bus),
            child: Text(
                "Tab2",
            ),
        ),
        Tab(
            icon: Icon(Icons.directions_railway),
            child: Text(
                "Tab3",
            ),
        ),
        Tab(
            icon: Icon(Icons.airplanemode_active),
            child: Text(
                "Tab4"(), (],)Copy the code

2.GFTabBarVIew

GFTabBarView(
    height: 200,
    controller: tabController,
    children: <Widget>[
        Container(color: Colors.red),
        Container(color: Colors.green),
        Container(color: Colors.blue),
        Container(color: Colors.cyan)
]),
Copy the code

3.GFTabs:GFTabBarwithGFTabBarViewThe combination of

GFTabs(
    controller: tabController,
    length: 3,
    indicatorColor: Colors.orange,
    tabs: <Widget>[
        Tab(
        icon: Icon(Icons.directions_bike),
        child: Text(
                "Tab1",
            ),
        ),
        Tab(
        icon: Icon(Icons.directions_bus),
        child: Text(
                "Tab2",
            ),
        ),
        Tab(
        icon: Icon(Icons.directions_railway),
        child: Text(
            "Tab3",
            ),
        ),
    ],
    tabBarView: GFTabBarView(
        controller: tabController,
        children: <Widget>[
            Container(
                child: Icon(Icons.directions_bike),
                color: Colors.red,
            ),
            Container(
                child: Icon(Icons.directions_bus),
                color: Colors.blue,
            ),
            Container(
                child: Icon(Icons.directions_railway),
                color: Colors.orange,
            ),
        ],
    ),
),
Copy the code

4.Getwidget also provides us with an alternative to tabsGFTabBarViewUse in combination —GFSegmentTabs:

GFSegmentTabs(
    tabController: tabController,
    length: 3,
    tabs: <Widget>[
        Text(
            "Tab1",
        ),
        Text(
            "Tab2",
        ),
        Text(
            "Tab3",),),Copy the code

5.GFTabBarAlso used as a bottom navigation bar:

Scaffold(
      appBar: GFAppBar(
        title: const Text('UI Kit'),
      ),
      body: GFTabBarView(controller: tabController, children: <Widget>[
        Container(color: Colors.red),
        Container(color: Colors.green),
        Container(color: Colors.blue)
      ]),
      bottomNavigationBar: GFTabBar(
       length: 3,
        controller: tabController,
        tabs: [
          Tab(
            icon: Icon(Icons.directions_bike),
            child: const Text(
              'Tab1',
            ),
          ),
          Tab(
            icon: Icon(Icons.directions_bus),
            child: const Text(
              'Tab2',
            ),
          ),
          Tab(
            icon: Icon(Icons.directions_railway),
            child: const Text(
              'Tab3'(), (], (), (Copy the code

9. Float the widget GFFloatingWidget

What is this? In fact, it can be found in many apps, such as take-out food platforms. A small button will be displayed on the side of the home page to remind you how far away the food is from you.GFFloatingWidgetYou can think of it as a two-tierStackThe top layer is the floating component, and the bottom layer is the original interfacebody.

Scaffold(
    body: GFFloatingWidget(
        child: GFIconBadge(
            child: GFAvatar(
                size: GFSize.LARGE,
                backgroundImage: AssetImage('images/mypicture.png'),
            ),
            counterChild: GFBadge(
                text: '12',
            shape: GFBadgeShape.circle,
        )), // Float component
        body: Container(
        color: Colors.blue,
        ), // It is usually body, but can also be any other component
        verticalPosition: MediaQuery.of(context).size.height * 0.7, 
        horizontalPosition: MediaQuery.of(context).size.width * 0.8, 
        showBlurness: false));Copy the code

Toast, Toast, Toast, Toast

Next: Toast, Switch, typography, drawers, folding card components