I am trying to the profile of a client but there is something messed up in the code because the second widget it’s not in the center and the divider it’s not showing under the name and button. Here it’s the code
import 'package:flutter/material.dart';
import 'package:flashy_tab_bar2/flashy_tab_bar2.dart';
import 'workout_post_detail.dart';
import 'editprofile_business.dart';
import 'seeall_workout.dart';
class ClientPage extends StatefulWidget {
@override
_ClientPageState createState() => _ClientPageState();
}
class _ClientPageState extends State<ClientPage> {
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text('Your profile',
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
backgroundColor: Colors.black,
),
body: Padding(
padding: EdgeInsets.all(10),
child: Stack(alignment: Alignment.bottomCenter, children: [
Column(children: [
SizedBox(
height: 10,
),
Center(
child: CircleAvatar(
radius: 60,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 46,
backgroundColor: Colors.grey.shade100,
child: Text('Pic')))),
SizedBox(
height: 10,
),
Text(
'Usermane',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
SizedBox(
height: 20,
),
Container(
height: 60,
width: MediaQuery.of(context).size.width * 0.90,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: Colors.grey[200],
shadows: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 2,
),
]),
child: Padding(
padding: const EdgeInsets.only(left: 25.0, right: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Subscribers',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
'8',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.grey),
),
],
),
),
),
SizedBox(
height: 20,
),
Text(
'PROGRAMS SUBSCRIBED',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
SizedBox(
height: 20,
),
Stack(children: [
Container(
height: 300,
width: MediaQuery.of(context).size.width * 0.90,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
// shape: const StadiumBorder(),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
_userprofile(context)
]),
])
])));
}
}
_userprofile(context) {
return Padding(
padding: EdgeInsets.all(10),
child: Row(
children: [
CircleAvatar(
radius: 35,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 46,
backgroundColor: Colors.grey.shade100,
child: Text('Pic'))),
SizedBox(
height: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
'username',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text('Name of the program'),
),
],
),
SizedBox(
width: 20,
),
Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
),
Container(
child: ElevatedButton(
onPressed: () {},
child: Text(
'ACCESS',
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.black),
),
),
),
Divider(
height: 10,
color: Colors.black,
)
])
],
),
);
}
This is the outcome
How I can be secure that the button ACCESS it’s staying on the right side and the divider is showing up under the button and text and avatar
4
Answers
It seems that you are over using the
Stack()widget. To completely make sure the "Access" button and the widgets stay on their respective sides despite changes in text sizes you need to define how the row should align its children and you can combine the avatar and the column as a grouped widget using another row as below:I advice you to use custom divider using container at least you visually know what you are working with.
And to make the widget get centered just remove the stack. Wrap the container with padding and let the size of the background container be that of the users screen.
try this:
I put all the explanations, where you need to make changes inside the code as comments
and here is the result:
When using Divider inside a Row, it needs a specific width either with a SizedBox or Container, here the example:
To make sure that the access button always stays on the right, you can wrap the access button in an expanded and aligned widget and use a column to add a divider at the bottom.