Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Commit

Permalink
Updated ListTile documentation, add Material 3 example and other `L…
Browse files Browse the repository at this point in the history 
…istTile` examples fixes. (#118705)
  • Loading branch information
@TahaTesser
TahaTesser committed Jan 19, 2023
1 parent d53cc4a commit 3e71e0c
Show file tree
Hide file tree
Showing 15 changed files with 605 additions and 218 deletions.
63 changes: 30 additions & 33 deletions ...i/lib/material/list_tile/list_tile.4.dart → ...aterial/list_tile/custom_list_item.0.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,19 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// Flutter code sample for [ListTile].
// Flutter code sample for custom list items.

import 'package:flutter/material.dart';

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

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

static const String _title = 'Flutter Code Sample';
class CustomListItemApp extends StatelessWidget {
const CustomListItemApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
return const MaterialApp(
home: CustomListItemExample(),
);
}
}
Expand Down Expand Up @@ -109,32 +103,35 @@ class _VideoDescription extends StatelessWidget {
}
}

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

@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8.0),
itemExtent: 106.0,
children: <CustomListItem>[
CustomListItem(
user: 'Flutter',
viewCount: 999000,
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.blue),
return Scaffold(
appBar: AppBar(title: const Text('Custom List Item Sample')),
body: ListView(
padding: const EdgeInsets.all(8.0),
itemExtent: 106.0,
children: <CustomListItem>[
CustomListItem(
user: 'Flutter',
viewCount: 999000,
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.blue),
),
title: 'The Flutter YouTube Channel',
),
title: 'The Flutter YouTube Channel',
),
CustomListItem(
user: 'Dash',
viewCount: 884000,
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.yellow),
CustomListItem(
user: 'Dash',
viewCount: 884000,
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.yellow),
),
title: 'Announcing Flutter 1.0',
),
title: 'Announcing Flutter 1.0',
),
],
],
),
);
}
}
71 changes: 34 additions & 37 deletions ...i/lib/material/list_tile/list_tile.5.dart → ...aterial/list_tile/custom_list_item.1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,19 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// Flutter code sample for [ListTile].
// Flutter code sample for custom list items.

import 'package:flutter/material.dart';

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

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

static const String _title = 'Flutter Code Sample';
class CustomListItemApp extends StatelessWidget {
const CustomListItemApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
return const MaterialApp(
home: CustomListItemExample(),
);
}
}
Expand Down Expand Up @@ -147,36 +141,39 @@ class CustomListItemTwo extends StatelessWidget {
}
}

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

@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(10.0),
children: <Widget>[
CustomListItemTwo(
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.pink),
return Scaffold(
appBar: AppBar(title: const Text('Custom List Item Sample')),
body: ListView(
padding: const EdgeInsets.all(10.0),
children: <Widget>[
CustomListItemTwo(
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.pink),
),
title: 'Flutter 1.0 Launch',
subtitle: 'Flutter continues to improve and expand its horizons. '
'This text should max out at two lines and clip',
author: 'Dash',
publishDate: 'Dec 28',
readDuration: '5 mins',
),
title: 'Flutter 1.0 Launch',
subtitle: 'Flutter continues to improve and expand its horizons. '
'This text should max out at two lines and clip',
author: 'Dash',
publishDate: 'Dec 28',
readDuration: '5 mins',
),
CustomListItemTwo(
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.blue),
CustomListItemTwo(
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.blue),
),
title: 'Flutter 1.2 Release - Continual updates to the framework',
subtitle: 'Flutter once again improves and makes updates.',
author: 'Flutter',
publishDate: 'Feb 26',
readDuration: '12 mins',
),
title: 'Flutter 1.2 Release - Continual updates to the framework',
subtitle: 'Flutter once again improves and makes updates.',
author: 'Flutter',
publishDate: 'Feb 26',
readDuration: '12 mins',
),
],
],
),
);
}
}
128 changes: 64 additions & 64 deletions examples/api/lib/material/list_tile/list_tile.0.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,7 @@ class ListTileApp extends StatelessWidget {
textColor: Colors.white,
)
),
home: Scaffold(
appBar: AppBar(title: const Text('ListTile Samples')),
body: const LisTileExample(),
),
home: const LisTileExample(),
);
}
}
Expand Down Expand Up @@ -73,77 +70,80 @@ class _LisTileExampleState extends State<LisTileExample> with TickerProviderStat

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Hero(
tag: 'ListTile-Hero',
// Wrap the ListTile in a Material widget so the ListTile has someplace
// to draw the animated colors during the hero transition.
child: Material(
child: ListTile(
title: const Text('ListTile with Hero'),
subtitle: const Text('Tap here for Hero transition'),
tileColor: Colors.cyan,
onTap: () {
Navigator.push(context, MaterialPageRoute<Widget>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('ListTile Hero')),
body: Center(
child: Hero(
tag: 'ListTile-Hero',
child: Material(
child: ListTile(
title: const Text('ListTile with Hero'),
subtitle: const Text('Tap here to go back'),
tileColor: Colors.blue[700],
onTap: () {
Navigator.pop(context);
},
return Scaffold(
appBar: AppBar(title: const Text('ListTile Samples')),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Hero(
tag: 'ListTile-Hero',
// Wrap the ListTile in a Material widget so the ListTile has someplace
// to draw the animated colors during the hero transition.
child: Material(
child: ListTile(
title: const Text('ListTile with Hero'),
subtitle: const Text('Tap here for Hero transition'),
tileColor: Colors.cyan,
onTap: () {
Navigator.push(context, MaterialPageRoute<Widget>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('ListTile Hero')),
body: Center(
child: Hero(
tag: 'ListTile-Hero',
child: Material(
child: ListTile(
title: const Text('ListTile with Hero'),
subtitle: const Text('Tap here to go back'),
tileColor: Colors.blue[700],
onTap: () {
Navigator.pop(context);
},
),
),
),
),
),
);
}),
);
},
);
}),
);
},
),
),
),
),
FadeTransition(
opacity: _fadeAnimation,
// Wrap the ListTile in a Material widget so the ListTile has someplace
// to draw the animated colors during the fade transition.
child: const Material(
child: ListTile(
title: Text('ListTile with FadeTransition'),
selectedTileColor: Colors.green,
selectedColor: Colors.white,
selected: true,
FadeTransition(
opacity: _fadeAnimation,
// Wrap the ListTile in a Material widget so the ListTile has someplace
// to draw the animated colors during the fade transition.
child: const Material(
child: ListTile(
title: Text('ListTile with FadeTransition'),
selectedTileColor: Colors.green,
selectedColor: Colors.white,
selected: true,
),
),
),
),
SizedBox(
height: 100,
child: Center(
child: SizeTransition(
sizeFactor: _sizeAnimation,
axisAlignment: -1.0,
// Wrap the ListTile in a Material widget so the ListTile has someplace
// to draw the animated colors during the size transition.
child: const Material(
child: ListTile(
title: Text('ListTile with SizeTransition'),
tileColor: Colors.red,
minVerticalPadding: 25.0,
SizedBox(
height: 100,
child: Center(
child: SizeTransition(
sizeFactor: _sizeAnimation,
axisAlignment: -1.0,
// Wrap the ListTile in a Material widget so the ListTile has someplace
// to draw the animated colors during the size transition.
child: const Material(
child: ListTile(
title: Text('ListTile with SizeTransition'),
tileColor: Colors.red,
minVerticalPadding: 25.0,
),
),
),
),
),
),
],
],
),
);
}
}
Loading

0 comments on commit 3e71e0c

Please sign in to comment.