Make writing a habit together! This is the fourth 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, progress bar GFProgressBar

๐Ÿ‘‰ Chapter 5: Flash component GFShimmer, animation GFAnimation, border GFBorder, bottom drawer GFBottomSheet, checkbox GFCheckbox

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

21. Flash module GFShimmer

Attribute and meaning description

attribute describe
child A child component used to display the shimmer effect
direction Animation direction, defaultGFShimmerDirection.leftToRight
duration Animation duration, 1.5s by default
showGradient Whether gradient is displayed
gradient Gradient,showGradientfortrueEffective when
shimmerEffectCount Animation execution times, default 0 (infinite loop)
showShimmerEffect Controls the active state of the animation effect
mainColor The main color
secondaryColor Secondary color

1.GFShimmerAnd what we shared earlierShimmerBasically the same, low-light animation effects are implemented by wrapping components, generally used to load animations, here is a simple example โฌ‡๏ธ :

GFShimmer(
    child: Container(
        width: 100,
        height: 100.// The colors here are not shown in GFShimmer, but cannot be transparent
        color: Colors.green,
))
Copy the code

2. The package here is a row style, can also be wrappedGFListTileAnd other packaged components to quickly implement (SizedBoxAnd transparentContainerWill not beGFShimmerDisplay) :

GFShimmer(child: shimmerTest())

Widget shimmerTest() {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
            Container(
                width: 80,
                height: 80,
                color: Colors.white,
            ),
            const SizedBox(width: 12),
            Expanded(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                        Container(
                        width: double.infinity,
                        height: 15,
                        color: Colors.white,
                        ),
                        const SizedBox(height: 6),
                        Container(
                            width: MediaQuery.of(context).size.width * 0.5,
                            height: 15,
                            color: Colors.white,
                        ),
                        const SizedBox(height: 6),
                        Container(
                            width: MediaQuery.of(context).size.width * 0.25,
                            height: 15,
                            color: Colors.white,
                        ),
                    ],
                ),
            )
        ],
    ),);
}}
Copy the code

3. Gradient shimmer effect (there are obvious pause at present, I don’t know whether it will be optimized in the later stage, it is suggested to use properties for the two colorsmainColorandsecondaryColor, multicolor recommended useShimmer) :

GFShimmer(
    child: const Text(
        'GF Shimmer',
        style: TextStyle(fontSize: 48, fontWeight: FontWeight.w700),
        ),
    showGradient: true,
    gradient: LinearGradient(colors: [Colors.red, Colors.blue]),
),
Copy the code

22. The animation GFAnimation

Attribute and meaning description

attribute describe
duration The duration of animation execution
reverseDuration The duration of the reverse animation execution
alignment Defines the alignment of animation components during animation
activeAlignment Defines the alignment of animation components during animation (inonTapAfter)
child A child component that displays the animation effect
curve Animated curve, default isCurves.linear
type GFAnimationType, that isalign,size,container,rotateTransition,scaleTransition,slideTransition ๅ’Œ textStyle
width defineAnimatedContainerInitial width
changedWidth defineAnimatedContainerWidth, which can be expanded during animation
height defineAnimatedContainerThe initial height
changedHeight defineAnimatedContainerIt can unfold during animation
activeColor Define when onTap is triggeredAnimatedContainerThe color of the
color defineAnimatedContainerThe color of the
padding definechild ๆˆ– AnimatedContainerThe population of the
margin definechild ๆˆ– AnimatedContainerThe margin of
onTap The user clickschildAt the time of the call
turnsAnimation forGFAnimationType.rotateTransition, can be inRotationTransitionAdd custom turn animations to the widget
scaleAnimation forGFAnimationType.scaleTransition, can be inScaleTransitionAdd a custom zoom animation to the widget
controller Controller for animation.
textDirection defineAnimatedDefaultTextStyleText direction, i.e. [LTR, RTL]
slidePosition forGFAnimationType.slideTransition, which sets the animation for the position of the component
style The text style
textAlign Text alignment
textOverflow Text overflow processing
maxLines The largest number of lines
textWidthBasis Text base width
fontSize The shop name
fontWeight Word again

1. Rotating animation example โฌ‡๏ธ :

class GFAnimationPage extends StatefulWidget {
    const GFAnimationPage({Key? key}) : super(key: key);
    @override
    State<GFAnimationPage> createState() => _GFAnimationPagePageState();
}

class _GFAnimationPagePageState extends State<GFAnimationPage> with TickerProviderStateMixin {
    late AnimationController controller;
    late Animation<double> animation;
    bool isWorking = false;

    @override
    void initState() {
        controller = AnimationController(duration: const Duration(seconds: 5), vsync: this);
        animation = CurvedAnimation(parent: controller, curve: Curves.linear);
        super.initState();
    }
    
    @override
    void dispose() {
        controller.dispose();
        super.dispose(); }... GFAnimation( turnsAnimation: animation, controller: controller, type: GFAnimationType.rotateTransition, alignment: Alignment.center, child: Image.asset('images/mypicture.png',
            width: 80,
            height: 80,
        ),
    ),

    GFButton(
        text: isWorking ? 'stop' : 'play', color: isWorking ? Colors.green : Colors.blue, onPressed: () { isWorking ? controller.stop() : controller.repeat(); setState(() { isWorking = ! isWorking; }); }}),Copy the code

2. Zoom animation:

. GFAnimation( turnsAnimation: animation, controller: controller, type: GFAnimationType.scaleTransition, alignment: Alignment.center, child: Image.asset('images/mypicture.png',
        width: 80,
        height: 80,),),Copy the code

3. Align animations:

. GFAnimation( turnsAnimation: animation, controller: controller, type: GFAnimationType.align, alignment: isWorking ? Alignment.bottomLeft : Alignment.bottomRight, child: Image.asset('images/mypicture.png',
        width: 80,
        height: 80,),)Copy the code

4. Transition animation:

. offsetAnimation = Tween<Offset>( begin: Offset(0.0),
    end: Offset(1.0), ).animate(CurvedAnimation( parent: controller, curve: Curves.linear, )); . Container( color: Colors.white, width: MediaQuery.of(context).size.width, child: GFAnimation( controller: controller, slidePosition: offsetAnimation, type: GFAnimationType.slideTransition, child: Image.asset('images/mypicture.png',
            width: 80,
            height: 80,),),)Copy the code

5. A dynamic component that can automatically change dimensions at a given time:

bool selected = false;
late AnimationController controller;
late Animation<double> animation;

@override
void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.linear);
    controller.repeat();
}

@override
void dispose() {
    controller.dispose();
    super.dispose();
}

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        Text('data'),
        GFAnimation(
            onTap: () {
                if(mounted) { setState(() { selected = ! selected; }); } }, width: selected ?100 : 50,
            height: selected ? 100 : 50,
            type: GFAnimationType.size,
            controller: controller,
            child: Image.asset(
                'images/mypicture.png',
                width: 80,
                height: 80,
            ),
        ),
        Row(
            children: [
                Expanded(child: SizedBox()),
                GFButton(onPressed: () {})
            ],
        )
    ],
)
Copy the code

6. Animation container:

late AnimationController controller;
late Animation<double> animation;
double fontSize = 30;

@override
void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.linear);
    controller.repeat();
}

@override
void dispose() {
    controller.dispose();
    super.dispose();
}

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        Text('This is a text.'),
        GFAnimation(
            width: 50,
            changedWidth: 100,
            height: 50,
            changedHeight: 100,
            activeColor: Colors.transparent,
            color: Colors.transparent,
            fontSize: fontSize,
            type: GFAnimationType.container,
            child: Image.asset(
                'images/mypicture.png',
                width: 80,
                height: 80,
            ),
        ),
        Row(
            children: [
                Expanded(child: SizedBox()),
                GFButton(text: 'This is a button.', onPressed: () {})
            ],
        )
    ],
)
Copy the code

23. A GFBorder border

Attribute and meaning description

attribute describe
child WidgetType, which can be any component, text, etc
padding childThe population of the
strokeWidth doubleType that defines the width of the border
color Used to change the color of the border type
dashedLine An array used to implement bounding solid and dotted lines, for exampledashedLine: [14, 4]Where 14 represents the length of a single solid line and 4 represents the length of a dashed line
type GFBorderTypeIs used to define different types of borders, namely round, rectangle, and oval
radius Rounded corner property of the border

1. Basic styles โฌ‡๏ธ :

GFBorder(
    color: Color(0xFF19CA4B),
    type: GFBorderType.rect,
    child: Image.asset(
        'images/picture.png',
        width: 200,
        fit: BoxFit.fitWidth,
    ),
)
Copy the code

2. Dotted border:

GFBorder(
    color: Color(0xFF19CA4B),
    // 14 represents the length of a single solid line and 4 represents the length of a dashed line
    dashedLine: [14.4],
    type: GFBorderType.rect,
    child: Image.asset(
        'images/picture.png',
        width: 200,
        fit: BoxFit.fitWidth,
    ),
)
Copy the code

3. Dot border:

GFBorder(
    color: Color(0xFF19CA4B),
    dashedLine: [1.2],
    type: GFBorderType.rect,
    child: Image.asset(
        'images/picture.png',
        width: 200,
        fit: BoxFit.fitWidth,
    ),
)
Copy the code

4. Rounded border:

GFBorder(
    radius: Radius.circular(20),
    color: Color(0xFF19CA4B),
    dashedLine: [2.0],
    type: GFBorderType.rRect,
    child: Container(
        height: 100,
        color: Color(0xFFE9FFEF),),)Copy the code

5. Oval frame:

GFBorder(
    type: GFBorderType.oval,
    dashedLine: [2.0],
    color: Color(0xFF19CA4B),
    strokeWidth: 2,
    child: Center(child: Text('Oval Border')))Copy the code

6. Circular border (same as dotted lines, dots, etc.) :

SizedBox(
    width: 100,
    height: 100,
    child: GFBorder(
        type: GFBorderType.circle,
        dashedLine: [1.0],
        color: Color(0xFF19CA4B),
        strokeWidth: 2,
        child: Center(
        child: Text(
            'Circular Border',
            textAlign: TextAlign.center,
        )),
    ),
),
Copy the code

24. Bottom drawer GFBottomSheet

Attribute and meaning description

attribute describe
minContentHeight Minimum height of content. whenenableExpandableContentThe value must be greater than or equal to 0. The default value is 0
maxContentHeight Maximum height of content. Must be greater than or equal to 0. The default value is 300
stickyHeader GFBottomSheetThe header. You can swipe or clickstickyHeaderinteract
contentBody GFBottomSheetThe main body. You can swipe or clickcontentBodyinteract
stickyFooter GFBottomSheetAt the bottom. You can swipe or clickstickyFooterinteract
stickyFooterHeight defineGFBottomSheetBottom height
stickyHeaderHeight defineGFBottomSheetThe height of the table header
elevation You can think of it as vertical height, controlGFBottomSheetThe shadow below. Must be greater than or equal to 0. The default value is 0.
enableExpandableContent Whether to allowcontentBodyCarried out. The default value is false.
controller GFBottomSheetThe controller
animationDuration Duration of expand/collapse animation

Example code โฌ‡๏ธ :

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

class GFBottomSheetPage extends StatefulWidget {
    const GFBottomSheetPage({Key? key}) : super(key: key);
    @override
    State<GFBottomSheetPage> createState() => _GFBottomSheetPagePageState();
}

class _GFBottomSheetPagePageState extends State<GFBottomSheetPage> {
    final GFBottomSheetController controller = GFBottomSheetController();
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    backgroundColor: Colors.blueGrey,
        bottomSheet: GFBottomSheet(
            animationDuration: 500,
            controller: controller,
            maxContentHeight: 150,
            stickyHeaderHeight: 100,
            stickyHeader: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [BoxShadow(color: Colors.black45, blurRadius: 0)]),
                child: const GFListTile(
                    avatar: GFAvatar(
                        backgroundImage: AssetImage('images/mypicture.png'),
                    ),
                    titleText: 'late night',
                    subTitleText: 'Flutter Engineer ',
                ),
            ),
            contentBody: Container(
                height: 250,
                margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                child: ListView(
                shrinkWrap: true,
                physics: const ScrollPhysics(),
                children: const [
                    Center(
                    child: Text(
        Flutter is Google's open source application development framework with a refresh rate of 120fps and is currently a very popular cross-platform UI development framework. \n 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 ๐ŸŽ‰๐ŸŽ‰. ',
                        style: TextStyle(
                        fontSize: 15, wordSpacing: 0.3, letterSpacing: 0.2),
                        ))
                    ],
                ),
            ),
            stickyFooter: Container(
                color: GFColors.SUCCESS,
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                        Text(
                            'Flutter Wheels recommended ',
                            style: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                            color: Colors.white),
                        ),
                        Text(
                            'Getwidget',
                            style: TextStyle(fontSize: 15, color: Colors.white),
                        ),
                    ],
                ),
            ),
        stickyFooterHeight: 50, ), floatingActionButton: FloatingActionButton( backgroundColor: GFColors.SUCCESS, child: controller.isBottomSheetOpened ? Icon(Icons.keyboard_arrow_down) : Icon(Icons.keyboard_arrow_up), onPressed: () { controller.isBottomSheetOpened ? controller.hideBottomSheet() : controller.showBottomSheet(); })); }}Copy the code

25. Checkbox GFCheckbox

Attribute and meaning description

attribute describe
type Check box type
size Check box size
activeBgColor Select the background color
inactiveBgColor The background color is not selected
activeBorderColor Select the border color
inactiveBorderColor The border color is not selected
onChanged State change callback
value If the selected
activeIcon Select icon style
inactiveIcon The icon style is not selected
customBgColor Custom style background color
autofocus In the real state, this check box is selected as the initial focus when no other nodes in the current range are in focus
focusNode An optional focus node that is used as the focus node for this check box.

1. Basic style (with rounded corners) โฌ‡๏ธ :

GFCheckbox(
    size: GFSize.SMALL,
    activeBgColor: GFColors.SUCCESS,
    onChanged: (value) {
        setState(() {
            isChecked = value;
        });
    },
    value: isChecked,
)
Copy the code

2. Square style:

type: GFCheckboxType.square,
Copy the code

3. Circular style:

type: GFCheckboxType.circle,
Copy the code

4. Custom styles:

GFCheckbox(
    type: GFCheckboxType.square,
    activeBgColor: GFColors.SECONDARY,
    activeIcon: Icon(Icons.sentiment_satisfied),
    onChanged: (value) {
        setState(() {
            isChecked = value;
        });
    },
    value: isChecked,
    inactiveIcon: Icon(Icons.sentiment_dissatisfied),
)
Copy the code

5. Example:

bool isSmileChecked = false;
bool isMiddleChecked = false;
bool isLargeChecked = false;

GFCard(
    content: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
            GFCheckbox(
                size: GFSize.SMALL,
                activeBgColor: GFColors.DANGER,
                onChanged: (value) {
                    setState(() {
                        isSmileChecked = value;
                        });
                    },
                value: isSmileChecked,
                inactiveIcon: null,
            ),
            GFCheckbox(
                activeBgColor: GFColors.SECONDARY,
                onChanged: (value) {
                    setState(() {
                        isMiddleChecked = value;
                    });
                },
                value: isMiddleChecked,
                inactiveIcon: null,
            ),
            GFCheckbox(
                size: GFSize.LARGE,
                activeBgColor: GFColors.SUCCESS,
                onChanged: (value) {
                    setState(() {
                        isLargeChecked = value;
                    });
                },
                value: isLargeChecked,
                inactiveIcon: null[], (), (Copy the code

Checkbox table templates, checkbox drop-down menus, launch screens, radio buttons, sticky titles, etc