DEV Community

Cover image for GetWidget 1.0.3 version Released
GetWidget
GetWidget

Posted on • Updated on

GetWidget 1.0.3 version Released

Hey everyone,

We released our new version of GetWidget on pub.dev. You can check out our new version getwidget 1.0.3 of on pub https://pub.dev/packages/getwidget

Now you can use our new features with below dependencies:

dependencies:
getwidget: ^ 1.0.3

You can check out Getting Start on our Docs: Getting Start

We have introduced major Four new widgets in these updates.

  • GF Toast Widget
  • GF Toggle Widget
  • GF Accordion Widget
  • GF Alert Widget
  • GF SearchBar Widget

GF Toast Widget:
GFToast can be used to display quick warning or error messages.

Usage
GFToast should be wrapped inside the GFFloating Widget. The child of the GFFloatingWidget takes GFToast as its argument and the body takes any kind of widgets. The simple code is as shown below.

Alt Text

Sample Code:

import 'package:getwidget/getwidget.dart';

return Scaffold(
   body:GFFloatingWidget(
     child:GFToast(
     text: 'This item already has the label β€œtravel”',
   ),
   body:Text('body or any kind of widget here..')
 )
)
Enter fullscreen mode Exit fullscreen mode

Read More About GetFlutter Toast Widget https://docs.getwidget.dev/gf-toast

GF Toggle Widget

GFToggle is used to toggle the on/off state of a single setting.

Uses

import 'package:getwidget/getwidget.dart';

 GFToggle(
    onChanged: (val){},
    value: null,
 )
Enter fullscreen mode Exit fullscreen mode

Read More About GF Toggle Widget https://docs.getwidget.dev/gf-toggle

GF Accordion

Tapping a GF Accordion expands or collapses the view of its children. GFAccordion is used to collapse and expand the content to view the messages or the description of the given title

Usage

import 'package:getwidget/getwidget.dart';

 GFAccordian(
    title: 'GF Accordion',
    content: Text('GetFlutter is an open source library that comes with pre-build 1000+ UI components.'
    )
)
Enter fullscreen mode Exit fullscreen mode

Read More About GetFlutter Accordion Widget https://docs.getwidget.dev/gf-accordion

GF Alert

GFAlert is a simple widget that is used to show some information and wait for the user's action.

Alt Text

Uses

GFAlert should be wrapped inside the GFFloating Widget. The child of the GFFloatingWidget takes GFAlert as its argument and the body takes any kind of widgets. The Alert code is as shown below.

import 'package:getwidget/getwidget.dart';

 return Scaffold(
   body:GFFloatingWidget(
     child:GFAlert(
              title: 'Welcome !',
              content: 'Get Flutter is one of the largest Flutter open-source UI library for mobile or web apps with  1000+ pre-built reusable widgets.',
              bottombar: Row(
                 mainAxisAlignment: MainAxisAlignment.end,
                 children: <Widget>[
                    GFButton(
                      onPressed: (){
                      setState(() {
                        showalert=false;
                    });
                  },
                    shape: GFButtonShape.pills,
                    icon: Icon(Icons.keyboard_arrow_right, color: GFColors.getGFColor(GFColor.white),),
                    position: GFPosition.end,
                    text: 'Learn More',)
                ],
              ),
            )
   body:Text('body or any kind of widget here..')
 )
)
Enter fullscreen mode Exit fullscreen mode

Read More About GetFlutter Alert Widget https://docs.getwidget.dev/gf-alert

GF SearchBar Widget

GF SearchBar represents a text field that can be used to search through a collection.

Alt Text

Usage

import 'package:getwidget/getwidget.dart';

List list = [
    "Flutter",
    "React",
    "Ionic",
    "Xamarin",
  ];

GFSearchBar(
  searchList: list,
  searchQueryBuilder: (query, list) {
    return list
        .where((item) =>
            item.toLowerCase().contains(query.toLowerCase()))
        .toList();
  },
  overlaySearchListItemBuilder: (item) {
    return Container(
      padding: const EdgeInsets.all(8),
      child: Text(
        item,
        style: const TextStyle(fontSize: 18),
      ),
    );
  },
  onItemSelected: (item) {
    setState(() {
      print('$item');
    });
  },
),
Enter fullscreen mode Exit fullscreen mode

Read More about the GetFlutter Search Bar Widget https://docs.getwidget.dev/gf-searchbar

Please give your feedback and suggestion on GetWidget GitHub Repo.

Top comments (2)

Collapse
 
orimdominic profile image
Orim Dominic Adah

Hello! Thanks for creating this awesome library. Thanks for posting an article about it too for awareness.
Could you please update the article to formatting the parts in code to look like code. I mean doing something like

This is code

It helps with readability.
Thannks

Collapse
 
getwidget profile image
GetWidget

Thanks. We added code formating.