Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Revert "Update layout tutorial for current best practices" #9927

Merged
merged 1 commit into from
Dec 14, 2023
Merged

Revert "Update layout tutorial for current best practices" #9927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions examples/layout/base/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,11 @@ class MyApp extends StatelessWidget {

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

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

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

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

@override
Widget build(BuildContext context) {
final Color color = Theme.of(context).primaryColor;
return SizedBox(
Widget buttonSection = SizedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
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',
),
_buildButtonColumn(color, Icons.call, 'CALL'),
_buildButtonColumn(color, Icons.near_me, 'ROUTE'),
_buildButtonColumn(color, Icons.share, 'SHARE'),
],
),
);
}
}

class BuildButtonColumn extends StatelessWidget {
const BuildButtonColumn({
super.key,
required this.color,
required this.icon,
required this.label,
});
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,
),
);

final Color color;
final IconData icon;
final String 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,
],
),
),
);
}

@override
Widget build(BuildContext context) {
Column _buildButtonColumn(Color color, IconData icon, String label) {
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: color),
Padding(
padding: const EdgeInsets.only(top: 8),
Container(
margin: const EdgeInsets.only(top: 8),
child: Text(
label,
style: TextStyle(
Expand All @@ -156,42 +111,6 @@ class BuildButtonColumn 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: 22 additions & 44 deletions examples/layout/lakes/step2/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,44 +7,8 @@ class MyApp extends StatelessWidget {

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