Issue
I want to create a row and put three widgets in there. One that will be in the most right corner of the row, one that will be in the most left corner and one that will be in the center, I have been trying solutions for a while and I still can’t make it look like I wanted. Added picture of what I want below.
This is what I want to create:
and this is my code (the relevant part of it):
this code represent one row (in the real code i multiply it and changing the relevant thing.)
GestureDetector(
onTap: () {
print(title);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title, // Name
style: TextStyle(
fontSize: size.width * .0365,
color: Colors.black,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Text(
subTitle, // Name
style: TextStyle(
fontSize: size.width * .0365,
color: const Color(0x9C9C9C9C),
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Icon(
Icons.arrow_forward_ios, // the arrow icon in the left of the row
size: size.width * .04,
color: const Color(
0xA6A6A6A6,
),
),
],
),
);
I tried to wrap those Widgets with the Align Widget and use the alignment: Alignment.center, but still didn’t succeed.
this is what I got:
as you can see the Widgets in the middle aren’t align like I wanted. if Someone know what I have been missing please let me know.
UPDATE
now my code working like I wanted but now the text are centered but they aren’t centered with the whole page. Someone know how can I fix that?
this is the whole code of the page:
// imports...
class EditProfile extends StatefulWidget {
const EditProfile({Key? key, this.user}) : super(key: key);
@override
final user;
State<EditProfile> createState() => _EditProfileState(user);
}
class _EditProfileState extends State<EditProfile> {
late UserData user;
late String username;
late String phoneNumber;
late String location;
late String gender;
_EditProfileState(this.user);
@override
void initState() {
super.initState();
Map<String, dynamic> data = user.getUserData();
username = data["username"];
phoneNumber = data["phoneNumber"];
//location = data["location"];
location = "location";
gender = data["gender"];
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text("Edit profile"),
leading: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: const Text(
"Cancel",
textAlign: TextAlign.center,
),
),
],
),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
print("save");
},
child: const Text(
"save",
textAlign: TextAlign.center,
style: TextStyle(
color: Color.fromRGBO(0, 139, 182, 1),
fontWeight: FontWeight.w500,
),
),
),
],
),
),
child: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(top: size.height * .03),
child: Center(
child: CircleAvatar(
backgroundImage: Image.network(
"some image path",
).image,
radius: size.width * .14,
),
),
),
Padding(
padding: EdgeInsets.only(top: size.height * .01),
child: GestureDetector(
onTap: () {
print("changing pofile pic");
},
child: Text(
"Change Profile Photo",
style: TextStyle(
fontSize: size.width * .035,
color: Color.fromRGBO(0, 139, 182, 1),
decoration: TextDecoration.none,
fontWeight: FontWeight.w500,
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: size.width * .04),
child: Container(
height: size.height * .25,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
filedRow(size, "Name", username),
filedRow(size, "Phone", phoneNumber),
filedRow(size, "Location", location),
filedRow(size, "Genger", gender),
],
),
),
),
],
),
),
);
}
GestureDetector filedRow(Size size, String title, String subTitle) {
return GestureDetector(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
title,
style: TextStyle(
fontSize: size.width * .036,
color: Colors.black,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
),
Expanded(
flex: 4,
child: Text(
subTitle,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: size.width * .036,
color: Color(0x9C9C9C9C),
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
),
Icon(
Icons.arrow_forward_ios,
size: size.width * .03,
color: Color(0xA6A6A6A6),
),
],
),
);
}
}
and this is what I get
Solution
I double-checked everything and you were right, I didn’t notice that my headers were the same length, but I fixed everything. See corrected code and screenshot:
Widget mainWidget() {
return Scaffold(
appBar: AppBar(
title: const Text("App bar"),
),
body: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: const [
CustomRow(title: 'Name', choosedSetting: 'Alexey'),
CustomRow(title: 'Phone', choosedSetting: '+375 29 154-52-52'),
CustomRow(title: 'Gender', choosedSetting: 'Man'),
],
),
),
);
}
}
class CustomRow extends StatelessWidget {
final String title;
final String choosedSetting;
const CustomRow({Key? key, required this.title, required this.choosedSetting})
: super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
title, // Name
style: const TextStyle(
fontSize: 16,
color: Colors.black,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
),
Expanded(
flex: 4, // Change this property to align your content
child: Text(
choosedSetting, // Name
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 15,
color: Colors.black,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
),
const Icon(
Icons.arrow_forward_ios, // The arrow icon in the right of the row
size: 12,
color: Colors.black),
],
),
);
}
}
Image: https://i.stack.imgur.com/F39A1.png
To align the "choosedSetting" text, change the flex value.
I should also notice an error in your comment:
You have: // the arrow icon in the left of the row
How to write correctly: // the arrow icon in the right of the row
And here’s what the Expanded widget does: Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.
Answered By – Legend5366
Answer Checked By – Mary Flores (FlutterFixes Volunteer)