ionicfirebaseapp/getwidget

Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

GetWidget, a leading Flutter app development company, proudly operates as a 100% free and open-source platform. We encourage and support an active, healthy community that accepts contributions from the public – including you. There are a couple of ways in which you can contribute to the growing community of getwidget. UI Kit library built with Flutter SDK to make Flutter development easier and more joyful than ever. GetWidget has 1000+ pre-build widgets that you can reuse to develop both Flutter mobile app and web app. Our motto is to provide the best Flutter UI library to the Flutter community to speed up their development process and build awesome apps with pre-build Flutter Library Components

Table of contents

• Screenshot
• Quick start
• Features
• Demo
• Contributing
• Documentation
• Copyright and license
• Marketplace

Screenshot

Quick start

Read the Getting started page Forum Support and discussion

Features

we have launched the library with the following components :

GETWIDGET WIDGET COLLECTION

Flutter Button Widget | Flutter Elevated Button Widget | Flutter Rounded Button Widget | Flutter Square Button Widget | Flutter Icon Button Widget | Flutter Social Button Widget | Flutter Badge Widget | Flutter Avatar Widget | Flutter Image Widget | Flutter Card Widget | Flutter Carousel Widget | Flutter Tile Widget | Flutter Tabbar Widget | Flutter Typography | Flutter Toaster Widget | Flutter Switch Toggle Widget | Flutter Drawer Widget | Flutter Accordian Widget | Flutter Alert Widget | Flutter Appbar Widget | Flutter Searchbar Widget | Flutter Floating Widget | Flutter Rating Widget | Flutter Dropdown Widget | Flutter Loader Widget | Flutter Progress Bar Widget | Flutter Shimmer Widget | Flutter Animation Widget | Flutter Border Widget | Flutter Bottomsheet Widget | Flutter Checkbox Widget | Flutter CheckboxListTile Widget | Flutter Radio Button Widget | Flutter Radio ListTile Widget | Flutter Sticky Header Widget

Demo

Play Store

An Open-Source News App Built With GetWidget & Flutter

Ionicfirebaseapp.com has been developed an open-source News Mobile App with GetWidget, So can start building app faster to get an overview and do customization. You can Download News App Souce Code here: https://www.ionicfirebaseapp.com/products

Contributing

GetWidget is 100% free and open source. We encourage and support an active, healthy community that accepts contributions from the public – including you. There are a couple of ways in which you can contribute to the growing community of getwidget.

• Pick up any issue marked with "good first issue"
• Fix a bug
• Write and improve some documentation. Documentation is very critical to us. We would appreciate help in adding multiple languages to our docs.
• If you are a developer, feel free to check out the source and submit pull requests.
• Dig into CONTRIBUTING.MD, which covers submitting bugs, requesting new features, preparing your code for a pull request, etc.
• Please don't forget to like, follow, and star our repo! Join our growing community to keep up to date with the latest GetWidget development.

Flutter Getwidget Documentation

Installation Guide

Social Media

Twitter: https://twitter.com/getwidgetdev

Facebook: https://www.facebook.com/getwidget

Linkedin: https://www.linkedin.com/showcase/getwidget/

Instagram: https://www.instagram.com/getwidgetdev/

Copyright-and-license

Code and documentation Copyright 2017-2020 the GETWIDGET Authors and IONICFIREBASEAPP Code released under the [MIT License]. Docs released under Creative Commons.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

getwidget's Issues

XD UI Kit

Hello, friends,
Are there any "Get Flutter" UI kits available for adobe XD?

Table Widget

Is your feature request related to a problem? Please describe.
I see no Table widget in your previews or in the docs, something like this.

Describe the solution you'd like
Is there a table widget currently, if not are there any plans for one.

Button Border Redius

Provide an option in GFButton to change button border-radius using Box-Decoration.
Only this feature is missing in GFButton.
Thank you.

Can we add some layou like bootstrap

the same as title

How to be a contributor?

Hello, I am a developer from Indonesia. It looks like this repository is very great. Recently, i use flutter as main mobile development in my office. I'm interested in contributing code on this repository. What should i do? is there any official guidance to be a contributor?

undefined name GFType of the button

import 'package:getflutter/getflutter.dart';

GFButton(
onPressed: (){},
text: "primary",
type: GFType.solid,
),

undefined name GFType

GFCarousel with one item still allows to scroll

If a GFCarousel is build with an list of items of length one, it still allows scrolling although in this case this does not make sense and should not happen.

On click event on images

Is your feature request related to a problem? Please describe.
I am trying to use the GFImageOverlay, but one of my main problems is that the image is not clickable. Since i wanted to have it so that when i click the image, it expands it, but since the GFImageOverlay does not support on click event, I can't do that

Describe the solution you'd like
Adding either onClick or onTap to the GFImageOverlay widget.

Describe alternatives you've considered
I used to use ListTile for this but when I saw this, I switched over, but its missing one of my main priorities/needs.

Wrong GFButton size.

If button is not fullWidthButton or blockButton, it would be same with blockButton.
In my opinion, it should be wrap content width with some padding.
Thank you

Could you provide multi design inputs ?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

GFProgressBar giving out error

** I get the following error when calling the GFProgressBar **

════════ Exception caught by animation library ═════════════════════════════════════════════════════
The following _TypeError was thrown while notifying listeners for AnimationController:
type 'int' is not a subtype of type 'double'

When the exception was thrown, this was the stack: 
#0      _GFProgressBarState.initState.<anonymous closure>.<anonymous closure> (package:getwidget/components/progress_bar/gf_progress_bar.dart:139:17)
#1      State.setState (package:flutter/src/widgets/framework.dart:1240:30)
#2      _GFProgressBarState.initState.<anonymous closure> (package:getwidget/components/progress_bar/gf_progress_bar.dart:138:15)
#3      AnimationLocalListenersMixin.notifyListeners (package:flutter/src/animation/listener_helpers.dart:137:19)
#4      AnimationController._tick (package:flutter/src/animation/animation_controller.dart:798:5)
...
The AnimationController notifying listeners was: AnimationController#778da(▶ 0.000)
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: type 'int' is not a subtype of type 'double'

════════ Exception caught by animation library ═════════════════════════════════════════════════════
type 'int' is not a subtype of type 'double'
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: type 'int' is not a subtype of type 'double'

════════ Exception caught by animation library ═════════════════════════════════════════════════════
type 'int' is not a subtype of type 'double'
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: type 'int' is not a subtype of type 'double'

════════ Exception caught by animation library ═════════════════════════════════════════════════════
type 'int' is not a subtype of type 'double'
════════════════════════════════════════════════════════════════════════════════════════════════════

My code
GFProgressBar( animateFromLastPercentage: true, animation: true, progressBarColor: Colors.greenAccent, circleStartAngle: 0.0, type: GFProgressType.circular, progressHeadType: GFProgressHeadType.circular, circleWidth: 90.0, percentage: 0.5, width: 100, radius: 90, backgroundColor : Colors.black26, ),
Pls help i have had this for nearly a week now

Demo

do you have source of demo?

[GFCarousel] timer of the autoPlay is not disposed

Describe the bug
In GFCarousel, inside dispose method,

@override
void dispose() {
  super.dispose();
  timer?.cancel();
}

The problem here is that super.dispose is being called first and because of that timer?.cancel(); will never be executed.

Expected behavior
timer should be disposed before calling super.dispose();

gradient value does not take Gradient().

GFDrawer(
gradient: Gradient() //error abstract classes can't be instantiated
)

why?

Error while compiling

Compiler message:
../../../../.pub-cache/hosted/pub.dartlang.org/get-1.17.2/lib/src/snackbar/snack_route.dart:279:8: Error: The method 'SnackRoute.install' has more required arguments than those of overridden method 'OverlayRoute.install'.
void install(OverlayEntry insertionPoint) {
^
/media/xxxx/Softwares/flutter_skd/flutter/packages/flutter/lib/src/widgets/routes.dart:41:8: Context: This is the overridden method ('install').
void install() {
^
../../../../.pub-cache/hosted/pub.dartlang.org/get-1.17.2/lib/src/routes/default_route.dart:242:9: Error: No named parameter with the name 'animation'.
animation: animation,
^^^^^^^^^
/media/xxxx/Softwares/flutter_skd/flutter/packages/flutter/lib/src/cupertino/route.dart:435:3: Context: Found this candidate, but the arguments don't match.
CupertinoFullscreenDialogTransition({
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
../../../../.pub-cache/hosted/pub.dartlang.org/get-1.17.2/lib/src/snackbar/snack_route.dart:289:18: Error: Too many positional arguments: 0 allowed, but 1 found.
Try removing the extra positional arguments.
super.install(insertionPoint);

Still getting this error.

How to revert back to non-blurred after toast auto dismiss

This is not a bug but probably more a misunderstanding or a missing documentation/description. I find it nice that we can blur the main screen while displaying a toast. However it is not clear to me how to best revert back to non-blurred display. Here is a small snip that is somehow working but calling a future to reset the variable is kind of a hack. How was the intention of the proper usage?

Note that if we would have a button to let the toast close there is no problem like that. Probably we need a handler in the GFFloatingWidget?

  Widget toastWidget(BuildContext context) {
    if (showFloatingToast) {
      return GFToast(
        backgroundColor: Colors.white,
        text: S.of(context).referralLinkCopiedToClipboard,
        textStyle: const TextStyle(color: Colors.black87),
        button: GFButton(
          onPressed: () {
            setState(() {showFloatingToast = false;});
          },
          text: S.of(context).ok,
          type: GFButtonType.transparent,
          color: GFColors.SUCCESS,
        ),
        autoDismiss: true,
      );
    } else
      return Container();
  }

  Widget body(BuildContext context, SignInState signInState) {
    var userData = signInState?.userPrivateData;
    if (userData != null && userData.defaultReferralLink != null) {
      return Container(
        child: Center(
          child: ListView(
            children: <Widget>[
              GFCard(
                boxFit: BoxFit.cover,
                title: GFListTile(
                    title: GFTypography(
                      text: S.of(context).personalReferralLink,
                      type: GFTypographyType.typo4,
                      dividerWidth: 40,
                      dividerColor: Theme.of(context).primaryColor,
                    ),
                    subTitle: Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: Text('Share this link to invite new users.',
                          style: TextStyle(fontSize: 12, color: Colors.black87)),
                    ),
                    icon: GFIconButton(
                      icon: Icon(Icons.content_copy, color: GFColors.DARK, size: 30),
                      type: GFButtonType.transparent,
                      onPressed: () async {
                        Clipboard.setData(ClipboardData(text: userData.defaultReferralLink));
                        setState(() {
                          showFloatingToast = !showFloatingToast;
                          Future.delayed(Duration(milliseconds: 700), () => setState(() {showFloatingToast = false;}));
                        });
                      }
                    )
                ),
                content: qrImage(signInState, 300),
                buttonBar: GFButtonBar(
                  alignment: WrapAlignment.start,
                  children: <Widget>[
                    GFButton(
                      onPressed: () {},
                      text: 'Read More',
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    } else {
      return Container(
        child: Center(
          child: Text(S.of(context).couldNotGetReferralLink),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    SignInState signInState = Provider.of<SignInState>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).referrals),
        elevation: 2.0,
      ),
      //drawer: DrawerWidget(),
      body: SafeArea(
        child: GFFloatingWidget(
            verticalPosition: MediaQuery.of(context).size.width * 0.5,
            horizontalPosition: MediaQuery.of(context).size.height * 0.02,
            showblurness: showFloatingToast,
            blurnessColor: Colors.black45,
            child: toastWidget(context),
            body: body(context, signInState)
        ),
        bottom: false,
      ),
    );
  }

Thanks for a quick feedback or a suggestion how to use it properly.

I want to see the demo, but there's nothing in the demo

GFCard padding doesn't work properly

Describe the bug
When setting the padding property on the GFCard, the outer paddings don't change instead the distance between the GFcard image and the bottom buttonBar

Expected behavior
Outer paddings changing

Desktop (please complete the following information):

• OS: Android
• Version 1.0.7

Smartphone (please complete the following information):

• Device: Emulator
• OS: android 9

GF Carousel without pageController

why pageController on GF Carousel is deleted?
on docs still available, is hard to detect if Carousel scroll is in end position, i need that Listener.

thanks

Hot reaload issue

Describe the bug

when i use following code ,hot reload not work, button text not change when model.reading has been changed

GFButton(
                    child: model.reading ? Text('Stop') : Text('Continuous'),
                    onPressed: () async {
                      if (!model.reading) {
                        await model.startInventory();
                      } else {
                        await model.stopInventory();
                      }
                    },
                  ),

i must set a key for that to work

GFButton(
                    key: ValueKey(model.reading),
                    //text: model.reading ? 'Stop' : 'Continuous',
                    child: model.reading ? Text('Stop') : Text('Continuous'),
                    onPressed: () async {
                      if (!model.reading) {
                        await model.startInventory();
                      } else {
                        await model.stopInventory();
                      }
                    },
                  ),

is that expected?

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Widget theme from global app theme

Even though to define ButtonThemeData on App, it is not applied to GFButton
Would you please consider

• global theming of all GF~ widgets?
• apply global them for GF~ Widgets?
  Thank you.

GFListTIle does not use properly padding, it is hardcoded.

https://github.com/ionicfirebaseapp/getflutter/blob/75ca1fbe26169362d5c5ee207a9e503b208b02d3/lib/components/list_tile/gf_list_tile.dart#L49

GFCarousel active page indicator is not being updated without "onPageChanged"

I noticed that the active page indicator is not being updated without explicitly call setState on onPageChanged callback.

Currently, if I need to update the active page indicator, I have to use GFCarousel inside a stateful widget and set onPageChanged,

onPageChanged: (index){
        setState(() {});
},

Screenshots and sample code are not same.

https://docs.getwidget.dev/
For example, GFListTile

As you can see, no favorite icon on screenshot even there is in code.
Sample code clip and screenshot is mismatch.
Need to be matched exactly, just like vuetify.

Please add Treeview Component

[GFAppBar] clear button does not fire onChanged

Describe the bug
GFAppBar with searchBar: true, it will show x button when search bar expanded.
If taps this button, search bar input would be cleared with collapsed.
But, even though text changed, no onChanged callback fired.

To Reproduce

GFAppBar(
        title: Text('Search'),
        searchBar: true,
        onChanged: onQueryChanged,
        searchBarColorTheme: Colors.black,
        searchHintStyle: Get.textTheme.headline1.apply(
          color: Colors.black,
        ),
      )

1. tap search magnifying button to expand
2. input something with checking onChanged works
3. tap X right side, to collapse search bar.
4. no onChanged fired
5. repeat step1 again to see what current input is (it would be empty.)

Expected behavior
At step3, we need to get onChanged with empty string
And / Or searchbar event for expand / collapse

Back arrow or any button next to TabBar View

I want to display tabbar view and arrow back in the horizontal line without display appbar
like this example

or is there any way to add button next to tabbar when I click on this button I can navigat to other screen without display it on tabbarView,

[Question] Is there any callback that can be used to animate contained objects?

Hey there,
I was wondering if there was a callback function or some way so that when I click on a tab I can animate an icon widget that resides within the tab which animates when the icon itslf is pressed?

This is the Widget that is being created inside the tab:

  Widget _buildButton({Widget icon, String label, Interval interval, double size, onPressed}) {
    return RoundButton(
      icon: icon,
      label: label,
      loadingController: _loadingController,
      interval: Interval(
        interval.begin,
        interval.end,
        curve: ElasticOutCurve(0.42),
      ),
      onPressed: onPressed,
      size: size,
    );
  }

Then the RoundedButton contains:

	onPressed: () {
		_pressController.forward().then((_) {
		_pressController.reverse();
		});
		widget.onPressed();
	},

Thanks,
-MH

GFCarousel ERROR

Describe the bug

Error: Unexpected null value.
at Object.throw_ [as throw] (http://localhost:51605/dart_sdk.js:4332:11)
at Object.nullCheck (http://localhost:51605/dart_sdk.js:4662:30)
at page_view.PageController.new.nextPage (http://localhost:51605/packages/flutter/src/widgets/page_view.dart.lib.js:366:38)
at http://localhost:51605/packages/getwidget/components/carousel/gf_carousel.dart.lib.js:1031:38
at http://localhost:51605/dart_sdk.js:23808:9

More social buttons

Would it be possible to add some more social media buttons? Targeting Asian platforms, such as Line and WeChat?

Override application color gf_color.dart

Hi team,

How can I override color in gf_color.dart file?

Thank you

Question: GFTab on bottom of screen instead of top for Android

Documentation doesnt seem to provide any functionality to make GFTab appear at bottom of the screen? Am I missing something or this is not supported?

Can we support loading button?

Hi team,

Can we support loading button widget like that?

https://github.com/leandroBorgesFerreira/LoadingButtonAndroid

Thank you very much.
Yen Dang

gf_Carousel Cannot read property 'Symbol(dartx.round)' of null

Describe the bug
Cannot read property 'Symbol(dartx.round)' of null
at page_view.PageController.new.nextPage (http://localhost:60166/packages/flutter/src/widgets/page_view.dart.lib.js:330:42)
at http://localhost:60166/packages/getwidget/components/carousel/gf_carousel.dart.lib.js:1031:38

Wrap Icon and Text with Flexible/Expanded on GFButton

Is your feature request related to a problem? Please describe.
When I use a list of buttons, it is strange to see text and buttons not aligned

Describe the solution you'd like
using flex, they will align

GFCarousel active page indicator not updated if autoplay false

If the carousel is not in autoplay and the pages are scrolled with user input, the active page indicator has to be updated accordingly too. Currently nothing happens.

Avatar with Badge

The code does not match the displayed images. In GFAvatar there is not an option for badges.

GFAccordion the title should be a widget

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

When I want to add an icon or an image to the beginning of the title, I can't

Describe the solution you'd like
A clear and concise description of what you want to happen.
Instead of the title property being string, it is of type Widget

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
the title should be a widget

Additional context
Add any other context or screenshots about the feature request here.

GFListTile has hardcoded container constraints

The constraints for height in GFListTile are hardcoded to 50, which prevents users from having smaller tiles.

  Widget build(BuildContext context) => Container(
        constraints: const BoxConstraints(minHeight: 50),

Move it to constructor with a default value.

GFItemsCarousel height of tiles is wrong

The way the height of a items container of GFItemsCarousel is calculated does not make sense at all and prevents users from creating thin carousels. In the code the height is set to size but this is related to the width of the item container. Do I miss something?

Here size is set to account for the width of the items container.

https://github.com/ionicfirebaseapp/getflutter/blob/75ca1fbe26169362d5c5ee207a9e503b208b02d3/lib/components/carousel/gf_items_carousel.dart#L88

  @override
  void initState() {
    offset = 0;
    animationController = AnimationController(
      duration: const Duration(milliseconds: dragAnimationDuration),
      vsync: this,
    );
    Future.delayed(Duration.zero, () {
      setState(() {
        final double localWidth = MediaQuery.of(context).size.width;
        width = localWidth;
        size = width / widget.rowCount;
      });
    });
    super.initState();
  }

But then in the build function:

https://github.com/ionicfirebaseapp/getflutter/blob/75ca1fbe26169362d5c5ee207a9e503b208b02d3/lib/components/carousel/gf_items_carousel.dart#L183

  Widget build(BuildContext context) => GestureDetector(
        onHorizontalDragStart: onSlideStart,
        onHorizontalDragUpdate: onSlide,
        onHorizontalDragEnd: onSlideEnd,
        child: Container(
          width: double.infinity,
          height: size,
          child: Stack(
            children: [
              Positioned(
                left: offset,
                child: Row(
                  children: widget.children
                      .map((child) => Container(
                            width: size,
                            height: size,
                            child: child,
                          ))
                      .toList(),
                ),
              ),
            ],
          ),
        ),
      );

[GFIconButton] Wrong touch area

Describe the bug
GFIconButton does not detect tap event properly.

To Reproduce
Too long story and please check below screen record.
https://www.dropbox.com/s/my4gbswuwy1sfv7/Screen%20Recording%202020-10-08%20at%2013.54.29.mov?dl=0

Expected behavior
GFIconButton should be clickable for all splash area.

Smartphone (please complete the following information):

• Simulator : Pixel-XL(android 31), iPhone X (iOS 14)
• Real device : Samsung Galaxy, iPhone X.

why gfcard is'nt function

I use class gfcard when it's get a error for gfcard is'nt function

Docs say about isScrollable which is not supported

Describe the bug
Not sure this should be a feature request.. The regular TabBar supports isScrollable property to make the tabs scroll. The GFTabBar source code has few lines about this property but it's support is not present.

Expected behavior
isScrollable boolean property should be present.

Smartphone :

• Device: Redmi Note 7 Pro
• OS: Android 9

[GFCheckbox] Checkbox isn't being disable when passed NULL to onChanged

When I pass NULL to onChanged, to disable checkbox, it isn't being disable. By default, in the widget Checkbox (native of the flutter), when you pass NULL to "onChanged" it maintain the checkbox disabled with the defined value.

I think that is important disable the widget when is passed NULL to onChanged.

GFSearchBar is not working on web

onItemSelected is not called

attached the example to see it without debugging

searchbar.dart.txt

Can use it but has import bugs

I can use this but it has some bugs when import package in dart file

Steps the installation are:

1. Import 'getflutter: ^1.0.0' in pubspec.yaml
2. Run 'flutter pub get' in terminal
3. Import 'package:getflutter/getflutter.dart' in dart file
4. I got this bugs but I can use gf_avater

Screenshots

GFCarousel initialPage Not Honored if Page Indicators Enabled.

Describe the bug

When we set an initialPage, it is not honored in the indicators. The indicator always starts at 0. It should not be the case.

To Reproduce
Steps to reproduce the behavior:

1. Create a GFCarousel
2. Set the initial page index to anything but 0.
3. Have active indicators to be true. Notice that the indicator's initial page index is not honored.

Expected behavior
The indicators should start in the right position with the initial page index honored.

Additional context
From the description on: #139.

Documentation site is down

It's down since yesterday. Is there other way we can view the documentation or perhaps include the source code in the app itself and not just the link of the docs site.

GFImageOverlay BoxFit

GFImageOverlay does not properly use BoxFit. It is hardcoded to BoxFit.fit.

  Widget build(BuildContext context) => Container(
        alignment: alignment,
        height: height,
        width: width ?? MediaQuery.of(context).size.width,
        margin: margin,
        padding: padding,
        child: child,
        decoration: BoxDecoration(
          shape: shape,
          borderRadius: borderRadius,
          border: border,
          color: color,
          image: DecorationImage(
            fit: BoxFit.fill,
            colorFilter: child != null ? colorFilter : null,
            image: image,
          ),
        ),
      );

Flutter web support?

Is this going to be 100% compatible with flutter web?