Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2026-04-30 11:36:35 +00:00
Code Issues Releases Wiki Activity

Add a Material/Cupertino adaptive application example (#69)

Browse Source
This commit is contained in:
xster
2019-06-10 14:14:34 -07:00
committed by Andrew Brogdon
parent 08beb69245
commit 325c5a5d2b
67 changed files with 2718 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
platform_design/lib/profile_tab.dart Normal file
View File

@@ -0,0 +1,243 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'settings_tab.dart';
import 'widgets.dart';
class ProfileTab extends StatelessWidget {
static const title = 'Profile';
static const androidIcon = Icon(Icons.person);
static const iosIcon = Icon(CupertinoIcons.profile_circled);
Widget _buildBody(context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
children: [
Padding(
padding: EdgeInsets.all(8),
child: Center(
child: Text('😼', style: TextStyle(
fontSize: 80,
decoration: TextDecoration.none,
)),
),
),
PreferenceCard(
header: 'MY INTENSITY PREFERENCE',
content: '🔥',
preferenceChoices: [
'Super heavy',
'Dial it to 11',
"Head bangin'",
'1000W',
'My neighbor hates me',
],
),
PreferenceCard(
header: 'CURRENT MOOD',
content: '🤘🏾🚀',
preferenceChoices: [
'Over the moon',
'Basking in sunlight',
'Hello fellow Martians',
'Into the darkness',
],
),
Expanded(
child: Container(),
),
LogOutButton(),
],
),
),
);
}
// ===========================================================================
// Non-shared code below because on iOS, the settings tab is nested inside of
// the profile tab as a button in the nav bar.
// ===========================================================================
Widget _buildAndroid(context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: _buildBody(context),
);
}
Widget _buildIos(context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
trailing: CupertinoButton(
padding: EdgeInsets.zero,
child: SettingsTab.iosIcon,
onPressed: () {
// This pushes the settings page as a full page modal dialog on top
// of the tab bar and everything.
Navigator.of(context, rootNavigator: true).push(
CupertinoPageRoute(
title: SettingsTab.title,
fullscreenDialog: true,
builder: (context) => SettingsTab(),
),
);
},
),
),
child: _buildBody(context),
);
}
@override
Widget build(context) {
return PlatformWidget(
androidBuilder: _buildAndroid,
iosBuilder: _buildIos,
);
}
}
class PreferenceCard extends StatelessWidget {
const PreferenceCard({ this.header, this.content, this.preferenceChoices });
final String header;
final String content;
final List<String> preferenceChoices;
@override
Widget build(context) {
return PressableCard(
color: Colors.green,
flattenAnimation: AlwaysStoppedAnimation(0),
child: Stack(
children: [
Container(
height: 120,
width: 250,
child: Padding(
padding: EdgeInsets.only(top: 40),
child: Center(
child: Text(
content,
style: TextStyle(fontSize: 48),
),
),
),
),
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
color: Colors.black12,
height: 40,
padding: EdgeInsets.only(left: 12),
alignment: Alignment.centerLeft,
child: Text(
header,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
),
),
],
),
onPressed: () {
showChoices(context, preferenceChoices);
},
);
}
}
class LogOutButton extends StatelessWidget {
static const _logoutMessage = Text('You may check out any time you like, but you can never leave');
// ===========================================================================
// Non-shared code below because this tab shows different interfaces. On
// Android, it's showing an alert dialog with 2 buttons and on iOS,
// it's showing an action sheet with 3 choices.
//
// This is a design choice and you may want to do something different in your
// app.
// ===========================================================================
Widget _buildAndroid(context) {
return RaisedButton(
child: Text('LOG OUT', style: TextStyle(color: Colors.red)),
onPressed: () {
// You should do something with the result of the dialog prompt in a
// real app but this is just a demo.
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Log out?'),
content: _logoutMessage,
actions: [
FlatButton(
child: const Text('Go back'),
onPressed: () => Navigator.pop(context) ,
),
FlatButton(
child: const Text('Cancel'),
onPressed: () => Navigator.pop(context),
),
],
);
}
);
},
);
}
Widget _buildIos(context) {
return CupertinoButton(
color: CupertinoColors.destructiveRed,
child: Text('Log out'),
onPressed: () {
// You should do something with the result of the action sheet prompt
// in a real app but this is just a demo.
showCupertinoModalPopup(
context: context,
builder: (context) {
return CupertinoActionSheet(
title: Text('Log out?'),
message: _logoutMessage,
actions: [
CupertinoActionSheetAction(
child: const Text('Reprogram the night man'),
isDestructiveAction: true,
onPressed: () => Navigator.pop(context),
),
CupertinoActionSheetAction(
child: const Text('Go back'),
onPressed: () => Navigator.pop(context),
),
],
cancelButton: CupertinoActionSheetAction(
child: const Text('Cancel'),
isDefaultAction: true,
onPressed: () => Navigator.pop(context),
),
);
},
);
},
);
}
@override
Widget build(context) {
return PlatformWidget(
androidBuilder: _buildAndroid,
iosBuilder: _buildIos,
);
}
}