Animated moveable list in flutter?

Question

any tips or help how can I make this on tap moveable list in flutter?

https://files.fm/f/txdn29dg3

Answer 1

The provided component is exactly what CupertinoPicker could offer you.

Also, as suggested in the documentation, you should combine the CupertinoPicker with showCupertinoModalPopup to display the picker modally at the bottom of the screen.

This is how the code could look like:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: PickerPage(),
        ),
      ),
    );
  }
}

class PickerPage extends StatefulWidget {
  const PickerPage();

  @override
  _PickerPageState createState() => _PickerPageState();
}

class _PickerPageState extends State<PickerPage> {
  final _items = [
    'Flat Rate',
    'Hourly',
    'Request for Price',
  ];
  int _selectedItem = 0;

  void _onSelectedItemChanged(int value) => setState(
        () => _selectedItem = value,
      );

  void _showPicker() {
    showCupertinoModalPopup(
      context: context,
      builder: (_) => PickerExample(
        items: _items,
        selectedItem: _selectedItem,
        onSelectedItemChanged: _onSelectedItemChanged,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(_items[_selectedItem]),
        const SizedBox(height: 10.0),
        ElevatedButton(
          child: const Text('Show picker'),
          onPressed: _showPicker,
        ),
      ],
    );
  }
}

class PickerExample extends StatefulWidget {
  final List<String> items;
  final int selectedItem;
  final ValueSetter<int> onSelectedItemChanged;

  const PickerExample({
    required this.items,
    required this.selectedItem,
    required this.onSelectedItemChanged,
  });

  @override
  _PickerExampleState createState() => _PickerExampleState();
}

class _PickerExampleState extends State<PickerExample> {
  late final FixedExtentScrollController _controller;

  @override
  void initState() {
    super.initState();

    _controller = FixedExtentScrollController(initialItem: widget.selectedItem);
  }

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      child: CupertinoPicker(
        scrollController: _controller,
        backgroundColor: Colors.white,
        itemExtent: 30.0,
        children: [
          for (final item in widget.items) Center(child: Text(item)),
        ],
        onSelectedItemChanged: widget.onSelectedItemChanged,
      ),
    );
  }
}

You could also find an interactive example in this DartPad .