carousel_select_widget 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 81

Carousel Select Widget #

An iOS style alternative to dropdown value picker with horizontal and vertical scroll mode.

Getting Started #

To use this package, add carousel_select_widget as a dependency in your pubspec.yaml file

Example #

Import the library.

import 'package:carousel_select_widget/carousel_select_widget.dart';

Then invoke the CarouselSelect constructor with appropriate properties to display the widget.

Sample Code #

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

void main() => runApp(CarouselSelectWidgetSample());

const List<String> kCurrenciesList = ['AUD', 'BRL', 'CAD', 'CNY', 'EUR', 'GBP', 'HKD', 'IDR', 'ILS', 'INR'];
const int kInitialPositionIndex = 0;
const Color kDarkBackgroundColor = Color(0xFF111428);
const Color kTurquoiseColor = Color(0xFF1abc9c);
const Color kMidnightBlue = Color(0xFF2c3e50);
const Color kActiveItemTextColor = Color(0xFF9b59b6);
const double kActiveItemFontSize = 20;
const double kPassiveItemFontSize = 20;
const double kHorizontalWidgetSize = 100.0;
const double kVerticalWidgetSize = 200.0;

class CarouselSelectWidgetSample extends StatefulWidget {
  @override
  _CarouselSelectWidgetSampleState createState() => _CarouselSelectWidgetSampleState();
}

class _CarouselSelectWidgetSampleState extends State<CarouselSelectWidgetSample> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: kDarkBackgroundColor,
        appBar: AppBar(
          title: Center(
            child: Text('Carousel Select Widget Example',)
            ),
          backgroundColor: kDarkBackgroundColor,
          elevation: 0,
        ),
        body: Center(
          child: Container(
            child: CarouselSelect(
              onChanged: (selectedValue) {print(selectedValue);},
              valueList: kCurrenciesList,
              backgroundColor: kDarkBackgroundColor,
              activeItemTextColor: kActiveItemTextColor,
              passiveItemsTextColor: kActiveItemTextColor.withOpacity(0.3),
              initialPosition: kInitialPositionIndex,
              scrollDirection: ScrollDirection.horizontal,
              activeItemFontSize: kActiveItemFontSize,
              passiveItemFontSize: kPassiveItemFontSize,
              height: kHorizontalWidgetSize,
              ),
            ),
          ),
        ),
      );
    }
}

Sample App #

Refer to example folder.

Known Issue #

  • Using both horizontal and vertical scroll direction on the same page causes glitch in horizontal widget.

Credits #

This minimal version of widget is inspired from beautifully designed 'horizontal_picker' widget by kaiserleka

[0.0.1] - 08 January 2020 #

  • Inital release

[0.1.0] - 09 January 2020 #

  • Formatted the widget code to improve health
  • Added permanent link for demo gif
  • Stable code

example/lib/main.dart

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

const List<String> kCurrenciesList = [
  'AUD',
  'BRL',
  'CAD',
  'CNY',
  'EUR',
  'GBP',
  'HKD',
  'IDR',
  'ILS',
  'INR',
  'JPY',
  'MXN',
  'NOK',
  'NZD',
  'PLN',
  'RON',
  'RUB',
  'SEK',
  'SGD',
  'USD',
  'ZAR'
];

const List<String> kCryptoList = [
  'BTC',
  'ETH',
  'LTC',
];

const int kInitialPositionIndex = 0;
const Color kDarkBackgroundColor = Color(0xFF111428);
const Color kTurquoiseColor = Color(0xFF1abc9c);
const Color kMidnightBlue = Color(0xFF2c3e50);
const Color kActiveItemTextColor = Color(0xFF9b59b6);
const double kActiveItemFontSize = 20;
const double kPassiveItemFontSize = 20;
const double kHorizontalWidgetSize = 100.0;
const double kVerticalWidgetSize = 200.0;
const String kFontFamily = 'Montserrat';

void main() => runApp(CarouselSelectWidgetExample());

class CarouselSelectWidgetExample extends StatefulWidget {
  @override
  _CarouselSelectWidgetExampleState createState() =>
      _CarouselSelectWidgetExampleState();
}

class _CarouselSelectWidgetExampleState
    extends State<CarouselSelectWidgetExample> {
  
  String _hselectedCurrency = kCurrenciesList[kInitialPositionIndex];
  String _vselectedCurrency = kCryptoList[kInitialPositionIndex];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(brightness: Brightness.dark, fontFamily: kFontFamily),
      home: Scaffold(
        backgroundColor: kDarkBackgroundColor,
        appBar: AppBar(
          title: Center(child: Text('Carousel Select Widget Example',)),
          backgroundColor: kDarkBackgroundColor,
          elevation: 0,
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Text(_hselectedCurrency, style: TextStyle(fontSize: 50, color: kTurquoiseColor),),
                Text(_vselectedCurrency, style: TextStyle(fontSize: 50, color: kTurquoiseColor),),
              ],
            ),
            Divider(indent: 50.0, endIndent: 50.0, color: kMidnightBlue,),
            Text('HORIZONTAL CAROUSEL SELECT'),
            CarouselSelect(
              onChanged: (value) {
                setState(() {
                  _hselectedCurrency = value;
                });
              },
              valueList: kCurrenciesList,
              backgroundColor: kDarkBackgroundColor,
              activeItemTextColor: kActiveItemTextColor,
              passiveItemsTextColor: kActiveItemTextColor.withOpacity(0.3),
              initialPosition: kInitialPositionIndex,
              scrollDirection: ScrollDirection.horizontal,
              activeItemFontSize: kActiveItemFontSize,
              passiveItemFontSize: kPassiveItemFontSize,
              height: kHorizontalWidgetSize,
            ),
            Divider(indent: 50.0, endIndent: 50.0, color: kMidnightBlue,),
            Text('VERTICAL CAROUSEL SELECT'),
            CarouselSelect(
              onChanged: (value) {
                setState(() {
                  _vselectedCurrency = value;
                });
              },
              valueList: kCryptoList,
              backgroundColor: kDarkBackgroundColor,
              activeItemTextColor: kActiveItemTextColor,
              passiveItemsTextColor: kActiveItemTextColor.withOpacity(0.3),
              initialPosition: kInitialPositionIndex,
              scrollDirection: ScrollDirection.vertical,
              activeItemFontSize: kActiveItemFontSize,
              passiveItemFontSize: kPassiveItemFontSize,
              height: kVerticalWidgetSize,
            ),
            Text('CRAFTED WITH ❤️ IN FLUTTER', style: TextStyle(fontSize: 10.0), )            
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  carousel_select_widget: ^0.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:carousel_select_widget/carousel_select_widget.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
62
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
81
Learn more about scoring.

We analyzed this package on Mar 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test