O am doing the user profile in flutter and I tried to clone (double) _userprofile(context) twice but it only shows once (this is where it should appear the programs of the people he subscribed at). I want to make it x6 times and the widget to continue expand . This is the photo of the outcome
This is the code I have , _userprofile it’s at the end and added in stack
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 {
const ClientPage({super.key});
@override
ClientPageState createState() => ClientPageState();
}
class ClientPageState extends State<ClientPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text(
'Your profile',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
backgroundColor: Colors.black,
),
body: Padding(
padding: const EdgeInsets.all(10),
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Column(
children: [
const SizedBox(
height: 10,
),
Center(
child: CircleAvatar(
radius: 60,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 46,
backgroundColor: Colors.grey.shade100,
child: const Text('Pic'),
),
),
),
const SizedBox(
height: 10,
),
const Text(
'Usermane',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
const 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: const Padding(
padding: 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,
),
),
],
),
),
),
const SizedBox(
height: 20,
),
const Text(
'PROGRAMS SUBSCRIBED',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
const SizedBox(
height: 20,
),
Stack(
children: [
//align your container to center here with Align widget
Align(
alignment: Alignment.center,
child: 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: const Offset(
0, 3), // changes position of shadow
),
],
),
),
),
_userprofile(context),
_userprofile(context)
],
),
],
)
],
),
),
);
}
}
_userprofile(context) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 10, 16, 10),
//wrap the Row in a Column and take out the Divider out of Row,
// and put it inside the Column right below the Row
child: Column(
children: [
Row(
children: [
CircleAvatar(
radius: 35,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 30,
backgroundColor: Colors.grey.shade100,
child: const Text('Pic'))),
const SizedBox(
height: 20,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 8.0),
child: Text(
'username',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Padding(
padding: EdgeInsets.only(left: 8.0),
child: Text('Name of the program'),
),
],
),
const SizedBox(
width: 20,
),
const Padding(
padding: EdgeInsets.all(8.0),
),
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all<Color>(Colors.black),
),
child: const Text(
'ACCESS',
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
),
),
],
),
const Divider(
thickness: 1,
color: Color.fromARGB(255, 172, 172, 172),
)
],
),
);
}
2
Answers
wrap both _userprofile(context) in column with Stack as below,
I hope it is what you want.