Flutter：Cupertino ListTile？ （或如何创建类似 iOS 的设置菜单）

Question

Do we have an easy way of doing that kind of menu below using CupertinoApp only?

Answer 1

Ok, so we can use a Scaffold inside a CupertinoPageScaffold like that and still use the material ListTile which look the same as Cupertino ones.

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('My List'),
      ),
      child: SafeArea(
        child: Scaffold(
          body: _listView(context),
        ),
      ),
    );
  }

Answer 2

You can try this at pub.dev:

cupertino_list_tile: ^0.2.0

https://pub.dev/packages/cupertino_list_tile

Answer 3

I was able to achieve results very close to the iOS list by using CupertinoButton instead of ListTile, it's a really flexible component. It also apparently has no ripple effect.

Result

The only drawback to this approach is that the button uses pressedOpacity, but reducing the default value from 0.4 to 0.65 or something like that will work just fine.

CupertinoButton(
  pressedOpacity: 0.65,
  color: Colors.white,
  borderRadius: const BorderRadius.all(
    Radius.circular(0),
  ),
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
  alignment: Alignment.centerLeft,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          const Padding(
            padding: EdgeInsets.only(right: 12),
            child: SizedBox(
              height: 28,
              width: 28,
              child: DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.teal,
                  borderRadius: BorderRadius.all(
                    Radius.circular(4),
                  ),
                ),
                child: Icon(
                  Icons.ac_unit_sharp,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          Text(
            'Snowflake item',
            style: TextStyle(color: Colors.black),
          ),
        ],
      ),
      const Icon(
        Icons.chevron_right,
        color: Colors.grey,
      ),
    ],
  ),
  onPressed: () {},
)

Answer 4

Flutter 3.7 added two new widgets: CupertinoListSection and CupertinoListTile for showing a scrollable list of widgets in the iOS style.

PR: https://github.com/flutter/flutter/pull/78732