flutter / flutter/flutter

Font discrepancy between CupertinoListSection and CupertinoFormSection

Open
#165,890 2 comments 1 reaction 0 assignees View on GitHub
a: fidelity p: cupertino_ui P2 team-design triaged-design
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

CupertinoListSection.inset uses a wrong font for the header and footer, but CupertinoFormSection uses the correct one but without the needed leading padding, CupertinoListSection.inset's header should use the same font as CupertinoFormSection.inset.

Not sure which is right, but definitely off. Code below.

![Image](https://github.com/user-attachments/assets/e2d6952f-8a04-43ad-8322-cf0521eaea29)

![Image](https://github.com/user-attachments/assets/2cf47b22-4445-46ee-8ce6-82d6023ba2df)

CupertinoListSection code

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

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

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

@override
Widget build(BuildContext context) {
return const CupertinoApp(
theme: CupertinoThemeData(brightness: Brightness.light),
home: ListSectionInsetExample());
}
}

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

@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: CupertinoListSection.insetGrouped(
header: const Text('Header'),
footer: const Text('footer'),
children: [
CupertinoListTile.notched(
title: const Text('CupertinoListSection.insetGrouped'),
leading: Container(
width: double.infinity,
height: double.infinity,
color: CupertinoColors.activeGreen,
),
trailing: const CupertinoListTileChevron(),
onTap: () {},
),
],
),
);
}
}

```

CupertinoFormSection code

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

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

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(colorSchemeSeed: Colors.blue),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
final String title;

const MyHomePage({super.key, required this.title});

@override
State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: CupertinoFormSection.insetGrouped(
header: const Text('Header'),
footer: const Text('footer'),
children: [
CupertinoListTile.notched(
title: const Text('CupertinoFormSection.insetGrouped'),
leading: Container(
width: double.infinity,
height: double.infinity,
color: CupertinoColors.activeGreen,
),
trailing: const CupertinoListTileChevron(),
onTap: () {},
),
],
),
);
}
}

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.