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(BuildContext 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(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: _buildBody(context), ); } Widget _buildIos(BuildContext 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 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 can't actually log out! This is just a demo of how alerts work."); // =========================================================================== // 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(BuildContext 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('Got it'), onPressed: () => Navigator.pop(context), ), FlatButton( child: const Text('Cancel'), onPressed: () => Navigator.pop(context), ), ], ); }, ); }, ); } Widget _buildIos(BuildContext 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('Got it'), 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, ); } }