So I am making a widget in flutter that contains some text and since I add the “Subscribe” button it appears that pixels are messing up .. I don’t know if I should wrap the container in a column and what I should add to stop messing the Ui, or should I wrap it in a stack? add expanded ? or make the subscribe button smaller? but I like it this size
Stack(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
)
]),
child: SizedBox(
height: MediaQuery.of(context).size.height / 2.2,
width: MediaQuery.of(context).size.width / 1.1,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 35.0),
child: CircleAvatar(
radius: 50,
backgroundImage: ((snaps.data?.data()
as Map)['avatarUrl'] ==
'default')
? const NetworkImage(
"https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
// activity.imageUrl,
)
: NetworkImage((snaps.data?.data()
as Map)['avatarUrl']),
),
),
Container(
height: 170.0,
// width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width: MediaQuery.of(context)
.size
.width *
0.5,
child: SizedBox(
width: 120.0,
child: Center(
child: Text(
(snaps.data?.data()
as Map)['name'],
// activity.name,
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
),
),
),
SizedBox(
width: MediaQuery.of(context)
.size
.width *
0.5,
child: SizedBox(
width: 120.0,
child: Center(
child: Text(
(snaps.data?.data()
as Map)['address'],
// activity.name,
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
),
),
),
Text(
(snapshot2.data?.data()
as Map)['category'],
// activity.type,
style: const TextStyle(
color: Colors.grey,
),
),
SizedBox(
height: 20,
),
Container(
height: 80,
width: MediaQuery.of(context)
.size
.width *
0.78,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: Colors.grey[200],
shadows: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 2,
),
],
),
child: const Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: [
Expanded(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
Text(
'Subscribers',
style: TextStyle(
fontWeight:
FontWeight
.bold),
),
Text('356',
style: TextStyle(
fontWeight:
FontWeight
.bold,
color: Colors
.grey)),
],
),
),
VerticalDivider(
indent: 8,
endIndent: 8,
),
Expanded(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
Text(
'Programs',
style: TextStyle(
fontWeight:
FontWeight
.bold),
),
Text('8',
style: TextStyle(
fontWeight:
FontWeight
.bold,
color: Colors
.grey)),
],
),
),
VerticalDivider(
indent: 8,
endIndent: 8,
),
Expanded(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
Text(
'Ratings',
style: TextStyle(
fontWeight:
FontWeight
.bold),
),
Text('5.0',
style: TextStyle(
fontWeight:
FontWeight
.bold,
color: Colors
.grey)),
],
),
),
])),
SizedBox(
height: 30,
),
Container(
child: Container(
width: MediaQuery.of(context)
.size
.width /
2.5,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
padding:
const EdgeInsets.symmetric(
vertical: 16),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(32),
),
),
onPressed: () {},
child: Text(
"SUBSCRIBE",
style: TextStyle(
color: Colors.white,
fontWeight:
FontWeight.bold),
),
),
),
),
],
),
),
],
),
),
),
),
Positioned(
right: 35,
child: TextButton(
style: TextButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Colors.purple,
disabledBackgroundColor: Colors.black,
),
onPressed: null,
child: Text(
'????TOP 5',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
)
],
),