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:
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,
),
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