Last active
March 26, 2025 09:23
-
-
Save jeremejazz/4c94e09741eb335fe83f1cae2bd1cce6 to your computer and use it in GitHub Desktop.
Sample Profile Screen Snippet in Flutter. Code from Flutter Cookbook 2nd Edition. (https://github.com/PacktPublishing/Flutter-Cookbook-Second-Edition/tree/main/Chapter_05)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| class ProfileScreen extends StatelessWidget { | |
| const ProfileScreen({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| body: Stack( | |
| children: [ | |
| Image.asset('assets/images/beach.jpg'), | |
| Transform.translate( | |
| offset: const Offset(0, 100), | |
| child: Column( | |
| children: [ | |
| const ProfileImage(), | |
| ProfileDetails(), | |
| ProfileActions(), | |
| ], | |
| ), | |
| ), | |
| ], | |
| ), | |
| ); | |
| } | |
| } | |
| class ProfileImage extends StatelessWidget { | |
| const ProfileImage({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return ClipOval( | |
| child: Image.asset( | |
| width: 200, | |
| height: 200, | |
| 'assets/images/dog.jpg', | |
| fit: BoxFit.fitWidth, | |
| ), | |
| ); | |
| } | |
| } | |
| class ProfileDetails extends StatelessWidget { | |
| const ProfileDetails({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Padding( | |
| padding: const EdgeInsets.all(20.0), | |
| child: Column( | |
| crossAxisAlignment: CrossAxisAlignment.start, | |
| children: [ | |
| Text( | |
| 'Wolfram Barkovich', | |
| style: TextStyle(fontWeight: FontWeight.w600, fontSize: 35), | |
| ), | |
| _buildDetailsRow('Age', '4'), | |
| _buildDetailsRow('Status', 'Good Boy'), | |
| ], | |
| ), | |
| ); | |
| } | |
| Widget _buildDetailsRow(String heading, String value) { | |
| return Row( | |
| children: [ | |
| Text('$heading: ', style: const TextStyle(fontWeight: FontWeight.bold)), | |
| Text(value), | |
| ], | |
| ); | |
| } | |
| } | |
| class ProfileActions extends StatelessWidget { | |
| const ProfileActions({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Row( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: [ | |
| _buildIcon(Icons.restaurant, 'Feed'), | |
| _buildIcon(Icons.favorite, 'Pet'), | |
| _buildIcon(Icons.directions_walk, 'Walk'), | |
| ], | |
| ); | |
| } | |
| Widget _buildIcon(IconData icon, String text) { | |
| return Padding( | |
| padding: EdgeInsets.all(20.0), | |
| child: Column(children: [Icon(icon, size: 40), Text(text)]), | |
| ); | |
| } | |
| } |
Author
jeremejazz
commented
Mar 26, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment