Skip to content

Commit

Permalink
Update layout tutorial for current best practices (#9893)
Browse files Browse the repository at this point in the history 
This refactors the Layout Tutorial for current best practice including
adding screenshots and using Padding where needed.

Fixes #2108
Fixes #1799 
Fixes #9118
  • Loading branch information
@atsansone
atsansone authored Dec 13, 2023
1 parent eb0411b commit d93a46c
Show file tree
Hide file tree
Showing 21 changed files with 1,193 additions and 550 deletions.
6 changes: 4 additions & 2 deletions examples/layout/base/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,12 @@ class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
const String appTitle = 'Flutter layout demo';
return MaterialApp(
title: 'Flutter layout demo',
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter layout demo'),
title: const Text(appTitle),
),
// #docregion centered-text
body: const Center(
Expand All @@ -30,4 +31,5 @@ class MyApp extends StatelessWidget {
);
}
}

// #enddocregion all
177 changes: 129 additions & 48 deletions examples/layout/lakes/interactive/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,55 @@ class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
Widget titleSection = Container(
const String appTitle = 'Flutter layout demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const SingleChildScrollView(
child: Column(
children: [
ImageSection(
image: 'images/lake.jpg',
),
TitleSection(
name: 'Oeschinen Lake Campground',
location: 'Kandersteg, Switzerland',
),
ButtonSection(),
TextSection(
description:
'Lake Oeschinen lies at the foot of the Blüemlisalp in the '
'Bernese Alps. Situated 1,578 meters above sea level, it '
'is one of the larger Alpine Lakes. A gondola ride from '
'Kandersteg, followed by a half-hour walk through pastures '
'and pine forest, leads you to the lake, which warms to 20 '
'degrees Celsius in the summer. Activities enjoyed here '
'include rowing, and riding the summer toboggan run.',
),
],
),
),
),
);
}
}

class TitleSection extends StatelessWidget {
const TitleSection({
super.key,
required this.name,
required this.location,
});

final String name;
final String location;

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(32),
child: Row(
children: [
Expand All @@ -17,17 +65,17 @@ class MyApp extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/*2*/
Container(
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: const Text(
'Oeschinen Lake Campground',
style: TextStyle(
child: Text(
name,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Text(
'Kandersteg, Switzerland',
location,
style: TextStyle(
color: Colors.grey[500],
),
Expand All @@ -39,64 +87,61 @@ class MyApp extends StatelessWidget {
],
),
);
}
}

Color color = Theme.of(context).primaryColor;
class ButtonSection extends StatelessWidget {
const ButtonSection({super.key});

Widget buttonSection = SizedBox(
@override
Widget build(BuildContext context) {
final Color color = Theme.of(context).primaryColor;
return SizedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildButtonColumn(color, Icons.call, 'CALL'),
_buildButtonColumn(color, Icons.near_me, 'ROUTE'),
_buildButtonColumn(color, Icons.share, 'SHARE'),
BuildButtonColumn(
color: color,
icon: Icons.call,
label: 'CALL',
),
BuildButtonColumn(
color: color,
icon: Icons.near_me,
label: 'ROUTE',
),
BuildButtonColumn(
color: color,
icon: Icons.share,
label: 'SHARE',
),
],
),
);
}
}

Widget textSection = Container(
padding: const EdgeInsets.all(32),
child: const Text(
'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
'Alps. Situated 1,578 meters above sea level, it is one of the '
'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
'half-hour walk through pastures and pine forest, leads you to the '
'lake, which warms to 20 degrees Celsius in the summer. Activities '
'enjoyed here include rowing, and riding the summer toboggan run.',
softWrap: true,
),
);
class BuildButtonColumn extends StatelessWidget {
const BuildButtonColumn({
super.key,
required this.color,
required this.icon,
required this.label,
});

return MaterialApp(
title: 'Flutter layout demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter layout demo'),
),
body: ListView(
children: [
Image.asset(
'images/lake.jpg',
width: 600,
height: 240,
fit: BoxFit.cover,
),
titleSection,
buttonSection,
textSection,
],
),
),
);
}
final Color color;
final IconData icon;
final String label;

Column _buildButtonColumn(Color color, IconData icon, String label) {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: color),
Container(
margin: const EdgeInsets.only(top: 8),
Padding(
padding: const EdgeInsets.only(top: 8),
child: Text(
label,
style: TextStyle(
Expand All @@ -111,6 +156,42 @@ class MyApp extends StatelessWidget {
}
}

class TextSection extends StatelessWidget {
const TextSection({
super.key,
required this.description,
});

final String description;

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(32),
child: Text(
description,
softWrap: true,
),
);
}
}

class ImageSection extends StatelessWidget {
const ImageSection({super.key, required this.image});

final String image;

@override
Widget build(BuildContext context) {
return Image.asset(
image,
width: 600,
height: 240,
fit: BoxFit.cover,
);
}
}

// #docregion FavoriteWidget
class FavoriteWidget extends StatefulWidget {
const FavoriteWidget({super.key});
Expand Down
66 changes: 44 additions & 22 deletions examples/layout/lakes/step2/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,44 @@ class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
// #docregion titleSection
Widget titleSection = Container(
const String appTitle = 'Flutter layout demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
// #docregion addWidget
body: const SingleChildScrollView(
child: Column(
children: [
TitleSection(
name: 'Oeschinen Lake Campground',
location: 'Kandersteg, Switzerland',
),
],
),
),
// #enddocregion addWidget
),
);
}
}

// #docregion titleSection
class TitleSection extends StatelessWidget {
const TitleSection({
super.key,
required this.name,
required this.location,
});

final String name;
final String location;

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(32),
child: Row(
children: [
Expand All @@ -18,17 +54,17 @@ class MyApp extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/*2*/
Container(
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: const Text(
'Oeschinen Lake Campground',
style: TextStyle(
child: Text(
name,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Text(
'Kandersteg, Switzerland',
location,
style: TextStyle(
color: Colors.grey[500],
),
Expand All @@ -45,20 +81,6 @@ class MyApp extends StatelessWidget {
],
),
);
// #enddocregion titleSection

return MaterialApp(
title: 'Flutter layout demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter layout demo'),
),
body: Column(
children: [
titleSection,
],
),
),
);
}
}
// #enddocregion titleSection
Loading

0 comments on commit d93a46c

Please sign in to comment.