animated_item_picker 2.0.0

Generic item picker that encapsulates single or multiple item selection logic.

example/lib/main.dart

import 'dart:math';

import 'package:animated_item_picker/animated_item_picker.dart';
import 'package:example/model/day_of_week.dart';
import 'package:example/model/level.dart';
import 'package:example/ui/helper.dart';
import 'package:example/ui/item_widgets.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Material(child: HomePage(), color: Colors.black));
  }
}

class HomePage extends StatefulWidget {
  static ColorTween _firstPickerColorTween1 =
      ColorTween(begin: Colors.white, end: Colors.redAccent);
  static ColorTween _firstPickerColorTween2 =
      ColorTween(begin: Colors.black, end: Colors.redAccent);

  static ColorTween _secondPickerColorTween1 =
      ColorTween(begin: Colors.black, end: Colors.yellow);
  static ColorTween _secondPickerColorTween2 =
      ColorTween(begin: Colors.white, end: Colors.yellow);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Random _random = Random();
  int selectionIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          decorateFirstItemPicker(
            AnimatedItemPicker(
                axis: Axis.horizontal,
                multipleSelection: false,
                itemCount: Level.LIST.length,
                pressedOpacity: 0.85,
                programmaticSelection: {Level.LIST.indexOf(Level.BEGINNER)},
                expandedItems: true,
                onItemPicked: (index, selected) {
                  print("Gender: ${Level.LIST[index]}, selected: $selected");
                },
                itemBuilder: (index, animValue) => GenderItemWidget(
                      name: Level.LIST[index].toString(),
                      borderColor: HomePage._firstPickerColorTween2
                          .transform(animValue)!,
                      textColor: HomePage._firstPickerColorTween1
                          .transform(animValue)!,
                    )),
          ),
          decorateSecondItemPicker(
            AnimatedItemPicker(
              axis: Axis.vertical,
              multipleSelection: true,
              itemCount: DayOfWeek.LIST.length,
              maxItemSelectionCount: 6,
              expandedItems: true,
              programmaticSelection:
                  Set.of(DayOfWeek.FOR_RANDOM[selectionIndex]),
              onItemPicked: (index, selected) {
                print("Day: ${DayOfWeek.LIST[index]}, selected: $selected");
              },
              itemBuilder: (index, animValue) => DayItemWidget(
                name: DayOfWeek.LIST[index],
                textColor:
                    HomePage._secondPickerColorTween2.transform(animValue)!,
                backgroundColor:
                    HomePage._secondPickerColorTween1.transform(animValue)!,
              ),
            ),
          ),
          CupertinoButton(
              child: Text('SWITCH DAYS PROGRAMMATICALLY'),
              onPressed: () {
                setState(() {
                  selectionIndex = _random.nextInt(4);
                });
              })
        ]);
  }
}