这是indexloc提供的服务,不要输入任何密码
Skip to content

Conversation

@victorsanni
Copy link
Contributor

@victorsanni victorsanni commented Mar 20, 2025

Flutter fade

flutter.fade.take.3.mov

Native iOS fade

native.fade.mov

Flutter scroll

flutter.scroll.take.3.mov

Native iOS scroll

native.iOS.collapsible.mov
Sample code
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: () {}),
        ],
      ),
    );
  }
}

Fixes #153937

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: cupertino flutter/packages/flutter/cupertino repository labels Mar 20, 2025
@victorsanni victorsanni changed the title Implement CupertinoCollapsible Implement CupertinoCollapsible/CupertinoExpansionTile Mar 27, 2025
@github-actions github-actions bot added the f: material design flutter/packages/flutter/material repository. label Mar 27, 2025
@victorsanni victorsanni marked this pull request as ready for review March 31, 2025 17:34
@victorsanni victorsanni requested a review from chunhtai April 1, 2025 23:15
@flutter-dashboard
Copy link

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #165606 at sha 6cec18b

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 6, 2025
mboetger pushed a commit to mboetger/flutter that referenced this pull request May 6, 2025
### 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 flutter#153937
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

f: cupertino flutter/packages/flutter/cupertino repository f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. will affect goldens Changes to golden files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a CupertinoCollapsible widget

5 participants