Flutter: Cupertino ListTile ? (or How To Create iOS-Like-Settings Menu)

Question

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

score 8 · Accepted Answer · answered Jul 22 '19 at 14:59

8

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),
        ),
      ),
    );
  }

answered Jul 22 '19 at 14:59

Allan Stepps

1,047
1
10
23

9

Actually, you don't need the entire `Scaffold`, you can just wrap it in Material – ThinkDigital Feb 26 '20 at 07:24
1

@ThinkDigital good point, `Material` is indeed enough for that purpose. In my case, I am using `ExpansionTile`, but if you want to make an iOS app that really look any native counterparts, the ripple is a dead giveaway that's for sure. The tap feedback ought to be different. How would you suggest to go about it ? Thanks ! – Mackovich Mar 16 '20 at 15:12
@mackovich You can change the ripple color to transparent so you don't see it. – ThinkDigital Mar 16 '20 at 15:53
3

My opinion is that Material ListTile breaks Apple's touch effects with ripple. It is not same effect like iOS users like to see. That is reason why I dont like to use ListTile for cupertino widgets. Other problem is problem with theme, light/dark. – Nikola Jovic Aug 21 '20 at 07:35
@NikolaJovic I agree. So what tactic did you use to solve for the best iOS experience using Flutter? – Sebastian Dwornik Feb 16 '22 at 20:40

score 4 · Answer 2 · answered Jan 25 '23 at 08:18

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

answered Jan 25 '23 at 08:18

David Miguel

12,154
3
66
68

score 2 · Answer 3 · edited Aug 07 '22 at 12:44

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:

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: () {},
)

score 1 · Answer 4 · answered Oct 02 '21 at 14:13

1

You can try this at pub.dev:

cupertino_list_tile: ^0.2.0

https://pub.dev/packages/cupertino_list_tile

answered Oct 02 '21 at 14:13

M E S A B O

783
1
11
15

Flutter: Cupertino ListTile ? (or How To Create iOS-Like-Settings Menu)

4 Answers4