Flutter package that provide selectable items in list like Column

vertical_picker

Flutter package that provide selectable items in list like Column

vertical_picker is flutter package that you can use it as item selector. users with this package be able to select item that is in vertical list like as column with scroll.

Getting started

First of all you need to import it like this:

import 'package:vertical_picker/vertical_picker.dart';

Usage

You can use VerticalPicker as widget like as other widget. for example you can this widget as child as SizedBox or other widget. (I suggest use this as child of widget like SizedBox, Container,…)

SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: VerticalPicker(
          // give height for eacch item
          itemHeight: MediaQuery.of(context).size.height / 15,

          // create list of text for items
          items: List.generate(
              10,
              (index) => Center(
                    child: Text(index.toString()),
                  )),

          // empty void for item selected
          onSelectedChanged: (indexSelected) {},
        ),
      ),

Optional Parameters

If you use VerticalPicker with default optional parameter you may have widget like this:

Flutter package that provide selectable items in list like Column

leftMargin and rightMargin

you can use this two parameter to controll sized of border

// margin for border
leftMargin: 150,
rightMargin: 150,

this gives you vertical picker like this(color of border changed):

Flutter package that provide selectable items in list like Column

BorderColor

You can specific border color:

// give color to border
borderColor: Colors.red,

this gives you vertical picker like this:

Flutter package that provide selectable items in list like Column

loop

You can loop the vertical picker by set loop to true:

loop = true;

If you set loop to true you see vertical picker like this:

Flutter package that provide selectable items in list like Column

Use other widget for items of vertical picker

There isn’t limitation for use widget as items. you can use Text, Icon, Image and …

// create list of text for items
items: List.generate( 10,(index) => Icon(Icons.flutter_dash)),

Flutter package that provide selectable items in list like Column

Some important tips

🔴 You must set itemHeight parameter a little longer that your items to items be in the best alignment

🔴 If you use Text as item, it’s better that use Text in child of Center to Text goes in center of selectable items in vertical picker

GitHub

View Github

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram

Why do People Say: "Developers are Lazy"?
The saying “work smart, not hard” is applicable for programmers.
.
https://hackernoon.com/why-do-people-say-developers-are-lazy

.
Author: Aga Wozniak
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

Mitigating the DDOS Threats Facing Banks and Fintechs
As much as digitization and cyber simplified banking, the Fintech sector has left digital payment activity exposed to malicious and suspicious activity.
.
https://hackernoon.com/mitigating-the-ddos-threats-facing-banks-and-fintechs

.
Author: Josh Horowitz
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

24 Best JavaScript Blogs and Websites
In this overview, we have compiled a list of popular sites, as well as JS blogs that are worth reading and keeping in your bookmarks.
.
https://hackernoon.com/24-best-javascript-blogs-and-websites

.
Author: natashatsybliyenko
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

The Projects Working to Lower Ethereum Gas Fees
As more investors try their hand at DeFi, gas fees are shooting over the roof, making engaging with decentralized apps uneconomical for most users.
.
https://hackernoon.com/ethereum-gas-fees-are-there-any-projects-working-to-optimize-eth-gas-fees

.
Author: CryptoVirally SLR
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

On the Edge of a New Year: IT Predictions for 2022
The single biggest cause of network errors are people.
.
https://hackernoon.com/an-interview-with-uplogix-ceo-lisa-frankovitch

.
Author: Mignonette Garnier
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

How to Modernize IBM i Applications
If you’re like most IBM i users, you know how much value your IBM i data and applications bring to your business. Your end-users, however, may not. In today’s world of rich user experience, fast-paced application development, and constantly evolving customer expectations, IBM i applications are unde…
.
https://hackernoon.com/how-to-modernize-ibm-i-applications

.
Author: Lansa
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...