Created
October 31, 2021 16:50
-
-
Save nehal076/8b1614e018c7f26295801b5750df2b16 to your computer and use it in GitHub Desktop.
Profile Image Padding Fixed
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'; | |
const Color darkBlue = Color.fromARGB(255, 18, 32, 47); | |
void main() { | |
runApp(MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
theme: ThemeData.dark().copyWith( | |
scaffoldBackgroundColor: darkBlue, | |
), | |
debugShowCheckedModeBanner: false, | |
home: Scaffold( | |
body: Center( | |
child: MyWidget(), | |
), | |
), | |
); | |
} | |
} | |
class MyWidget extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return Stack( | |
children: [ | |
Image.network( | |
'https://i.pinimg.com/564x/59/11/cd/5911cda1f1ae980b26ca367af3197dfd.jpg', | |
fit: BoxFit.fill, | |
height: double.infinity, | |
width: double.infinity, | |
), | |
Scaffold( | |
backgroundColor: Colors.transparent, | |
appBar: AppBar( | |
backgroundColor: Colors.transparent, | |
shadowColor: Colors.transparent, | |
), | |
body: Stack( | |
children: [ | |
Padding( | |
padding: const EdgeInsets.only(top: 50), | |
child: Container( | |
decoration: const BoxDecoration( | |
borderRadius: | |
BorderRadius.vertical(top: Radius.circular(18)), | |
color: Colors.white, | |
), | |
), | |
), | |
const ProfileDetailView(), | |
const ProfileStatus(), | |
const ProfileImage(), | |
], | |
), | |
), | |
], | |
); | |
} | |
} | |
class ProfileStatus extends StatelessWidget { | |
const ProfileStatus({ | |
Key? key, | |
}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return Padding( | |
padding: const EdgeInsets.only(top: 50), | |
child: Container( | |
padding: const EdgeInsets.all(12), | |
child: Row( | |
children: const [ | |
Icon( | |
Icons.check_circle, | |
color: Colors.green, | |
), | |
Text( | |
'KYC Approved', | |
style: TextStyle( | |
color: Colors.green, | |
fontFamily: 'OpenSans', | |
fontSize: 13, | |
), | |
), | |
], | |
), | |
), | |
); | |
} | |
} | |
class ProfileImage extends StatelessWidget { | |
const ProfileImage({Key? key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: [ | |
Stack( | |
alignment: Alignment.bottomCenter, | |
children: [ | |
Container( | |
decoration: BoxDecoration( | |
shape: BoxShape.circle, | |
border: Border.all( | |
color: Colors.white, | |
width: 3.0, | |
), | |
), | |
child: const CircleAvatar( | |
backgroundImage: NetworkImage( | |
'https://pixinvent.com/demo/vuexy-bootstrap-laravel-admin-template/demo-1/images/portrait/small/avatar-s-7.jpg', | |
), | |
radius: 55.0, | |
), | |
), | |
Positioned( | |
right: 7, | |
bottom: 6, | |
child: Container( | |
padding: const EdgeInsets.all(4), | |
decoration: const BoxDecoration( | |
color: Colors.black, | |
shape: BoxShape.circle, | |
), | |
child: const Icon( | |
Icons.camera_alt_outlined, | |
color: Colors.white, | |
size: 18, | |
), | |
), | |
), | |
], | |
), | |
], | |
); | |
} | |
} | |
class ProfileDetailView extends StatelessWidget { | |
const ProfileDetailView({ | |
Key? key, | |
}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return Padding( | |
padding: const EdgeInsets.only(top: 50), | |
child: Container( | |
margin: const EdgeInsets.only(top: 50), | |
padding: const EdgeInsets.all(16), | |
child: SingleChildScrollView( | |
child: Column( | |
children: [ | |
Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: const [ | |
Text( | |
'Ankit Lastname', | |
style: TextStyle( | |
color: Colors.blue, | |
fontSize: 22, | |
fontFamily: 'OpenSans', | |
fontWeight: FontWeight.w700, | |
), | |
), | |
], | |
), | |
Container( | |
height: 500, | |
color: Colors.green, | |
), | |
Container( | |
height: 300, | |
color: Colors.red, | |
), | |
Container( | |
height: 400, | |
color: Colors.yellow, | |
), | |
Container( | |
height: 400, | |
color: Colors.pink, | |
) | |
], | |
), | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment