Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

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... Such as up to more than 30 categories of common components, the length of the problem will be divided into a number of articles, you can view the details of the relevant components in the directory below.

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

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

10. Prompt box GFToast

Attributes and meanings

attribute describe
text The text
context Context (required)
toastDuration location
backgroundColor The background color
textStyle Writing style
toastBorderRadius Rounded corners
border A border
trailing You can customize components on the right

1.GFToastIs a context-requiring prompt box, which is very simple to build ⬇️

GFToast.showToast(
    'This is a default style Toast',
    context,
);
Copy the code

2. It can be used in additiontoastPositionTo adjust the position of the prompt box:

GFToast.showToast(
    'GFToast', context,
    toastPosition: GFToastPosition.BOTTOM_RIGHT, / / position
);
Copy the code

3.GFToastthetrailingCustomization of almost all style components is supported, which is tie-inGFIconBadgeA simple example of:

GFToast.showToast('New message received', context,
    toastPosition: GFToastPosition.BOTTOM,
    backgroundColor: GFColors.LIGHT,
    textStyle: TextStyle(color: GFColors.DARK),
    trailing: GFIconBadge(
    child: GFAvatar(
        backgroundImage: AssetImage('images/mypicture.png'),
    ),
    counterChild: GFBadge(
    text: '+ 99')));Copy the code

11. Switch GFToggle

Attributes and meanings

attribute describe
onChanged Switch the callback
value The default state
enabledText Enable the status text display
disabledText Turn off the status text display
enabledTextStyle Enable status text style
enabledThumbColor Enable the status button color
enabledTrackColor Enable status background color
disabledTextStyle Turn off state text style
disabledThumbColor Turn off status button color
disabledTrackColor Turn off the background color
type style
boxShape Custom style button shape,.rectanglesquarerectanglecircular
borderRadius Rounded corners
duration Toggle animation duration

1. Default style: Android

GFToggle(
    onChanged: (value) {},
    value: false.)Copy the code

2. The iOS style

 GFToggle(
    onChanged: (val){},
    value: true,
    type: GFToggleType.ios,
 )
Copy the code

3. The square

 GFToggle(
    onChanged: (val){},
    value: true,
    type: GFToggleType.square,
 )
Copy the code

4. Custom styles (1, 2 rounded corners for Android style, modify button shape; 3, 4 rounded corners for iOS style, modify button shape)

GFToggle(
   onChanged: null,
   value: true,
   type: GFToggleType.custom,
 ),
Copy the code

12. Text typography

GFTypography has a set of standards that support header components and background text styles. You can use it to easily unify header text styles in projects.

Attributes and meanings

attribute describe
text headline
type Title type, yestypo1–typo6six
textColor Title text color
fontWeight Headword heavy
child Child components,textfornullEffective when
icon The header component, even though it’s called an icon, can be anything, right
dividerBorderRadius Changes the fillet property of the split line
dividerAlignment Secant line alignment
dividerColor Dividing line color
showDivider Whether to show the dividing line
dividerWidth Dividing line width
dividerHeight Height of secant line
backgroundImage The background image
backgroundImagecolorFilter Background image mask layer

1. Default style,typo1–typo6⬇ ️

GFTypography(
    text: 'GF Header Typo1',
    type: GFTypographyType.typo1,
),
Copy the code

2. Custom style: add header component, background picture:

GFTypography(
    text: 'Now go out and do what you want to do. ',
    type: GFTypographyType.typo1,
    showDivider: false,
    icon: GFAvatar(
        backgroundImage: AssetImage('images/mypicture.png'),
    ),
    backgroundImage: AssetImage('images/backimage.png')),Copy the code

13. GFDrawer drawer

Attributes and meanings

attribute describe
elevation The vertical height of the drawer (z coordinates) controls the shadow effect
semanticLabel Semantic labels
backgroundImage Drawer background
colorFilter The mask layer
gradient Gradient background color,backgroundImageThe value is null
color The background color,backgroundImageThe value is null
child Drawer contents assembly

1. Preliminary construction ⬇️ :

import 'package:flutter/material.dart';
import 'package:getwidget/getwidget.dart';

class GFDrawerPage extends StatefulWidget {
    const GFDrawerPage({Key? key}) : super(key: key);
    @override
    State<GFDrawerPage> createState() => _GFDrawerPagePageState();
}
class _GFDrawerPagePageState extends State<GFDrawerPage> {
    final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
    
    @override
    Widget build(BuildContext context) {
        returnGestureDetector( onTap: () { _scaffoldKey.currentState! .openDrawer(); }, child: Scaffold(// To invoke the drawer with a non-drag gesture, specify a Key
            key: _scaffoldKey,
            drawer: GFDrawer(),
        ),
    );
}}
Copy the code

2.GetwidgetProvides us with a quick component to create drawer heads:GFDrawerHeader, but the author thinks it is not useful, low customization, position adjustment is not convenient, because the drawer head components in the project will almost not reuse, so it is recommended to use their own way to write better, the following is aGFDrawerHeaderA simple example of

GFDrawerHeader(
    currentAccountPicture: GFAvatar(
    radius: 80.0,
    backgroundImage: NetworkImage(
        "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"),
    ),
    otherAccountsPictures: <Widget>[
        Image(
            image: NetworkImage(
                "https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg"),
            fit: BoxFit.cover,
        ),
        GFAvatar(
            child: Text("ab"),
        )
    ],
    child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
            Text('user name'),
            Text('[email protected]'),,),),Copy the code

14. The pop-up GFAlert

Attributes and meanings

attribute describe
alignment alignment
backgroundColor The background color
title The title
content content
type Popup window type
child Title component,titlefornullEffective when
width Popup window width
contentChild Content component,contentfornullEffective when
contentTextStyle Content text style
titleTextStyle Title text style
bottombar Popover bottom component array

1.GFAlertAs aGetwidgetThe only popover component in “Popover” is somewhat disappointing in terms of ease of use, and must be used with the GFFloatingWidget (see previous article). However, it is not a real popover, but simply encapsulates the common popover style structure and uses the floating component to display it. Here’s a simple use example ⬇️ :

class GFAlertPage extends StatefulWidget {
    const GFAlertPage({Key? key}) : super(key: key);
    @override
    State<GFAlertPage> createState() => _GFAlertPagePageState();
}
class _GFAlertPagePageState extends State<GFAlertPage> {
    bool showblur = false;
    Widget alertWidget = SizedBox();
    @override
    Widget build(BuildContext context) {
        return GestureDetector(
            onTap: () {
                setState(() {
                    showblur = true;
                    alertWidget = GFAlert(
                        alignment: Alignment.center,
                        title: 'GFAlert title',
                        content: 'GFAlert content section, GFAlert needs to be used with the floating component GFFloatingWidget ',
                        type: GFAlertType.rounded,
                        bottombar: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                                GFButton(
                                    onPressed: () {
                                        setState(() {
                                            alertWidget = SizedBox();
                                            showblur = false;
                                        });
                                    },
                                    color: GFColors.LIGHT,
                                    child: const Text(
                                        'good',
                                        style: TextStyle(color: Colors.black),
                                    ),
                                ),
                            ],
                        ),
                    );
                });
            },
        child: Scaffold(
            appBar: AppBar(
                backgroundColor: GFColors.DARK,
                leading: InkWell(
                    onTap: () {
                        Navigator.pop(context);
                    },
                    child: Container(
                        child: Icon(
                            CupertinoIcons.back,
                            color: GFColors.SUCCESS,
                        ),
                    )),
                title: const Text(
                    'GFAlert',
                    style: TextStyle(fontSize: 17),
                ),
                centerTitle: true,
            ),
            body: GFFloatingWidget(
                verticalPosition: 150, showBlurness: showblur, child: alertWidget, ), )); }}Copy the code

15. Fold the card GFAccordion

Attributes and meanings

attribute describe
title Title text
content Content of the text
titleChild Title component,titlefornullEffective when
collapsedIcon Component to the right of the title in collapsed state
contentChild Content component,contentfornullEffective when
collapsedTitleBackgroundColor The title background color in the folded state
expandedTitleBackgroundColor The title background color in the expanded state
expandedIcon Expand the component to the right of the title in the state
titlePadding Header container margin
textStyle Title text style
contentBackgroundColor Content background color
contentPadding Inner margin of the content container
titleBorder The title borders
contentBorder The content frame
margin From the outside
showAccordion Controls whether to fold or control from the outside
onToggleCollapsed State switch callback,true:,false: folding
titleBorderRadius The title with rounded corners
contentBorderRadius Content with rounded corners

1.GFAccordionIs a simple and excellent folding component, often used for information cards, text introduction bars, etc., this is a basic example ⬇️ :

GFAccordion(
    title: 'GF Accordion',
    content: 'This is a default style folding card.',),Copy the code

2. It can also be used with other components according to your own requirements. Example 2:

GFAccordion(
    titleChild: GFTypography(
    text: 'Personal Data',
    ),
    expandedTitleBackgroundColor: Colors.amber,
    contentBackgroundColor: Colors.blue[100],
    collapsedIcon: Text('a'),
    expandedIcon: Text('put'),
    contentChild: GFListTile(
    titleText: 'late night',
    subTitleText: 'Flutter Engineer ',
    icon: Icon(
        Icons.favorite,
        color: Colors.red,
    ),
    color: Colors.transparent,
    avatar: GFAvatar(
        backgroundImage: AssetImage('images/mypicture.png'),),)),Copy the code

To be continued, next: Navigation bar, search bar, scoring component, drop-down menu, loading prompt component, progress bar