profile picture separated from list view flutter

571 views Asked by At

I am trying to build a profile screen where I already have a List view with some elements to display. However, the image I am placing is located in the center of the screen, interfering with my list. How can I separate my profile information from the list view? Something like this: enter image description here

My code inside a Scaffold:

 body: Stack(
            children:[ 
               CircleAvatar(
                            backgroundColor: Colors.white70,
                            minRadius: 60.0,
                            child: CircleAvatar(
                              radius: 50.0,
                              backgroundImage:
                                  NetworkImage('https://avatars0.githubusercontent.com/u/28812093?s=460&u=06471c90e03cfd8ce2855d217d157c93060da490&v=4'),
                            ),
                          ),
              FutureBuilder<List<ParseObject>>(
              future: getTodo(widget.usermail),
              builder: (context, snapshot) {
                switch (snapshot.connectionState) {
                  case ConnectionState.none:
                  case ConnectionState.waiting:
                    return Center(
                      child: SizedBox(
                          width: 100,
                          height: 100,
                          child: const CircularProgressIndicator()),
                    );
                  default:
                    if (snapshot.hasError) {
                      return const Center(
                        child: Text("Error..."),
                      );
                    }
                    if (!snapshot.hasData) {
                      return const Center(
                        child: Text("No Data..."),
                      );
                    } else {
                      return ListView.builder(
                          padding: const EdgeInsets.only(top: 10.0),
                          itemCount: snapshot.data!.length,
                          itemBuilder: (context, index) {
                            //*************************************
                            //Get Parse Object Values
                            final varTodo = snapshot.data![index];
                            final varTitle = varTodo.get<String>('title')!;
                            final varBreed = varTodo.get<String>('Breed');
                            final varImg = varTodo.get<ParseFileBase>('DogImg')!;
          
                            //*************************************
          
                            return ListTile(
                              title: Text(varTitle),
                              subtitle: Text(varBreed as String),
                              leading: ClipRRect(
                                borderRadius: BorderRadius.all(Radius.circular(40)),
                                child: Image.network(varImg.url as String),
                              ),
                              trailing: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  IconButton(
                                    icon: const Icon(
                                      Icons.delete_outline,
                                      color: Colors.blue,
                                    ),
1

There are 1 answers

2
Kaushik Chandru On

Since the codes are not in full I shall try and explain how to do it.

Add a Container of width and height same as that of the device as a child of container add a SingleChildScrollView. Then as a child of singleChildScrollView add a column widget, add mainAxisSize:MainAxisSize.min to the column. As a child of this column add the stack that you have created. Then in the ListViewBuilder add shrinkWrap:true

Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Stack(
                    children: [
                      ListView.builder(
                        shrinkWrap: true,
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return Container();//Add the stack element here instead of container
                        },
                      )
                    ],
                  )
                ],
              ),
            ),
          )