mirror of
https://github.com/flutter/samples.git
synced 2026-03-29 07:41:41 +00:00
c787dd01a7
This PR: - Updates the fidelity of the home screen and contact list screens to near full fidelity - Renames "Contact Lists" to "Contact Groups". We have multiple collections of contacts, so having lists of lists felt confusing - Adds more functionality to the data models Comparison of the two screens against native: | Native | Flutter | | --- | --- | | <img width="418" alt="Screenshot 2025-02-19 at 2 59 58 PM" src="https://github.com/user-attachments/assets/1cc53d19-6bb5-4782-82fa-1a62cd75fd51" /> | <img width="397" alt="Screenshot 2025-02-19 at 2 58 54 PM" src="https://github.com/user-attachments/assets/ddab75f2-4aec-4239-a736-690a3185c196" /> | | <img width="409" alt="Screenshot 2025-02-19 at 2 59 41 PM" src="https://github.com/user-attachments/assets/ee0d81ee-ae60-47ad-b071-266f39ce9b70" /> | <img width="402" alt="Screenshot 2025-02-19 at 2 58 45 PM" src="https://github.com/user-attachments/assets/88bf22f9-d8bd-40d7-a9ca-f2ded439de6c" /> | Notably the container widget on the first screen is a placeholder, until a Cupertino collapsable widget is made.
101 lines
3.3 KiB
Dart
101 lines
3.3 KiB
Dart
// Copyright 2018 The Flutter team. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import 'package:flutter/cupertino.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:rolodex/data/contact.dart';
|
|
import 'package:rolodex/data/contact_group.dart';
|
|
import 'contacts.dart';
|
|
|
|
class ContactGroupsPage extends StatelessWidget {
|
|
const ContactGroupsPage({super.key});
|
|
|
|
Widget _buildTrailing(List<Contact> contacts, BuildContext context) {
|
|
final TextStyle style = CupertinoTheme.of(
|
|
context,
|
|
).textTheme.textStyle.copyWith(color: CupertinoColors.systemGrey);
|
|
|
|
return Row(
|
|
spacing: 5,
|
|
children: [
|
|
Text(contacts.length.toString(), style: style),
|
|
Icon(
|
|
CupertinoIcons.forward,
|
|
color: CupertinoColors.systemGrey3,
|
|
size: 18,
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return CupertinoPageScaffold(
|
|
backgroundColor: CupertinoColors.extraLightBackgroundGray,
|
|
child: CustomScrollView(
|
|
slivers: [
|
|
CupertinoSliverNavigationBar(
|
|
padding: EdgeInsetsDirectional.only(start: 8, end: 16),
|
|
stretch: true,
|
|
leading: CupertinoButton(
|
|
padding: EdgeInsets.zero,
|
|
onPressed: () {},
|
|
child: Text('Edit'),
|
|
),
|
|
largeTitle: Text('Lists'),
|
|
trailing: CupertinoButton(
|
|
padding: EdgeInsets.zero,
|
|
onPressed: () {},
|
|
child: Text('Add List'),
|
|
),
|
|
),
|
|
SliverFillRemaining(
|
|
child: Consumer<ContactGroupsModel>(
|
|
builder: (context, contactLists, child) {
|
|
const groupIcon = Icon(
|
|
CupertinoIcons.group,
|
|
weight: 900,
|
|
size: 32,
|
|
);
|
|
|
|
const pairIcon = Icon(
|
|
CupertinoIcons.person_2,
|
|
weight: 900,
|
|
size: 24,
|
|
);
|
|
|
|
return CupertinoListSection.insetGrouped(
|
|
header: Text('iPhone'),
|
|
children: [
|
|
for (ContactGroup contactList in contactLists.lists)
|
|
CupertinoListTile(
|
|
leading: contactList.id == 0 ? groupIcon : pairIcon,
|
|
leadingSize: 32,
|
|
leadingToTitle: 9,
|
|
padding: EdgeInsets.symmetric(horizontal: 13.0),
|
|
title: Text(contactList.label),
|
|
trailing: _buildTrailing(contactList.contacts, context),
|
|
onTap:
|
|
() => Navigator.of(context).push(
|
|
CupertinoPageRoute(
|
|
title: contactList.title,
|
|
builder: (BuildContext context) {
|
|
return ContactListsPage(
|
|
listId: contactList.id,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|