Mobile Application Development

(Lab Task)
Topic: Layout using Rows and Columns
Output: -

Code: -
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:foodhub/welcome_screen.dart';
class profile extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Food Hub',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
useMaterial3: true,
),
);
}
}
class ProfilePage extends StatefulWidget {

@override
State<ProfilePage> createState() => _ProfilePage();
}

class _ProfilePage extends State<ProfilePage> {

@override
Widget build(BuildContext context) {
 return Scaffold(
body:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 260.h,
width: double.infinity,
// color: Colors.black,
child: Stack(
children: [
Positioned(
left: 80.w,
top: 0,
child: Image.asset(
"./assets/images/creamCircle.png",
),
),
Positioned(
left: -45.w,
top: -86.h,
child: Image.asset(
"./assets/images/yellowFrame2.png",
height: 300,
),
),
Positioned(
left: 130.w,
top: -80.h,
child: Image.asset(
"./assets/images/orangeFrame2.png",
),
),
Positioned(
top: 150.h,
left: 130,
child:CircleAvatar(
backgroundColor: Colors.white,
radius: 50.r,
child: ClipOval(
child: Image.asset(
"./assets/images/avatar.png",
width: 80.w,
height: 80.h,
fit: BoxFit.cover,
),
),
)
,
)
],
),
),
Row(
children: [
SizedBox(width: 120.w,),
Text("Abdul Mateen",style: TextStyle(fontSize: 20.sp,fontWeight:
FontWeight.w800),)
],
),
Row(
children: [
SizedBox(width: 120.w,),
TextButton(
onPressed: (){},
child: Text("Edit Profile",style: TextStyle(fontSize:
20.sp,fontWeight: FontWeight.w400,color: const Color(0xff9796A1)),)),
],
 ),
Padding(
padding: EdgeInsets.symmetric(vertical: 20.w,horizontal: 20.h),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Full Name",style: TextStyle(color: const
Color(0xff9796A1),fontSize: 16.sp,fontWeight: FontWeight.w500),),
SizedBox(height: 10.h,),
SizedBox(
width: 339.w,
child: TextField(
readOnly: true,
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.person,
color: Color(0xffFE724C), // Set the color of the person
icon
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.r),
borderSide: const BorderSide(color: Color(0xffFE724C),
width: 1),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.r),
borderSide: const BorderSide(color: Color(0xffFE724C),
width: 1),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.r),
borderSide: const BorderSide(color: Color(0xffFE724C),
width: 1),
),
filled: true,
fillColor: const Color(0xcdfafafa),
hintText: "",
contentPadding: EdgeInsets.symmetric(horizontal: 16.w,
vertical: 14.h),
hintStyle: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w400,
),
),
),
),
SizedBox(height: 10.h,),
Text("Email",style: TextStyle(color: const
Color(0xff9796A1),fontSize: 16.sp,fontWeight: FontWeight.w500),),
SizedBox(height: 10.h,),
SizedBox(
width: 339.w,
child: TextField(
readOnly: true,
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.email,
color: Color(0xffFE724C),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.r),
borderSide: const BorderSide(color: Color(0xffFE724C),
width: 1),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.r),
borderSide: const BorderSide(color: Color(0xffFE724C),
width: 1),
 ),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.r),
borderSide: const BorderSide(color: Color(0xffFE724C),
width: 1),
),
filled: true,
fillColor: const Color(0xcdfafafa),
hintText: "",
contentPadding: EdgeInsets.symmetric(horizontal: 16.w,
vertical: 14.h),
hintStyle: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w400,
),
),
),
),

SizedBox(height: 10.h,),
Text("Phone No",style: TextStyle(color: const
Color(0xff9796A1),fontSize: 16.sp,fontWeight: FontWeight.w500),),
SizedBox(height: 10.h,),
SizedBox(
width: 339.w,
child: TextField(
readOnly: true,
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.phone,
color: Color(0xffFE724C),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.r),
borderSide: const BorderSide(color: Color(0xffFE724C),
width: 1),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.r),
borderSide: const BorderSide(color: Color(0xffFE724C),
width: 1),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.r),
borderSide: const BorderSide(color: Color(0xffFE724C),
width: 1),
),
filled: true,
fillColor: const Color(0xcdfafafa),
hintText: "",
contentPadding: EdgeInsets.symmetric(horizontal: 16.w,
vertical: 14.h),
hintStyle: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w400,
),
),
),
),
SizedBox(height: 10.h,),
],
),
)
],
)
);
}
}