skip to Main Content

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 Pic with what I see
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


  1. wrap both _userprofile(context) in column with Stack as below,

      Column(
      children: [
        _userProfile(context),
        _userProfile(context),
      ],
    )
    
    Login or Signup to reply.
  2. I hope it is what you want.

                          Stack(
                              children: [
                                Align(
                                  alignment: Alignment.center,
                                  child: Container(
                                    height: 300,
                                    width: MediaQuery.of(context).size.width * 0.90,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10),
                                      color: Colors.white,
                                      boxShadow: [
                                        BoxShadow(
                                          color: Colors.grey.withOpacity(0.5),
                                          spreadRadius: 5,
                                          blurRadius: 7,
                                          offset: const Offset(0, 3), // changes position of shadow
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                Container(
                                  height: 300,
                                  child: ListView.builder(
                                      itemCount: 5,
                                      itemBuilder: (context, index) {
                                        return _userprofile(context);
                                      }),
                                ),
                              ],
                            ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search