0

The list one gets in iPhone's Reminders app is precisely what I want, implemented in Flutter using cupertino.

The desired functionality is basically what material's ReorderableListView provides, except the styling. (Or is there any way to put a cupertino widget inside a material parent, namely a CupertinoListTile inside ReorderableListView?)

The farthest I've gone is the following:

import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final List<String> _items = [for (var i = 1; i < 100; i++) 'Item $i'];

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CustomScrollView(
        semanticChildCount: _items.length,
        slivers: <Widget>[
          SliverSafeArea(
            top: false,
            minimum: const EdgeInsets.only(top: 0),
            sliver: SliverReorderableList(
              itemBuilder: (context, index) => ReorderableDragStartListener(
                key: Key('$index'),
                index: index,
                child: CupertinoListTile(
                  title: Text(_items[index]),
                  onTap: () {
                    setState(() {
                      _items.remove(_items[index]);
                    });
                  },
                ),
              ),
              itemCount: _items.length,
              onReorder: (int oldIndex, int newIndex) {
                setState(() {
                  if (oldIndex < newIndex) {
                    newIndex -= 1;
                  }
                  final String item = _items.removeAt(oldIndex);
                  _items.insert(newIndex, item);
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

This will take care of reordering the list but I will lose scrolling.

bagratte
  • 157
  • 2
  • 5

0 Answers0