Skip to content

Commit 3e71e0c

Browse files
TahaTesserTahaTesser
authored
Updated ListTile documentation, add Material 3 example and other ListTile examples fixes. (#118705)
1 parent d53cc4a commit 3e71e0c

15 files changed

+605
-218
lines changed

‎examples/api/lib/material/list_tile/list_tile.4.dart ‎examples/api/lib/material/list_tile/custom_list_item.0.dart

+30-33
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,19 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
// Flutter code sample for [ListTile].
5+
// Flutter code sample for custom list items.
66

77
import 'package:flutter/material.dart';
88

9-
void main() => runApp(const MyApp());
9+
void main() => runApp(const CustomListItemApp());
1010

11-
class MyApp extends StatelessWidget {
12-
const MyApp({super.key});
13-
14-
static const String _title = 'Flutter Code Sample';
11+
class CustomListItemApp extends StatelessWidget {
12+
const CustomListItemApp({super.key});
1513

1614
@override
1715
Widget build(BuildContext context) {
18-
return MaterialApp(
19-
title: _title,
20-
home: Scaffold(
21-
appBar: AppBar(title: const Text(_title)),
22-
body: const MyStatelessWidget(),
23-
),
16+
return const MaterialApp(
17+
home: CustomListItemExample(),
2418
);
2519
}
2620
}
@@ -109,32 +103,35 @@ class _VideoDescription extends StatelessWidget {
109103
}
110104
}
111105

112-
class MyStatelessWidget extends StatelessWidget {
113-
const MyStatelessWidget({super.key});
106+
class CustomListItemExample extends StatelessWidget {
107+
const CustomListItemExample({super.key});
114108

115109
@override
116110
Widget build(BuildContext context) {
117-
return ListView(
118-
padding: const EdgeInsets.all(8.0),
119-
itemExtent: 106.0,
120-
children: <CustomListItem>[
121-
CustomListItem(
122-
user: 'Flutter',
123-
viewCount: 999000,
124-
thumbnail: Container(
125-
decoration: const BoxDecoration(color: Colors.blue),
111+
return Scaffold(
112+
appBar: AppBar(title: const Text('Custom List Item Sample')),
113+
body: ListView(
114+
padding: const EdgeInsets.all(8.0),
115+
itemExtent: 106.0,
116+
children: <CustomListItem>[
117+
CustomListItem(
118+
user: 'Flutter',
119+
viewCount: 999000,
120+
thumbnail: Container(
121+
decoration: const BoxDecoration(color: Colors.blue),
122+
),
123+
title: 'The Flutter YouTube Channel',
126124
),
127-
title: 'The Flutter YouTube Channel',
128-
),
129-
CustomListItem(
130-
user: 'Dash',
131-
viewCount: 884000,
132-
thumbnail: Container(
133-
decoration: const BoxDecoration(color: Colors.yellow),
125+
CustomListItem(
126+
user: 'Dash',
127+
viewCount: 884000,
128+
thumbnail: Container(
129+
decoration: const BoxDecoration(color: Colors.yellow),
130+
),
131+
title: 'Announcing Flutter 1.0',
134132
),
135-
title: 'Announcing Flutter 1.0',
136-
),
137-
],
133+
],
134+
),
138135
);
139136
}
140137
}

‎examples/api/lib/material/list_tile/list_tile.5.dart ‎examples/api/lib/material/list_tile/custom_list_item.1.dart

+34-37
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,19 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
// Flutter code sample for [ListTile].
5+
// Flutter code sample for custom list items.
66

77
import 'package:flutter/material.dart';
88

9-
void main() => runApp(const MyApp());
9+
void main() => runApp(const CustomListItemApp());
1010

11-
class MyApp extends StatelessWidget {
12-
const MyApp({super.key});
13-
14-
static const String _title = 'Flutter Code Sample';
11+
class CustomListItemApp extends StatelessWidget {
12+
const CustomListItemApp({super.key});
1513

1614
@override
1715
Widget build(BuildContext context) {
18-
return MaterialApp(
19-
title: _title,
20-
home: Scaffold(
21-
appBar: AppBar(title: const Text(_title)),
22-
body: const MyStatelessWidget(),
23-
),
16+
return const MaterialApp(
17+
home: CustomListItemExample(),
2418
);
2519
}
2620
}
@@ -147,36 +141,39 @@ class CustomListItemTwo extends StatelessWidget {
147141
}
148142
}
149143

150-
class MyStatelessWidget extends StatelessWidget {
151-
const MyStatelessWidget({super.key});
144+
class CustomListItemExample extends StatelessWidget {
145+
const CustomListItemExample({super.key});
152146

153147
@override
154148
Widget build(BuildContext context) {
155-
return ListView(
156-
padding: const EdgeInsets.all(10.0),
157-
children: <Widget>[
158-
CustomListItemTwo(
159-
thumbnail: Container(
160-
decoration: const BoxDecoration(color: Colors.pink),
149+
return Scaffold(
150+
appBar: AppBar(title: const Text('Custom List Item Sample')),
151+
body: ListView(
152+
padding: const EdgeInsets.all(10.0),
153+
children: <Widget>[
154+
CustomListItemTwo(
155+
thumbnail: Container(
156+
decoration: const BoxDecoration(color: Colors.pink),
157+
),
158+
title: 'Flutter 1.0 Launch',
159+
subtitle: 'Flutter continues to improve and expand its horizons. '
160+
'This text should max out at two lines and clip',
161+
author: 'Dash',
162+
publishDate: 'Dec 28',
163+
readDuration: '5 mins',
161164
),
162-
title: 'Flutter 1.0 Launch',
163-
subtitle: 'Flutter continues to improve and expand its horizons. '
164-
'This text should max out at two lines and clip',
165-
author: 'Dash',
166-
publishDate: 'Dec 28',
167-
readDuration: '5 mins',
168-
),
169-
CustomListItemTwo(
170-
thumbnail: Container(
171-
decoration: const BoxDecoration(color: Colors.blue),
165+
CustomListItemTwo(
166+
thumbnail: Container(
167+
decoration: const BoxDecoration(color: Colors.blue),
168+
),
169+
title: 'Flutter 1.2 Release - Continual updates to the framework',
170+
subtitle: 'Flutter once again improves and makes updates.',
171+
author: 'Flutter',
172+
publishDate: 'Feb 26',
173+
readDuration: '12 mins',
172174
),
173-
title: 'Flutter 1.2 Release - Continual updates to the framework',
174-
subtitle: 'Flutter once again improves and makes updates.',
175-
author: 'Flutter',
176-
publishDate: 'Feb 26',
177-
readDuration: '12 mins',
178-
),
179-
],
175+
],
176+
),
180177
);
181178
}
182179
}

‎examples/api/lib/material/list_tile/list_tile.0.dart

+64-64
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,7 @@ class ListTileApp extends StatelessWidget {
1919
textColor: Colors.white,
2020
)
2121
),
22-
home: Scaffold(
23-
appBar: AppBar(title: const Text('ListTile Samples')),
24-
body: const LisTileExample(),
25-
),
22+
home: const LisTileExample(),
2623
);
2724
}
2825
}
@@ -73,77 +70,80 @@ class _LisTileExampleState extends State<LisTileExample> with TickerProviderStat
7370

7471
@override
7572
Widget build(BuildContext context) {
76-
return Column(
77-
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
78-
children: <Widget>[
79-
Hero(
80-
tag: 'ListTile-Hero',
81-
// Wrap the ListTile in a Material widget so the ListTile has someplace
82-
// to draw the animated colors during the hero transition.
83-
child: Material(
84-
child: ListTile(
85-
title: const Text('ListTile with Hero'),
86-
subtitle: const Text('Tap here for Hero transition'),
87-
tileColor: Colors.cyan,
88-
onTap: () {
89-
Navigator.push(context, MaterialPageRoute<Widget>(
90-
builder: (BuildContext context) {
91-
return Scaffold(
92-
appBar: AppBar(title: const Text('ListTile Hero')),
93-
body: Center(
94-
child: Hero(
95-
tag: 'ListTile-Hero',
96-
child: Material(
97-
child: ListTile(
98-
title: const Text('ListTile with Hero'),
99-
subtitle: const Text('Tap here to go back'),
100-
tileColor: Colors.blue[700],
101-
onTap: () {
102-
Navigator.pop(context);
103-
},
73+
return Scaffold(
74+
appBar: AppBar(title: const Text('ListTile Samples')),
75+
body: Column(
76+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
77+
children: <Widget>[
78+
Hero(
79+
tag: 'ListTile-Hero',
80+
// Wrap the ListTile in a Material widget so the ListTile has someplace
81+
// to draw the animated colors during the hero transition.
82+
child: Material(
83+
child: ListTile(
84+
title: const Text('ListTile with Hero'),
85+
subtitle: const Text('Tap here for Hero transition'),
86+
tileColor: Colors.cyan,
87+
onTap: () {
88+
Navigator.push(context, MaterialPageRoute<Widget>(
89+
builder: (BuildContext context) {
90+
return Scaffold(
91+
appBar: AppBar(title: const Text('ListTile Hero')),
92+
body: Center(
93+
child: Hero(
94+
tag: 'ListTile-Hero',
95+
child: Material(
96+
child: ListTile(
97+
title: const Text('ListTile with Hero'),
98+
subtitle: const Text('Tap here to go back'),
99+
tileColor: Colors.blue[700],
100+
onTap: () {
101+
Navigator.pop(context);
102+
},
103+
),
104104
),
105105
),
106106
),
107-
),
108-
);
109-
}),
110-
);
111-
},
107+
);
108+
}),
109+
);
110+
},
111+
),
112112
),
113113
),
114-
),
115-
FadeTransition(
116-
opacity: _fadeAnimation,
117-
// Wrap the ListTile in a Material widget so the ListTile has someplace
118-
// to draw the animated colors during the fade transition.
119-
child: const Material(
120-
child: ListTile(
121-
title: Text('ListTile with FadeTransition'),
122-
selectedTileColor: Colors.green,
123-
selectedColor: Colors.white,
124-
selected: true,
114+
FadeTransition(
115+
opacity: _fadeAnimation,
116+
// Wrap the ListTile in a Material widget so the ListTile has someplace
117+
// to draw the animated colors during the fade transition.
118+
child: const Material(
119+
child: ListTile(
120+
title: Text('ListTile with FadeTransition'),
121+
selectedTileColor: Colors.green,
122+
selectedColor: Colors.white,
123+
selected: true,
124+
),
125125
),
126126
),
127-
),
128-
SizedBox(
129-
height: 100,
130-
child: Center(
131-
child: SizeTransition(
132-
sizeFactor: _sizeAnimation,
133-
axisAlignment: -1.0,
134-
// Wrap the ListTile in a Material widget so the ListTile has someplace
135-
// to draw the animated colors during the size transition.
136-
child: const Material(
137-
child: ListTile(
138-
title: Text('ListTile with SizeTransition'),
139-
tileColor: Colors.red,
140-
minVerticalPadding: 25.0,
127+
SizedBox(
128+
height: 100,
129+
child: Center(
130+
child: SizeTransition(
131+
sizeFactor: _sizeAnimation,
132+
axisAlignment: -1.0,
133+
// Wrap the ListTile in a Material widget so the ListTile has someplace
134+
// to draw the animated colors during the size transition.
135+
child: const Material(
136+
child: ListTile(
137+
title: Text('ListTile with SizeTransition'),
138+
tileColor: Colors.red,
139+
minVerticalPadding: 25.0,
140+
),
141141
),
142142
),
143143
),
144144
),
145-
),
146-
],
145+
],
146+
),
147147
);
148148
}
149149
}

0 commit comments

Comments
 (0)