Carousel is Multiple set of items that slide on a particular time spam. It may be a collection of images, texts or other elements inside an item that generally slides towards left automatically. It is used to show a bundle of elements to user without doing any action in the form of auto slide. The best example we can see as testimonials, in which the client’s message comes on the screen for a short interval of time & slides to other client’s message. The auto slide continues until the user stays at the component. Carousel is also referred as slider.

In today’s real time world of application Carousel plays a very important role either for web apps or mobile apps. Applications like e-commerce, news, food delivery etc uses the sliding carousels to show the offers, upcoming products, variants & more.

GF Carousel is a GetWidget UI widget for Flutter Carousel that allows you to build a beautiful & easy to customized carousel for your Flutter application. GF carousel has different types of carousel that can be used according to the flutter developers' requirements. Flutter Carousel Widget is a multi-section container & each section can be swiped or dragged between for a particular time spam. It contains n numbers of slide components. It can be used with background images, blocks & gradient colors as well.

Full width Carousel: It can be used as Gradient background & Background Images as background with full width of the screen that consists of some title & short descriptions as it's child element.

Full width Carousel

Multiple items Carousel : It can be used as Gradient background & Background Images as background in small pieces by which we can show multiple items in a row having child elements for each within the item.

Multiple item Carousel

Full Size Slider Flutter Carousel: The full size flutter carousel slider is quite similar to Full width Carousel having full width screen size with additional slider dots carousel within the item. It generally use to show case your major categories on your application. The best daily life example is an eCommerce application, where we can at the top of home screen there are some slider with their current running offers and major categories that they want to feature to the users. So if your app does have requirements or you would like to showcase your specific products/services pages to your users then you should try full screen flutter carousel slider with dots. So user can pause and read your information and go to that pages.

Full size Carousel

How to Start:

If you are new with GetWidget then you should go ahead with Getting started will guide you how to start building a beautiful flutter application with GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^1.0.7

Keep playing with the pre-built UI components.

Example to add a default GF Carousel in your Flutter App:

```import 'package:getwidget/getwidget.dart';

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"
];
 
 GFCarousel(
    items: imageList.map(
     (url) {
     return Container(
       margin: EdgeInsets.all(8.0),
       child: ClipRRect(
         borderRadius: BorderRadius.all(Radius.circular(5.0)),
          child: Image.network(
             url,
             fit: BoxFit.cover,
              width: 1000.0
           ),
        ),
      );
      },
     ).toList(),
    onPageChanged: (index) {
      setState(() {
        index;
      });
    },
 ),

The default GF Carousel - A Flutter Widget will be shown like below image.

GF Carousel default

About Our team:

We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundred and hundreds of hour to experiment and implementation of Flutter. As well as after successful delivery of enterprise and SAAS applications that been using by more than 500+ business around the 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we are trying to give a small contribution to the Flutter Dev Community.

We are heartily thankful to 5000+ user who have started using our library and shown the trust just within 4 weeks of launch. We are getting feedback from them & implementing wherever needed & of course it is our pleasure to get the valuable feedback from your side and work on that. The developer's feedback & suggestions are very important, we are keeping this at high priority.

GF Carousel - A Flutter carousel widget

We have a separate team who are working on your feedback. There are many ways through which we are interacting with users, developers & take their suggestions as it is very important to walk along with developers because they are the one who uses GetWidget library & our perspective is to make the development process easiest & simplest for them. We have been trying to provide the best UI Library Flutter Dev Community that helps them to built an awesome app and save their development time.

So let's connect together and build your idea into a real time app with GetWidget UI Library. Now you could start with our documentation from how to getting start and go with each component.

FAQs

Q. Why use GF Carousel?

Ans. You will get pre-designed Carousel of different types that can be used in your app according to need. It is very easy to customize & will save your time of development.

Q. What is the difference between Full width & Full size GF Carousel?

Ans. Both the GF Carousels  will behave quite similarly with full width screen size but the major difference is that in Full width Carousel the height of the carousel item depends on the child elements inside with full screen width & in Full Size Carousel the height of the item will also include the slider dots inside the component with full width of screen.

Q. Where to use GF Carousel?

Ans. It can be used in testimonials, News flash, upcoming products, e-commerce apps, screenshots slide, or many places where we need items to slide.

Q. How GF Carousel works?

Ans. GF Carousel is a GetWidget widget that has a container & multiple items are kept in it that consists of titles, sub-titles above background image or background gradient. The sliding property is applied on each item. Once the page loads, the item along with it's child element keeps moving after a short interval of time that we can customize in our code. And hence it gives a smooth & beautiful sliding effect with animations to the Carousel.

Resources:

Docs: https://docs.getwidget.dev/gf-carousel

Forum : https://forum.getwidget.dev

GitHub Repository: https://github.com/ionicfirebaseapp/getwidget