如何实现单轮滚动列表小部件

Question

Flutter has ListWheelScrollView widget but I want cycle wheel scroll widget. Any ideas how to implement such widget.

How it should work:

For example, I have a list with 10 items and a selected item is 1 The selected element is positioned by center above this element, you see the last element in the list below the second element

   [10]
-> [1] <-
   [2]

scroll down

   [9]
-> [10] <-
   [1]

etc.

Thanks!

Answer 1

You are right considering ListWheelScrollView.

The exact solution is to use ListWheelScrollView.useDelegate with ListWheelChildLoopingListDelegate .

Example:

import 'package:flutter/material.dart';

const String kTitle = 'Loop Wheel Demo';

void main() => runApp(new LoopWheelDemo());

class LoopWheelDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: kTitle,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  HomePage({Key key,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _style = Theme.of(context).textTheme.display2;
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(kTitle),
      ),
      body: new Center(
        child: new ConstrainedBox(
          constraints: BoxConstraints(
            // Set height to one line, otherwise the whole vertical space is occupied.
            maxHeight: _style.fontSize,
          ),
          child: new ListWheelScrollView.useDelegate(
            itemExtent: _style.fontSize,
            childDelegate: ListWheelChildLoopingListDelegate(
              children: List<Widget>.generate(
                10, (index) => Text('${index + 1}', style: _style),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

I've been trying to figure it out how to do that. I've tried lots of options, but the one that made me achieve what I wanted and what you are asking for was using the plugin:

Flutter Swiper ( https://pub.dartlang.org/packages/flutter_swiper ).

It's pretty customizable e flexible.

Here is the screenshot: https://imgur.com/a/ktxU6Hx

This is how I implemented it:

 import 'package:flutter/material.dart';

 import 'package:flutter_swiper/flutter_swiper.dart';

class Looping extends StatefulWidget {
  @override
  LoopingState createState() {
    return new LoopingState();
  }
}

class LoopingState extends State<Looping> {

  List<int> numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  List<String> options = ['A', 'B', 'C', 'D'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Infinity Loop Items'),),
      body: Center(
        child: Container(
          height: 100.0,
          child: Row(
            children: <Widget>[
              mySwiper(numbers),
              mySwiper(options),
            ],
          ),
        ),
      ),
    );
  }

  Widget mySwiper(List list) {
    return Expanded(
          child: Swiper(
          itemCount: list.length,
          scrollDirection: Axis.vertical,         
          control: SwiperControl(),
          itemBuilder: (BuildContext context, int index) {
            return  Center(
                child: Text(
                  list[index].toString(),
                  style: TextStyle(fontSize: 20.0),                
                ),             
            );
          }),
    );
  }
}