Skip to content
Snippets Groups Projects
Unverified Commit 5bd0fb73 authored by Victor Sanni's avatar Victor Sanni Committed by GitHub
Browse files

Implement CupertinoCollapsible/CupertinoExpansionTile (#165606)

### Flutter fade



https://github.com/user-attachments/assets/0cfd3759-3e8d-4e5e-af55-20dfa1494bb5

### Native iOS fade


https://github.com/user-attachments/assets/ce8799d8-78bd-49e7-9d64-bb818fc6667e


### Flutter scroll


https://github.com/user-attachments/assets/04291449-147c-4b8c-900e-c6e3989ef0e8


### Native iOS scroll



https://github.com/user-attachments/assets/a5917e64-6e67-45f0-a580-2fda80d16c32



<details>
<summary>Sample code</summary>

```dart
import 'package:flutter/cupertino.dart';

void main() => runApp(const CollapsibleApp());

class CollapsibleApp extends StatelessWidget {
  const CollapsibleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        backgroundColor: CupertinoColors.systemGroupedBackground,
        child: CustomScrollView(
          slivers: [
            CupertinoSliverNavigationBar(
              stretch: true,
              largeTitle: Text('Lists'),
              leading: CupertinoButton(
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.zero,
                child: const Text('Edit'),
                onPressed: () {},
              ),
              trailing: CupertinoButton(
                alignment: Alignment.centerRight,
                padding: EdgeInsets.zero,
                child: const Text('Add List'),
                onPressed: () {},
              ),
            ),
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: const CollapsibleExample(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<CollapsibleExample> createState() => _CollapsibleExampleState();
}

class _CollapsibleExampleState extends State<CollapsibleExample> {
  @override
  Widget build(BuildContext context) {
    return CupertinoCollapsible(
      title: Text(
        ' iPhone',
        style: CupertinoTheme.of(context)
            .textTheme
            .navLargeTitleTextStyle
            .copyWith(fontSize: 21, fontWeight: FontWeight.w600),
      ),
      child: CupertinoListSection.insetGrouped(
        margin: EdgeInsets.symmetric(horizontal: 0.0),
        children: <CupertinoListTile>[
          CupertinoListTile(
              title: const Text('All iPhone'),
              leading: Icon(
                CupertinoIcons.person_3,
                size: 30.0,
              ),
              trailing: const CupertinoListTileChevron(),
              additionalInfo: const Text('6'),
              onTap: () {}),
          CupertinoListTile(
              title: const Text('Friends'),
              leading: Icon(CupertinoIcons.person_2),
              trailing: const CupertinoListTileChevron(),
              additionalInfo: const Text('1'),
              onTap: () {}),
          CupertinoListTile(
              title: const Text('Work'),
              leading: Icon(CupertinoIcons.person_2),
              trailing: const CupertinoListTileChevron(),
              additionalInfo: const Text('0'),
              onTap: () {}),
        ],
      ),
    );
  }
}
```

</details>

Fixes https://github.com/flutter/flutter/issues/153937
parent 6dc16e8d
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment